@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-7xl mx-auto pb-20 px-4" x-data="sdlManager()">
    
    {{-- Header Section --}}
    <div class="flex justify-between items-end mb-8 border-b border-slate-900 pb-4">
        <div>
            <h1 class="text-3xl font-black text-slate-900">SDL Configuration</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1 ">
                Skills Development Levy (Employer Only) - 
                @if($isEnabled)
                    <span class="text-emerald-600"><i class="fas fa-check-circle mr-1"></i> Module Enabled</span>
                @else
                    <span class="text-red-600"><i class="fas fa-times-circle mr-1"></i> Module Disabled</span>
                @endif
            </p>
        </div>

        <div class="flex items-center gap-4">
            <form action="{{ route('payroll.sdl.index') }}" method="GET" class="flex items-center gap-2">
                <label class="text-[9px] font-black text-slate-500 ">Year:</label>
                <select name="financial_year_id" onchange="this.form.submit()" class="quickbooks-input py-1.5 bg-slate-50 text-xs font-bold w-32">
                    @foreach($financialYears as $fy)
                        <option value="{{ $fy->id }}" {{ $currentFinancialYear && $fy->id == $currentFinancialYear->id ? 'selected' : '' }}>{{ $fy->year }}</option>
                    @endforeach
                </select>
            </form>

            @if($isEnabled)
                <button @click="openCreateModal()" class="bg-slate-900 text-white px-6 py-2.5 text-[10px] font-black hover:bg-slate-800 transition shadow-lg">
                    <i class="fas fa-plus mr-2"></i> New Configuration
                </button>
            @else
                <button class="bg-slate-100 text-slate-400 px-6 py-2.5 text-[10px] font-black border border-slate-200 cursor-not-allowed">
                    <i class="fas fa-lock mr-2"></i> Creation Locked
                </button>
            @endif
        </div>
    </div>

    {{-- Status Alert --}}
    @if(!$isEnabled)
        <div class="mb-8 p-4 bg-amber-50 border-l-4 border-amber-400 flex items-center gap-4">
            <i class="fas fa-exclamation-triangle text-amber-600"></i>
            <p class="text-xs font-medium text-amber-800 ">
                SDL is disabled for {{ $currentFinancialYear->year ?? 'this year' }}. Enable it in the <a href="{{ route('payroll.settings.index') }}" class="underline font-black">Payroll Console</a> first.
            </p>
        </div>
    @endif

    {{-- Configuration Table --}}
    <div class="bg-white border border-slate-200 rounded-sm overflow-hidden shadow-sm">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50 border-b border-slate-200">
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500 ">Financial Year</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">Employer Levy Rate</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-center">Status</th>
                    <th class="px-6 py-3 text-[10px] font-black text-slate-500  text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($sdlConfigs as $config)
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-6 py-4 text-xs font-bold text-slate-900">{{ $config->financial_year }}</td>
                    <td class="px-6 py-4 text-xs text-slate-600 text-right font-black">{{ number_format($config->employer_rate, 2) }}%</td>
                    <td class="px-6 py-4 text-center">
                        <span class="px-2 py-1 text-[9px] font-black {{ $config->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-400' }} rounded-full ">
                            {{ $config->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end gap-4">
                            <button @click="openViewModal({{ json_encode($config) }})" class="text-slate-400 hover:text-blue-600 transition"><i class="fas fa-eye"></i></button>
                            @if($isEnabled && $config->financial_year == $currentFinancialYear->year)
                                <button @click="openEditModal({{ json_encode($config) }})" class="text-slate-400 hover:text-slate-900 transition"><i class="fas fa-edit"></i></button>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-12 text-center text-xs text-slate-400 italic">No SDL configurations found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- MODAL: Create/Edit --}}
    <div x-show="formModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-sm shadow-2xl w-full max-w-lg overflow-hidden" @click.away="formModalOpen = false">
            <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 class="text-sm font-black text-slate-900 " x-text="isEdit ? 'Edit SDL Rate' : 'New SDL Rate'"></h3>
                <button @click="formModalOpen = false" class="text-slate-400 hover:text-slate-900"><i class="fas fa-times"></i></button>
            </div>
            <form :action="formAction" method="POST" class="p-8">
                @csrf
                <template x-if="isEdit">@method('PUT')</template>
                
                <div class="space-y-6">
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-1">Financial Year Selection</label>
                        <select name="financial_year_id" x-model="formData.financial_year_id" class="quickbooks-input font-bold" required>
                            @foreach($financialYears as $fy)
                                <option value="{{ $fy->id }}">{{ $fy->year }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-1 ">Employer Levy Rate (%)</label>
                        <div class="relative">
                            <input type="number" step="0.01" name="employer_rate" x-model="formData.employer_rate" class="quickbooks-input font-bold text-lg" required>
                            <span class="absolute right-3 top-3 text-slate-300 font-bold font-mono">%</span>
                        </div>
                    </div>
                </div>

                <div class="mt-8 p-4 bg-teal-50 border border-teal-100 rounded text-[11px] text-teal-700 leading-relaxed font-medium">
                    <i class="fas fa-info-circle mr-1"></i> SDL is an employer-only liability. Standard ZRA rate is 0.5% of gross emoluments.
                </div>

                <div class="mt-10 flex justify-end gap-3">
                    <button type="button" @click="formModalOpen = false" class="px-6 py-2.5 text-[10px] font-black text-slate-500 hover:bg-slate-50 transition">CANCEL</button>
                    <button type="submit" class="bg-slate-900 text-white px-10 py-2.5 text-[10px] font-black shadow-lg shadow-slate-200" x-text="isEdit ? 'UPDATE SDL' : 'SAVE SDL'"></button>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL: View --}}
    <div x-show="viewModalOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded-sm shadow-2xl w-full max-w-md overflow-hidden" @click.away="viewModalOpen = false">
            <div class="p-6 border-b border-slate-100 bg-slate-50 flex justify-between items-center text-slate-900">
                <h3 class="text-sm font-black ">SDL Configuration Details</h3>
                <button @click="viewModalOpen = false" class="text-slate-400 hover:text-slate-900"><i class="fas fa-times"></i></button>
            </div>
            <div class="p-8 space-y-6">
                <div class="flex justify-between items-center border-b border-slate-50 pb-3">
                    <span class="text-[10px] font-black text-slate-400 ">Year</span>
                    <span class="text-xs font-black text-slate-900" x-text="viewData.financial_year"></span>
                </div>
                <div class="flex justify-between items-center border-b border-slate-50 pb-3">
                    <span class="text-[10px] font-black text-slate-400 ">Employer Rate</span>
                    <span class="text-sm font-black text-slate-900" x-text="viewData.employer_rate + '%'"></span>
                </div>
                <div class="p-4 bg-slate-50 border border-slate-100 rounded text-center">
                    <span class="block text-[9px] font-black text-slate-400  mb-1">Liability Type</span>
                    <span class="text-[11px] font-black  text-slate-700">Employer Only Cost</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function sdlManager() {
        return {
            formModalOpen: false, viewModalOpen: false, isEdit: false,
            formAction: "{{ route('payroll.sdl.store') }}",
            formData: { financial_year_id: '{{ $currentFinancialYear->id ?? "" }}', employer_rate: '0.50' },
            viewData: {},
            openCreateModal() {
                this.isEdit = false;
                this.formData = { financial_year_id: '{{ $currentFinancialYear->id ?? "" }}', employer_rate: '0.50' };
                this.formAction = "{{ route('payroll.sdl.store') }}";
                this.formModalOpen = true;
            },
            openEditModal(config) {
                this.isEdit = true;
                this.formData = { ...config };
                this.formAction = `/payroll/sdl/${config.id}`;
                this.formModalOpen = true;
            },
            openViewModal(config) {
                this.viewData = config;
                this.viewModalOpen = true;
            }
        }
    }
</script>

<style>
    .quickbooks-input { border: 1px solid #e2e8f0; border-radius: 2px; padding: 10px; font-size: 13px; width: 100%; transition: border-color 0.2s; }
    .quickbooks-input:focus { outline: none; border-color: #000; }
    [x-cloak] { display: none !important; }
</style>
@endsection