@extends('layouts.app')
@section('title', 'Taxes & Levies')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Taxes & Levies</h1>
            <p class="text-sm text-ink-muted">Add or change a rate here and it applies to the very next sale — no waiting, no code changes.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('tax.vat-report') }}" class="btn-secondary btn-sm"><i data-lucide="percent" class="w-3.5 h-3.5"></i> VAT report</a>
            <a href="{{ route('tax.daily-report') }}" class="btn-secondary btn-sm"><i data-lucide="file-text" class="w-3.5 h-3.5"></i> Daily levy report</a>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-6">
        {{-- VAT / Tax rates --}}
        <div class="card card-pad space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="font-display font-bold text-sm">VAT / Tax rates</h2>
                @can('taxes.manage')
                <button class="btn-secondary btn-sm" x-on:click="$dispatch('open-modal-add-rate')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add rate</button>
                @endcan
            </div>
            <div class="space-y-2">
                @forelse ($taxRates as $rate)
                    <div class="flex items-center justify-between p-3 rounded-lg border border-border {{ ! $rate->is_active ? 'opacity-50' : '' }}">
                        <div>
                            <p class="text-sm font-semibold">{{ $rate->name }}</p>
                            <p class="text-xs text-ink-faint">{{ $rate->code }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-sm font-semibold">{{ rtrim(rtrim(number_format($rate->rate, 2), '0'), '.') }}%</span>
                            @if ($rate->is_default)<x-badge color="teal">Default</x-badge>@endif
                            @unless ($rate->is_active)<x-badge color="slate">Inactive</x-badge>@endunless
                            @can('taxes.manage')
                            <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-rate-{{ $rate->id }}')">Edit</button>
                            @endcan
                            @can('taxes.manage')
                            <form method="POST" action="{{ route('tax.rates.toggle', $rate) }}">
                                @csrf
                                <button class="btn-ghost btn-sm {{ $rate->is_active ? 'text-danger' : 'text-success' }}">{{ $rate->is_active ? 'Deactivate' : 'Activate' }}</button>
                            </form>
                            @endcan
                        </div>
                    </div>

                    <x-modal id="edit-rate-{{ $rate->id }}" title="Edit {{ $rate->name }}">
                        <form method="POST" action="{{ route('tax.rates.update', $rate) }}" id="edit-rate-{{ $rate->id }}-form" class="space-y-4">
                            @csrf @method('PUT')
                            <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $rate->name }}" class="input" required></div>
                            <div><label class="field-label">Code</label><input type="text" name="code" value="{{ $rate->code }}" class="input" required></div>
                            <div><label class="field-label">Rate (%)</label><input type="number" step="0.001" name="rate" value="{{ $rate->rate }}" class="input" required></div>
                            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_default" value="1" @checked($rate->is_default) class="rounded border-border text-primary-500"> Set as default</label>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="edit-rate-{{ $rate->id }}-form" class="btn-primary">Save changes</button>
                        </x-slot:footer>
                    </x-modal>
                @empty
                    <p class="text-sm text-ink-muted">No tax rates configured yet.</p>
                @endforelse
            </div>
        </div>

        {{-- Levies --}}
        <div class="card card-pad space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="font-display font-bold text-sm">Hotel / Tourism levies</h2>
                @can('taxes.manage')
                <button class="btn-secondary btn-sm" x-on:click="$dispatch('open-modal-add-levy')"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Add levy</button>
                @endcan
            </div>
            <div class="space-y-2">
                @forelse ($levies as $levy)
                    <div class="p-3 rounded-lg border border-border {{ ! $levy->is_active ? 'opacity-50' : '' }}">
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-semibold">{{ $levy->name }}</p>
                            <div class="flex items-center gap-2">
                                <span class="text-sm font-semibold">{{ rtrim(rtrim(number_format($levy->rate, 2), '0'), '.') }}%</span>
                                @unless ($levy->is_active)<x-badge color="slate">Inactive</x-badge>@endunless
                            </div>
                        </div>
                        <p class="text-xs text-ink-faint mt-0.5">Charged on: {{ $levy->taxable_base === 'gross_sales' ? 'total bill (including tax)' : 'bill before tax' }}</p>
                        <div class="flex flex-wrap items-center gap-1.5 mt-2">
                            @foreach ($levy->departments as $dept)
                                <x-badge color="amber">{{ $dept->name }}</x-badge>
                            @endforeach
                            @if ($levy->departments->isEmpty())
                                <span class="text-xs text-ink-faint">Not applied to any department yet</span>
                            @endif
                            <span class="flex-1"></span>
                            @can('taxes.manage')
                            <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-levy-{{ $levy->id }}')">Edit</button>
                            @endcan
                            @can('taxes.manage')
                            <form method="POST" action="{{ route('tax.levies.toggle', $levy) }}">
                                @csrf
                                <button class="btn-ghost btn-sm {{ $levy->is_active ? 'text-danger' : 'text-success' }}">{{ $levy->is_active ? 'Deactivate' : 'Activate' }}</button>
                            </form>
                            @endcan
                        </div>
                    </div>

                    <x-modal id="edit-levy-{{ $levy->id }}" title="Edit {{ $levy->name }}">
                        <form method="POST" action="{{ route('tax.levies.update', $levy) }}" id="edit-levy-{{ $levy->id }}-form" class="space-y-4">
                            @csrf @method('PUT')
                            <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $levy->name }}" class="input" required></div>
                            <div><label class="field-label">Code</label><input type="text" name="code" value="{{ $levy->code }}" class="input" required></div>
                            <div class="grid grid-cols-2 gap-3">
                                <div><label class="field-label">Rate (%)</label><input type="number" step="0.001" name="rate" value="{{ $levy->rate }}" class="input" required></div>
                                <div>
                                    <label class="field-label">Charged on</label>
                                    <select name="taxable_base" class="input">
                                        <option value="net_sales" @selected($levy->taxable_base === 'net_sales')>Bill before tax</option>
                                        <option value="gross_sales" @selected($levy->taxable_base === 'gross_sales')>Total bill (including tax)</option>
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label class="field-label">Applies to departments</label>
                                <div class="flex flex-wrap gap-3 mt-1">
                                    @foreach ($departments as $dept)
                                        <label class="flex items-center gap-1.5 text-sm">
                                            <input type="checkbox" name="department_ids[]" value="{{ $dept->id }}" @checked($levy->departments->contains($dept->id)) class="rounded border-border text-primary-500"> {{ $dept->name }}
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div><label class="field-label">Exemption notes (optional)</label><textarea name="exemption_notes" class="input" rows="2">{{ $levy->exemption_notes }}</textarea></div>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="edit-levy-{{ $levy->id }}-form" class="btn-primary">Save changes</button>
                        </x-slot:footer>
                    </x-modal>
                @empty
                    <p class="text-sm text-ink-muted">No levies configured. Add one for e.g. the Tourism Levy.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="card card-pad bg-primary-50/40 border-primary-100">
        <div class="flex items-start gap-2.5">
            <i data-lucide="info" class="w-4 h-4 text-primary-600 mt-0.5 shrink-0"></i>
            <p class="text-xs text-ink-muted">Every bill automatically works out the subtotal, tax, levy, and grand total using the rates you set here, and this is what gets sent to KRA for tax reporting. Changes here take effect on the next sale — nothing else to do.</p>
        </div>
    </div>

    <x-modal id="add-rate" title="Add tax rate">
        <form method="POST" action="{{ route('tax.rates.store') }}" id="add-rate-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required placeholder="Standard VAT"></div>
            <div><label class="field-label">Code</label><input type="text" name="code" class="input" required placeholder="VAT16"></div>
            <div><label class="field-label">Rate (%)</label><input type="number" step="0.001" name="rate" class="input" required></div>
            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_default" value="1" class="rounded border-border text-primary-500"> Set as default</label>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-rate-form" class="btn-primary">Save rate</button>
        </x-slot:footer>
    </x-modal>

    <x-modal id="add-levy" title="Add levy">
        <form method="POST" action="{{ route('tax.levies.store') }}" id="add-levy-form" class="space-y-4">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required placeholder="Tourism Levy"></div>
            <div><label class="field-label">Code</label><input type="text" name="code" class="input" required placeholder="TOURISM2"></div>
            <div class="grid grid-cols-2 gap-3">
                <div><label class="field-label">Rate (%)</label><input type="number" step="0.001" name="rate" class="input" required></div>
                <div>
                    <label class="field-label">Charged on</label>
                    <select name="taxable_base" class="input">
                        <option value="net_sales">Bill before tax</option>
                        <option value="gross_sales">Total bill (including tax)</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="field-label">Applies to departments</label>
                <div class="flex flex-wrap gap-3 mt-1">
                    @foreach ($departments as $dept)
                        <label class="flex items-center gap-1.5 text-sm">
                            <input type="checkbox" name="department_ids[]" value="{{ $dept->id }}" class="rounded border-border text-primary-500"> {{ $dept->name }}
                        </label>
                    @endforeach
                </div>
            </div>
            <div><label class="field-label">Exemption notes (optional)</label><textarea name="exemption_notes" class="input" rows="2"></textarea></div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-levy-form" class="btn-primary">Save levy</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection