@extends('layouts.app')
@section('title', 'Settings')

@section('content')
<div class="max-w-3xl space-y-6" x-data="tabs('general')">
    <div>
        <h1 class="text-xl font-bold">Settings</h1>
        <p class="text-sm text-ink-muted">Everything here is configurable at runtime — no code changes or redeploys needed.</p>
    </div>

    <div class="card">
        <div class="flex border-b border-border px-2 overflow-x-auto">
            <button class="tab-btn" :class="is('general') && 'active'" x-on:click="set('general')">General</button>
            <button class="tab-btn" :class="is('appearance') && 'active'" x-on:click="set('appearance')">Appearance</button>
            <button class="tab-btn" :class="is('pos') && 'active'" x-on:click="set('pos')">POS & Shifts</button>
            <button class="tab-btn" :class="is('happy') && 'active'" x-on:click="set('happy')">Happy hour</button>
            <button class="tab-btn" :class="is('etims') && 'active'" x-on:click="set('etims')">eTIMS</button>
            <button class="tab-btn" :class="is('mpesa') && 'active'" x-on:click="set('mpesa')">M-Pesa</button>
        </div>

        <form method="POST" action="{{ route('settings.update') }}" class="p-5">
            @csrf @method('PUT')

            <div x-show="is('general')" x-cloak class="space-y-4">
                <div>
                    <label class="field-label">Company name</label>
                    <input type="text" name="company_name" value="{{ old('company_name', $general['company_name']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">KRA PIN</label>
                    <input type="text" name="company_pin" value="{{ old('company_pin', $general['company_pin']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">Business phone number</label>
                    <input type="text" name="business_phone" value="{{ old('business_phone', $general['business_phone']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">Alternative phone number</label>
                    <input type="text" name="alternative_phone" value="{{ old('alternative_phone', $general['alternative_phone']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">Business email</label>
                    <input type="email" name="business_email" value="{{ old('business_email', $general['business_email']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">Business website</label>
                    <input type="text" name="business_website" value="{{ old('business_website', $general['business_website']) }}" class="input" placeholder="https://example.com">
                </div>
                <div>
                    <label class="field-label">Currency symbol</label>
                    <input type="text" name="currency_symbol" value="{{ old('currency_symbol', $general['currency_symbol']) }}" class="input w-32">
                </div>
                <div class="grid grid-cols-2 gap-3 max-w-md pt-2 border-t border-border">
                    <div>
                        <label class="field-label">M-Pesa Till number</label>
                        <input type="text" name="till_number" value="{{ old('till_number', $general['till_number']) }}" class="input" placeholder="e.g. 123456">
                    </div>
                    <div>
                        <label class="field-label">M-Pesa Paybill number</label>
                        <input type="text" name="paybill_number" value="{{ old('paybill_number', $general['paybill_number']) }}" class="input" placeholder="e.g. 400200">
                    </div>
                </div>
                <p class="text-xs text-ink-muted">Whichever of these you fill in is printed on every receipt and bill, so customers know where to pay.</p>
            </div>

            <div x-show="is('pos')" x-cloak class="space-y-4">
                <div>
                    <label class="field-label">Default opening float</label>
                    <input type="number" step="0.01" name="default_float" value="{{ old('default_float', $pos['default_float']) }}" class="input">
                </div>
                <div>
                    <label class="field-label">Variance alert threshold</label>
                    <input type="number" step="0.01" name="variance_alert" value="{{ old('variance_alert', $pos['variance_alert']) }}" class="input">
                    <p class="text-xs text-ink-muted mt-1">Shift variances beyond this amount are highlighted for manager review.</p>
                </div>
            </div>

            <div x-show="is('happy')" x-cloak class="space-y-4">
                <p class="text-sm text-ink-muted">When happy hour is on, every product and service added to an order or tab is priced this percentage lower. Items already on an order keep the price they were added at.</p>
                <label class="flex items-center gap-2 text-sm font-medium">
                    <input type="checkbox" name="hh_enabled" value="1" @checked(old('hh_enabled', $happy['enabled'])) class="rounded border-border text-primary-500">
                    Happy hour is ON
                </label>
                <div>
                    <label class="field-label">Discount off everything (%)</label>
                    <input type="number" step="0.5" min="0" max="99" name="hh_percent" value="{{ old('hh_percent', $happy['percent']) }}" class="input w-32">
                </div>

                <div class="rounded-lg border border-border p-3 space-y-3" x-data="{ scheduled: {{ old('hh_use_schedule', $happy['use_schedule']) ? 'true' : 'false' }} }">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="checkbox" name="hh_use_schedule" value="1" x-model="scheduled" class="rounded border-border text-primary-500">
                        Only apply it at set times (otherwise it stays on until switched off)
                    </label>
                    <div x-show="scheduled" x-cloak class="space-y-3">
                        <div class="flex flex-wrap gap-3">
                            @foreach ([1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'] as $n => $label)
                                <label class="flex items-center gap-1.5 text-sm"><input type="checkbox" name="hh_days[]" value="{{ $n }}" @checked(in_array($n, (array) old('hh_days', $happy['days']))) class="rounded border-border text-primary-500"> {{ $label }}</label>
                            @endforeach
                        </div>
                        <div class="grid grid-cols-2 gap-3 max-w-xs">
                            <div><label class="field-label">From</label><input type="time" name="hh_start" value="{{ old('hh_start', $happy['start']) }}" class="input"></div>
                            <div><label class="field-label">Until</label><input type="time" name="hh_end" value="{{ old('hh_end', $happy['end']) }}" class="input"></div>
                        </div>
                        <p class="text-xs text-ink-muted">Times are {{ config('pos.company.timezone') }} time. A window past midnight (e.g. 18:00 – 01:00) works.</p>
                    </div>
                </div>
            </div>

            <div x-show="is('mpesa')" x-cloak class="space-y-3">
                @if ($mpesa['configured'])
                    <div class="flex items-center gap-2 text-sm text-success"><i data-lucide="check-circle-2" class="w-4 h-4"></i> M-Pesa is connected ({{ $mpesa['env'] }}).</div>
                    <p class="text-xs text-ink-muted">Callback URL registered with each request: <span class="font-mono break-all">{{ $mpesa['callback_url'] }}</span></p>
                @else
                    <div class="flex items-center gap-2 text-sm text-danger"><i data-lucide="alert-circle" class="w-4 h-4"></i> M-Pesa is not set up yet.</div>
                    <p class="text-xs text-ink-muted">Add the Safaricom Daraja keys to the server’s <span class="font-mono">.env</span> file (the M-Pesa block in <span class="font-mono">.env.example</span>), then run <span class="font-mono">php artisan config:clear</span>. Keys are kept in the file, not in this screen, so they never sit in the database.</p>
                @endif
            </div>

            <div x-show="is('etims')" x-cloak class="space-y-4">
                <label class="flex items-center gap-2 text-sm">
                    <input type="checkbox" name="etims_enabled" value="1" @checked(old('etims_enabled', $etims['enabled'])) class="rounded border-border text-primary-500">
                    Enable eTIMS submission
                </label>
                <div>
                    <label class="field-label">eTIMS base URL</label>
                    <input type="url" name="etims_base_url" value="{{ old('etims_base_url', $etims['base_url']) }}" class="input" placeholder="https://etims.example.go.ke/api">
                </div>
                <div>
                    <label class="field-label">Device serial</label>
                    <input type="text" name="etims_device_serial" value="{{ old('etims_device_serial', $etims['device_serial']) }}" class="input">
                </div>
            </div>

            <div class="flex justify-end pt-5 mt-5 border-t border-border" x-show="!is('appearance')">
                <button type="submit" class="btn-primary">Save settings</button>
            </div>
        </form>

        <div x-show="is('appearance')" x-cloak class="p-5 space-y-8">
            {{-- Logo --}}
            <div class="space-y-3">
                <h3 class="font-semibold text-sm">Business logo</h3>
                <p class="text-xs text-ink-muted">Shown on the sign-in screen, the sidebar, and printed receipts.</p>
                <div class="flex items-center gap-4">
                    @if ($general['logo_path'])
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($general['logo_path']) }}" class="h-16 w-16 rounded-xl object-cover ring-1 ring-border" alt="Current logo">
                    @else
                        <div class="h-16 w-16 rounded-xl bg-accent-500 flex items-center justify-center text-white font-display font-bold text-2xl">{{ substr($general['company_name'], 0, 1) }}</div>
                    @endif
                    <form method="POST" action="{{ route('settings.logo.update') }}" enctype="multipart/form-data" class="flex items-center gap-2">
                        @csrf
                        <input type="file" name="logo" accept="image/png,image/jpeg,image/webp" class="input !py-1.5 !text-xs" required>
                        <button type="submit" class="btn-secondary btn-sm shrink-0">Upload</button>
                    </form>
                    @if ($general['logo_path'])
                        <form method="POST" action="{{ route('settings.logo.remove') }}" onsubmit="return confirm('Remove the logo and go back to the default?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn-ghost btn-sm text-danger">Remove</button>
                        </form>
                    @endif
                </div>
                <p class="text-[11px] text-ink-muted">PNG, JPG or WEBP, up to 2MB. Square images look best.</p>
            </div>

            {{-- Theme --}}
            <div class="space-y-3 pt-6 border-t border-border" x-data="{ preset: '{{ old('preset', $theme['current']) }}' }">
                <h3 class="font-semibold text-sm">Colour theme</h3>
                <p class="text-xs text-ink-muted">Applies everywhere immediately — sign-in screen, buttons, badges — no restart needed.</p>
                <form method="POST" action="{{ route('settings.theme.update') }}" class="space-y-4">
                    @csrf @method('PUT')
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach ($theme['presets'] as $key => $p)
                            <label class="flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition"
                                   :class="preset === '{{ $key }}' ? 'border-primary-500 ring-1 ring-primary-500 bg-primary-50' : 'border-border'">
                                <input type="radio" name="preset" value="{{ $key }}" x-model="preset" class="text-primary-500">
                                @if ($key !== 'custom')
                                    <span class="flex -space-x-1 shrink-0">
                                        <span class="w-5 h-5 rounded-full ring-2 ring-white" style="background: rgb({{ $p['vars']['c-primary-500'] ?? '15 110 94' }})"></span>
                                        <span class="w-5 h-5 rounded-full ring-2 ring-white" style="background: rgb({{ $p['vars']['c-accent-500'] ?? '201 138 44' }})"></span>
                                        <span class="w-5 h-5 rounded-full ring-2 ring-white" style="background: rgb({{ $p['vars']['c-success'] ?? '46 139 87' }})"></span>
                                        <span class="w-5 h-5 rounded-full ring-2 ring-white" style="background: rgb({{ $p['vars']['c-danger'] ?? '179 64 47' }})"></span>
                                    </span>
                                @else
                                    <i data-lucide="palette" class="w-5 h-5 text-ink-faint shrink-0"></i>
                                @endif
                                <span class="text-sm font-medium">{{ $p['label'] }}</span>
                            </label>
                        @endforeach
                    </div>

                    <div x-show="preset === 'custom'" x-cloak class="grid grid-cols-2 gap-3 max-w-sm pt-2">
                        <div>
                            <label class="field-label">Primary colour</label>
                            <input type="color" name="custom_primary_hex" value="{{ old('custom_primary_hex', $theme['custom_primary_hex']) }}" class="input !p-1 h-10 w-full">
                        </div>
                        <div>
                            <label class="field-label">Accent colour</label>
                            <input type="color" name="custom_accent_hex" value="{{ old('custom_accent_hex', $theme['custom_accent_hex']) }}" class="input !p-1 h-10 w-full">
                        </div>
                    </div>

                    <div class="flex justify-end pt-3 border-t border-border">
                        <button type="submit" class="btn-primary">Save theme</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card card-pad mb-6">
        <h2 class="font-display font-bold text-sm mb-1">Receipt printing settings</h2>
        <p class="text-xs text-ink-muted mb-4">Choose what appears on customer receipts and bills.</p>

        <div class="rounded-lg border border-border p-4 mb-5 space-y-3">
            <h3 class="font-semibold text-sm">Receipt business logo</h3>
            <p class="text-xs text-ink-muted">Upload the logo here and select “Print business logo” below. PNG, JPG or WEBP, maximum 2MB.</p>
            <div class="flex flex-wrap items-center gap-4">
                @if (!empty($general['logo_path']))
                    @php
                        $receiptLogoPath = ltrim((string) $general['logo_path'], '/');
                        foreach (['storage/app/public/', 'public/storage/', 'storage/'] as $receiptLogoPrefix) {
                            if (str_starts_with($receiptLogoPath, $receiptLogoPrefix)) {
                                $receiptLogoPath = substr($receiptLogoPath, strlen($receiptLogoPrefix));
                                break;
                            }
                        }
                    @endphp
                    <img src="{{ asset('storage/' . $receiptLogoPath) }}" alt="Current business logo" class="max-h-20 max-w-36 object-contain border border-border rounded p-1" onerror="this.style.display='none'">
                @else
                    <span class="text-sm text-ink-muted">No logo uploaded yet.</span>
                @endif
                <form method="POST" action="{{ route('settings.logo.update') }}" enctype="multipart/form-data" class="flex flex-wrap items-center gap-2">
                    @csrf
                    <input type="file" name="logo" accept="image/png,image/jpeg,image/webp" class="input !py-1.5 !text-xs" required>
                    <button type="submit" class="btn-secondary btn-sm">Upload logo</button>
                </form>
                @if (!empty($general['logo_path']))
                    <form method="POST" action="{{ route('settings.logo.remove') }}" onsubmit="return confirm('Remove the business logo?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn-ghost btn-sm text-danger">Remove logo</button>
                    </form>
                @endif
            </div>
        </div>

        <form method="POST" action="{{ route('settings.receipt.update') }}" class="space-y-4">
            @csrf @method('PUT')
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach ([
                    'show_logo' => 'Print business logo',
                    'show_business_name' => 'Print business name',
                    'show_landmark' => 'Print landmark/location',
                    'show_customer_details' => 'Print customer details',
                    'show_business_contacts' => 'Enable business contact printing',
                    'show_phone' => 'Print primary phone',
                    'show_alternative_phone' => 'Print alternative phone',
                    'show_email' => 'Print email address',
                    'show_website' => 'Print website',
                    'show_kra_pin' => 'Print business KRA PIN',
                    'show_order_details' => 'Print order/table/waiter details',
                ] as $key => $label)
                    <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="{{ $key }}" value="1" @checked($receipt[$key]) class="rounded border-border text-primary-500">{{ $label }}</label>
                @endforeach
            </div>
            <div>
                <label class="field-label">Landmark / location text</label>
                <input name="landmark" value="{{ $receipt['landmark'] }}" class="input" placeholder="e.g. Near the main stage, along Mombasa Road">
            </div>
            <div>
                <label class="field-label">Receipt header text</label>
                <textarea name="header_text" rows="2" class="input" placeholder="Optional message below business details">{{ $receipt['header_text'] }}</textarea>
            </div>
            <div>
                <label class="field-label">Receipt footer text</label>
                <textarea name="footer_text" rows="2" class="input" placeholder="Thank you for your business">{{ $receipt['footer_text'] }}</textarea>
            </div>
            <div class="flex justify-end"><button type="submit" class="btn-primary">Save receipt settings</button></div>
        </form>
    </div>

    <div class="card card-pad">
        <h2 class="font-display font-bold text-sm mb-3">Departments</h2>
        <div class="space-y-3">
            @foreach ($departments as $dept)
                @php($fixedCode = $dept->code)
                @if ($fixedCode)
                    <form method="POST" action="{{ route('settings.departments.update', $dept) }}" class="grid sm:grid-cols-[90px_1fr_auto] gap-2 items-end">
                        @csrf
                        @method('PUT')
                        <div>
                            <label class="field-label">Code</label>
                            <input type="text" value="{{ $fixedCode }}" class="input bg-ink/5" readonly>
                        </div>
                        <div>
                            <label class="field-label">Department name</label>
                            <input type="text" name="name" value="{{ $dept->name }}" class="input" required maxlength="255">
                        </div>
                        <button class="btn-primary">Save name</button>
                    </form>
                @else
                    <div class="flex items-center gap-2">
                        <x-badge color="teal" icon="layout-grid">{{ $dept->name }}</x-badge>
                    </div>
                @endif
            @endforeach
        </div>
        <p class="text-xs text-ink-muted mt-3">Restaurant and Bar codes are fixed at 001 and 002. Their names can be changed without changing the underlying department codes/slugs.</p>
    </div>
</div>
@endsection