@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">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">
        <h2 class="font-display font-bold text-sm mb-3">Departments</h2>
        <div class="flex flex-wrap gap-2">
            @foreach ($departments as $dept)
                <x-badge color="teal" icon="layout-grid">{{ $dept->name }}</x-badge>
            @endforeach
        </div>
        <p class="text-xs text-ink-muted mt-3">Each department automatically gets its own dashboard tile, store, and P&L line. Manage tables, categories and levies per department from their respective screens.</p>
    </div>
</div>
@endsection