@extends('school.layouts.app')

@section('content')
<div class="max-w-5xl mx-auto p-4">
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-bold text-slate-800">Numbering Scheme Setup</h1>
        <a href="{{ route('school.core_admin') }}"
           class="text-sm text-indigo-600 hover:underline">
            Back to Settings
        </a>
    </div>

    <form action="{{ route('school.settings.update_auto_scheme') }}" method="POST" class="space-y-3">
        @csrf

        @foreach([
            'enquiry' => 'Enquiry Number',
            'registration' => 'Registration Number',
            'admission' => 'Admission Number',
            'staff' => 'Employee Code'
        ] as $key => $label)


        <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
            <div class="flex items-center gap-2 mb-2">
                <div class="w-1.5 h-5 bg-indigo-600 rounded-full"></div>
                <h3 class="font-semibold text-sm text-slate-700">{{ $label }}</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">

                <!-- Auto Generate -->
                <div class="md:col-span-5 flex items-center gap-2 h-9">
                    <input type="checkbox"
                           name="{{ $key }}_auto"
                           id="{{ $key }}_auto"
                           onchange="toggleSchemeInputs('{{ $key }}')"
                           {{ ($schemes[$key]->is_auto ?? 1) ? 'checked' : '' }}
                           class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer">

                    <label for="{{ $key }}_auto"
                           class="text-sm font-medium text-slate-600 cursor-pointer select-none">
                        Enable Auto Generation
                    </label>
                </div>

                <!-- Prefix -->
                <div class="md:col-span-3">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">
                        Prefix
                    </label>

                    <input type="text"
                           id="{{ $key }}_prefix"
                           name="{{ $key }}_prefix"
                           value="{{ $schemes[$key]->prefix ?? 'ENQ' }}"
                           class="scheme-input w-full px-3 py-1.5 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all {{ ($schemes[$key]->is_auto ?? 1) ? '' : 'bg-slate-100 cursor-not-allowed' }}"
                           {{ ($schemes[$key]->is_auto ?? 1) ? '' : 'disabled' }}>
                </div>

                <!-- Start Number -->
                <div class="md:col-span-4">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">
                        Start From
                    </label>

                    <input type="text"
                        inputmode="numeric"
                        pattern="[0-9]+"
                        id="{{ $key }}_start"
                        name="{{ $key }}_start"
                        value="{{ $schemes[$key]->start_number ?? '1' }}"
                        class="scheme-input w-full px-3 py-1.5 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all {{ ($schemes[$key]->is_auto ?? 1) ? '' : 'bg-slate-100 cursor-not-allowed' }}"
                        {{ ($schemes[$key]->is_auto ?? 1) ? '' : 'disabled' }}>
                </div>

            </div>
        </div>

        @endforeach

        <div class="flex justify-end pt-1">
            <button type="submit"
                    class="px-5 py-2 text-sm bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700">
                Save All Settings
            </button>
        </div>
    </form>
</div>

<script>
    function toggleSchemeInputs(type) {
        const isChecked = document.getElementById(type + '_auto').checked;
        const prefixInput = document.getElementById(type + '_prefix');
        const startInput = document.getElementById(type + '_start');

        if (isChecked) {
            prefixInput.disabled = false;
            startInput.disabled = false;
            prefixInput.classList.remove('bg-slate-100', 'cursor-not-allowed');
            startInput.classList.remove('bg-slate-100', 'cursor-not-allowed');
        } else {
            prefixInput.disabled = true;
            startInput.disabled = true;
            prefixInput.classList.add('bg-slate-100', 'cursor-not-allowed');
            startInput.classList.add('bg-slate-100', 'cursor-not-allowed');
        }
    }
</script>
@endsection