@extends('layouts.app')

@section('title', 'Edit income tax plan')
@section('heading', 'Edit income tax plan')

@section('content')
    <x-card>
        <form action="{{ route('superadmin.income-tax-plans.update', $incomeTaxPlan) }}" method="post" id="income-tax-form" class="max-w-3xl space-y-6">
            @csrf
            @method('PUT')
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="plan_name" class="block text-sm font-medium text-slate-700">Plan name <span class="text-red-500">*</span></label>
                    <input type="text" name="plan_name" id="plan_name" value="{{ old('plan_name', $incomeTaxPlan->plan_name) }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('plan_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="plan_code" class="block text-sm font-medium text-slate-700">Plan code <span class="text-red-500">*</span></label>
                    <input type="text" name="plan_code" id="plan_code" value="{{ old('plan_code', $incomeTaxPlan->plan_code) }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('plan_code') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="effective_from" class="block text-sm font-medium text-slate-700">Effective from <span class="text-red-500">*</span></label>
                    <input type="date" name="effective_from" id="effective_from" value="{{ old('effective_from', $incomeTaxPlan->effective_from?->format('Y-m-d')) }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('effective_from') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="effective_to" class="block text-sm font-medium text-slate-700">Effective to <span class="text-red-500">*</span></label>
                    <input type="date" name="effective_to" id="effective_to" value="{{ old('effective_to', $incomeTaxPlan->effective_to?->format('Y-m-d')) }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('effective_to') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="standard_deduction" class="block text-sm font-medium text-slate-700">Standard deduction <span class="text-red-500">*</span></label>
                    <input type="number" name="standard_deduction" id="standard_deduction" value="{{ old('standard_deduction', $incomeTaxPlan->standard_deduction) }}" step="0.01" min="0" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                    @error('standard_deduction') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="flex items-end gap-4">
                    <label class="inline-flex items-center gap-2">
                        <input type="hidden" name="allow_deductions" value="0">
                        <input type="checkbox" name="allow_deductions" value="1" {{ old('allow_deductions', $incomeTaxPlan->allow_deductions) ? 'checked' : '' }} class="rounded border-slate-300 text-slate-800">
                        <span class="text-sm text-slate-700">Allow deductions</span>
                    </label>
                    <label class="inline-flex items-center gap-2">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $incomeTaxPlan->is_active) ? 'checked' : '' }} class="rounded border-slate-300 text-slate-800">
                        <span class="text-sm text-slate-700">Active</span>
                    </label>
                </div>
            </div>
            <div>
                <label for="description" class="block text-sm font-medium text-slate-700">Description</label>
                <textarea name="description" id="description" rows="2" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ old('description', $incomeTaxPlan->description) }}</textarea>
            </div>

            <div class="border-t border-slate-200 pt-6">
                <div class="mb-2 flex items-center justify-between">
                    <h4 class="text-sm font-semibold text-slate-700">Tax slabs</h4>
                    <button type="button" id="add-slab" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50">Add slab</button>
                </div>
                <div id="slabs-container" class="space-y-3">
                    @php
                        $slabs = old('tax_slabs');
                        if (!$slabs && $incomeTaxPlan->taxSlabs->isNotEmpty()) {
                            $slabs = $incomeTaxPlan->taxSlabs->map(fn($s) => ['slab_no' => $s->slab_no, 'min_amount' => $s->min_amount, 'max_amount' => $s->max_amount, 'tax_rate' => $s->tax_rate, 'cess_rate' => $s->cess_rate])->toArray();
                        }
                        if (empty($slabs)) {
                            $slabs = [['slab_no' => 1, 'min_amount' => 0, 'max_amount' => null, 'tax_rate' => 0, 'cess_rate' => 4]];
                        }
                    @endphp
                    @foreach($slabs as $i => $s)
                    <div class="slab-row flex flex-wrap items-end gap-3 rounded-lg border border-slate-200 bg-slate-50/50 p-3">
                        <input type="hidden" name="tax_slabs[{{ $i }}][slab_no]" value="{{ $i + 1 }}">
                        <div><label class="block text-xs text-slate-500">Min amount</label><input type="number" name="tax_slabs[{{ $i }}][min_amount]" value="{{ is_array($s) ? ($s['min_amount'] ?? '') : $s->min_amount }}" step="0.01" min="0" class="mt-1 w-28 rounded border border-slate-300 px-2 py-1.5 text-sm" required></div>
                        <div><label class="block text-xs text-slate-500">Max amount</label><input type="number" name="tax_slabs[{{ $i }}][max_amount]" value="{{ is_array($s) ? ($s['max_amount'] ?? '') : $s->max_amount }}" step="0.01" min="0" class="mt-1 w-28 rounded border border-slate-300 px-2 py-1.5 text-sm"></div>
                        <div><label class="block text-xs text-slate-500">Tax %</label><input type="number" name="tax_slabs[{{ $i }}][tax_rate]" value="{{ is_array($s) ? ($s['tax_rate'] ?? '') : $s->tax_rate }}" step="0.01" min="0" max="100" class="mt-1 w-20 rounded border border-slate-300 px-2 py-1.5 text-sm" required></div>
                        <div><label class="block text-xs text-slate-500">Cess %</label><input type="number" name="tax_slabs[{{ $i }}][cess_rate]" value="{{ is_array($s) ? ($s['cess_rate'] ?? 4) : $s->cess_rate }}" step="0.01" min="0" max="100" class="mt-1 w-20 rounded border border-slate-300 px-2 py-1.5 text-sm"></div>
                        <button type="button" class="remove-slab rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50">Remove</button>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Update plan</button>
                <a href="{{ route('superadmin.income-tax-plans.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
            </div>
        </form>
    </x-card>

    <script>
        document.getElementById('add-slab').addEventListener('click', function() {
            var container = document.getElementById('slabs-container');
            var count = container.querySelectorAll('.slab-row').length;
            var html = '<div class="slab-row flex flex-wrap items-end gap-3 rounded-lg border border-slate-200 bg-slate-50/50 p-3">' +
                '<input type="hidden" name="tax_slabs[' + count + '][slab_no]" value="' + (count + 1) + '">' +
                '<div><label class="block text-xs text-slate-500">Min amount</label><input type="number" name="tax_slabs[' + count + '][min_amount]" step="0.01" min="0" class="mt-1 w-28 rounded border border-slate-300 px-2 py-1.5 text-sm" required></div>' +
                '<div><label class="block text-xs text-slate-500">Max amount</label><input type="number" name="tax_slabs[' + count + '][max_amount]" step="0.01" min="0" class="mt-1 w-28 rounded border border-slate-300 px-2 py-1.5 text-sm"></div>' +
                '<div><label class="block text-xs text-slate-500">Tax %</label><input type="number" name="tax_slabs[' + count + '][tax_rate]" step="0.01" min="0" max="100" class="mt-1 w-20 rounded border border-slate-300 px-2 py-1.5 text-sm" required></div>' +
                '<div><label class="block text-xs text-slate-500">Cess %</label><input type="number" name="tax_slabs[' + count + '][cess_rate]" value="4" step="0.01" min="0" max="100" class="mt-1 w-20 rounded border border-slate-300 px-2 py-1.5 text-sm"></div>' +
                '<button type="button" class="remove-slab rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50">Remove</button></div>';
            container.insertAdjacentHTML('beforeend', html);
        });
        document.getElementById('slabs-container').addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-slab')) {
                var row = e.target.closest('.slab-row');
                if (document.querySelectorAll('.slab-row').length > 1) row.remove();
            }
        });
    </script>
@endsection