@csrf
@if (isset($office) && $office->exists)
    @method('PUT')
@endif

<style>
    .locked {
        pointer-events: none;
        background-color: #e9ecef;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container" style="max-width:900px;">
    <div class="row">
        {{-- 1. Name --}}
        <div class="col-md-6 mb-3">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                value="{{ old('name', $office->name ?? '') }}">
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- 2. Email --}}
        <div class="col-md-6 mb-3">
            <label class="form-label">Email <span class="text-danger"></span></label>
            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                value="{{ old('email', $office->email ?? '') }}">
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- 3. Code + 4. Phone --}}

        <div class="col-md-6 mb-3">
            <label class="form-label">Code</label>
            <input type="text" name="code" class="form-control @error('code') is-invalid @enderror"
                value="{{ old('code', $office->code ?? '') }}">
            @error('code')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label">Phone</label>
            <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                value="{{ old('phone', $office->phone ?? '') }}" maxlength="10">
            @error('phone')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>


        {{-- 5. Office Type --}}
        <div class="col-md-6 mb-3">
            <label class="form-label">Office Type <span class="text-danger">*</span></label>
            <select name="office_type_id" class="form-select @error('office_type_id') is-invalid @enderror">
                <option value="">-- Select type --</option>
                @foreach ($officeTypes as $t)
                    <option value="{{ $t->id }}"
                        {{ old('office_type_id', $office->office_type_id ?? '') == $t->id ? 'selected' : '' }}>
                        {{ $t->name }}
                    </option>
                @endforeach
            </select>
            @error('office_type_id')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- 6. District --}}
        <div class="col-md-6 mb-3">
            <label class="form-label">District <span class="text-danger">*</span></label>
            <select id="district_id" name="district_id" class="form-select @error('district_id') is-invalid @enderror">
                <option value="">Select District</option>
                @foreach ($districts as $district)
                    <option value="{{ $district->id }}"
                        {{ (string) old('district_id', $office->district_id ?? '') === (string) $district->id ? 'selected' : '' }}>
                        {{ $district->district }}
                    </option>
                @endforeach
            </select>
            @error('district_id')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- 7. Taluk --}}
        <div class="col-md-6 mb-3">
            <label class="form-label">Taluk <span class="text-danger">*</span></label>
            <select id="taluk_id" name="taluk_id" class="form-select @error('taluk_id') is-invalid @enderror">
                <option value="">Select Taluk</option>
                {{-- If $taluks was passed (edit page or preloaded), render them server-side --}}
                @foreach ($taluks as $taluk)
                    <option value="{{ $taluk->id }}"
                        {{ (string) old('taluk_id', $office->taluk_id ?? '') === (string) $taluk->id ? 'selected' : '' }}>
                        {{ $taluk->taluk_name }}
                    </option>
                @endforeach
            </select>
            @error('taluk_id')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

    </div>
    <hr>

    {{-- Address fields (only new address accepted) --}}
    <h5>Address </h5>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">Building / Name (optional)</label>
            <input type="text" name="building_name" class="form-control @error('building_name') is-invalid @enderror"
                value="{{ old('building_name', optional($office->addressBook)->building_name) }}">
            @error('building_name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label">Street</label>
            <input type="text" name="street" class="form-control @error('street') is-invalid @enderror"
                value="{{ old('street', optional($office->addressBook)->street) }}">
            @error('street')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>


        <div class="col-md-6 mb-3">
            <label class="form-label">City</label>
            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror"
                value="{{ old('city', optional($office->addressBook)->city) }}">
            @error('city')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6 mb-3">
            <label class="form-label">Pincode</label>
            <input type="text" name="pincode" class="form-control @error('pincode') is-invalid @enderror"
                value="{{ old('pincode', optional($office->addressBook)->pincode) }}" maxlength="6">
            @error('pincode')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

    </div>



    <hr>

    {{-- Status --}}
    <div class="mb-3">
        <label class="form-label">Status</label>
        <select name="status" class="form-select">
            <option value="1" {{ old('status', $office->status ?? 1) == 1 ? 'selected' : '' }}>Active</option>
            <option value="0" {{ old('status', $office->status ?? 1) == 0 ? 'selected' : '' }}>Inactive</option>
        </select>
    </div>
    <div class="mt-3">
        <button type="submit" id="office-submit" class="btn btn-primary">Save</button>
    </div>
</div>
{{-- JS --}}
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('office-form');
            if (!form) return;

            const submitBtn = document.getElementById('office-submit');

            const clearValidationErrors = () => {
                form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                form.querySelectorAll('.invalid-feedback.ajax').forEach(el => el.remove());
            };

            const showValidationErrors = (errors) => {
                Object.entries(errors).forEach(([field, messages]) => {
                    const input = form.querySelector(`[name="${field}"]`);
                    if (!input) return;

                    input.classList.add('is-invalid');

                    const feedback = document.createElement('div');
                    feedback.className = 'invalid-feedback ajax';
                    feedback.innerText = messages.join(' ');

                    // Insert feedback safely after input
                    input.insertAdjacentElement('afterend', feedback);
                });
            };

            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                clearValidationErrors();

                submitBtn.disabled = true;

                Swal.fire({
                    title: 'Saving Office...',
                    text: 'Please wait...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                try {
                    const res = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .content
                        },
                        credentials: 'same-origin',
                        body: new FormData(form)
                    });

                    submitBtn.disabled = false;

                    if (res.ok) {
                        const data = await res.json().catch(() => ({}));

                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: data.message || 'Office saved successfully!',
                        }).then(() => {
                            window.location.href = data.redirect ||
                                "{{ route('admin.seatmanagement.offices') }}";
                        });

                        return;
                    }

                    if (res.status === 422) {
                        const data = await res.json();

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            text: data.message || 'Please correct the highlighted fields.'
                        });

                        showValidationErrors(data.errors || {});
                        return;
                    }

                    // Other server errors
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Something went wrong. Please try again.'
                    });

                } catch (error) {
                    console.error(error);
                    submitBtn.disabled = false;

                    Swal.fire({
                        icon: 'error',
                        title: 'Network Error',
                        text: 'Please check your internet connection.'
                    });
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const districtSelect = document.getElementById('district_id');
            const talukSelect = document.getElementById('taluk_id');

            if (!districtSelect || !talukSelect) return;

            // Helper: set taluk select to a loading state
            function setLoading() {
                talukSelect.innerHTML = '<option value="">Loading...</option>';
                // talukSelect.disabled = true;
            }

            function setEmpty() {
                talukSelect.innerHTML = '<option value="">Select Taluk</option>';
                // talukSelect.disabled = false;
            }

            function fillTaluks(taluks = [], selectedId = null) {
                talukSelect.innerHTML = '<option value="">Select Taluk</option>';
                taluks.forEach(t => {
                    const opt = document.createElement('option');
                    opt.value = t.id;
                    opt.textContent = t.taluk_name;
                    if (selectedId && String(selectedId) === String(t.id)) opt.selected = true;
                    talukSelect.appendChild(opt);
                });
                // talukSelect.disabled = false;
            }

            async function fetchTaluks(districtId, selectedTaluk = null) {
                if (!districtId) {
                    setEmpty();
                    return;
                }

                setLoading();

                // Build URL using route placeholder replacement to avoid hardcoding (Blade rendered)
                let url = "{{ route('getTaluks', ':id') }}".replace(':id', encodeURIComponent(districtId));

                try {
                    const res = await fetch(url, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });

                    if (!res.ok) {
                        // server returned 4xx/5xx
                        console.error('Failed to fetch taluks:', res.status);
                        setEmpty();
                        return;
                    }

                    const data = await res.json();
                    if (!Array.isArray(data)) {
                        setEmpty();
                        return;
                    }

                    fillTaluks(data, selectedTaluk);
                } catch (err) {
                    console.error('Error fetching taluks:', err);
                    setEmpty();
                }
            }

            // When district changes, fetch taluks
            districtSelect.addEventListener('change', function() {
                const districtId = this.value;
                // Clear any selected taluk value since district changed
                // (the server-side validation should ensure selected taluk belongs to district)
                fetchTaluks(districtId);
            });

            // On page load: if there is a selected district (edit or validation fail), preload taluks and select old taluk
            const initialDistrict = districtSelect.value;
            const initialTaluk = "{{ old('taluk_id', $office->taluk_id ?? '') }}";

            const initialOfficeType = document.querySelector('[name="office_type_id"]')?.value;

            if (initialDistrict && initialOfficeType !== '5' && initialOfficeType !== '6') {
                fetchTaluks(initialDistrict, initialTaluk);
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const officeType = document.querySelector('[name="office_type_id"]');
            const district = document.getElementById('district_id');
            const taluk = document.getElementById('taluk_id');

            if (!officeType || !district || !taluk) return;

            const FIXED_DISTRICT_ID = "{{ optional($tvpmDistrict)->id }}";
            const FIXED_TALUK_ID = "{{ optional($tvpmTaluk)->id }}";

            // Save original districts (for non HQ/RCS)
            const originalDistrictOptions = district.innerHTML;

            function lockToTVPM() {
                district.innerHTML = `
        <option value="${FIXED_DISTRICT_ID}" selected>
            Thiruvananthapuram
        </option>
    `;
                district.value = FIXED_DISTRICT_ID;
                district.classList.add('locked');

                taluk.innerHTML = `
        <option value="${FIXED_TALUK_ID}" selected>
            Thiruvananthapuram
        </option>
    `;
                taluk.value = FIXED_TALUK_ID;
                taluk.classList.add('locked');
            }

            function unlockAndRestore() {
                district.classList.remove('locked');
                taluk.classList.remove('locked');

                district.innerHTML = originalDistrictOptions;

                const currentDistrict = "{{ old('district_id', $office->district_id ?? '') }}";
                const currentTaluk = "{{ old('taluk_id', $office->taluk_id ?? '') }}";

                if (currentDistrict) {
                    district.value = currentDistrict;
                    fetchTaluks(currentDistrict, currentTaluk);
                } else {
                    taluk.innerHTML = '<option value="">Select Taluk</option>';
                }
            }



            officeType.addEventListener('change', function() {
                if (this.value === '5' || this.value === '6') {
                    lockToTVPM();
                } else {
                    unlockAndRestore();
                }
            });

            // PAGE LOAD LOGIC (THIS IS THE KEY PART)
            const initialOfficeType = officeType.value;

            if (initialOfficeType === '5' || initialOfficeType === '6') {
                lockToTVPM();
            }
        });
    </script>
@endpush