@extends('layouts.app')

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

@section('content')
    <x-card>
        <form action="{{ route('superadmin.income-tax-plans.store') }}" method="post" id="income-tax-form" class="max-w-3xl space-y-6">
            @csrf
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <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') }}" 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') }}" 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 lg:grid-cols-4">
                <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') }}" 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') }}" 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 lg:grid-cols-4">
                <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', 50000) }}" 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', true) ? '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', true) ? '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') }}</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
                        $defaultSlabs = [['slab_no' => 1, 'min_amount' => 0, 'max_amount' => 250000, 'tax_rate' => 0, 'cess_rate' => 4]];
                        $oldSlabs = old('tax_slabs', $defaultSlabs);
                    @endphp
                    @foreach($oldSlabs 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="{{ $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="{{ $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" placeholder="Optional"></div>
                        <div><label class="block text-xs text-slate-500">Tax %</label><input type="number" name="tax_slabs[{{ $i }}][tax_rate]" value="{{ $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="{{ $s['cess_rate'] ?? 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>
                    @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">Save 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