@extends('layouts.admin')

@section('title', 'Add Citizen')

@section('content')
<div class="card mb-4">
    <div class="card-header">
        <strong>Add New Citizen</strong>
    </div>
    <div class="card-body">
        <form action="{{ route('center.citizens.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row g-3">
                <div class="col-md-4"><label class="form-label">Full Name</label><input type="text" class="form-control" name="name" value="{{ old('name') }}" required></div>
                <div class="col-md-4"><label class="form-label">Email Address</label><input type="email" class="form-control" name="email" value="{{ old('email') }}" required></div>
                <div class="col-md-4"><label class="form-label">Mobile No.</label><input type="text" class="form-control" name="mobile_no" value="{{ old('mobile_no') }}" required></div>
                <div class="col-md-3"><label class="form-label">WhatsApp No.</label><input type="text" class="form-control" name="whatsapp_no" value="{{ old('whatsapp_no') }}"></div>
                <div class="col-md-3"><label class="form-label">DoB</label><input type="date" id="dob" class="form-control" name="dob" value="{{ old('dob') }}"></div>
                <div class="col-md-3"><label class="form-label">Age</label><input type="text" id="age" class="form-control" value="" readonly placeholder="Auto calculated"></div>
                <div class="col-md-3">
                    <label class="form-label">Community</label>
                    <select class="form-select" name="community">
                        <option value="">Select community</option>
                        @if(empty($communityOptions ?? []))
                            <option value="" disabled>No communities configured by Super Admin</option>
                        @endif
                        @foreach(($communityOptions ?? []) as $community)
                            <option value="{{ $community }}" {{ old('community') === $community ? 'selected' : '' }}>{{ $community }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6"><label class="form-label">Address Line 01</label><input type="text" class="form-control" name="address_line_1" value="{{ old('address_line_1') }}" required></div>
                <div class="col-md-6"><label class="form-label">Address Line 02</label><input type="text" class="form-control" name="address_line_2" value="{{ old('address_line_2') }}"></div>
                <div class="col-md-4">
                    <label class="form-label">State</label>
                    <select name="state" id="state" class="form-select" required>
                        <option value="">-- Select State --</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">City</label>
                    <select name="city" id="city" class="form-select" required>
                        <option value="">-- Select City --</option>
                    </select>
                </div>
                <div class="col-md-4"><label class="form-label">Pincode</label><input type="text" class="form-control" name="pincode" value="{{ old('pincode') }}" pattern="[0-9]{6}" maxlength="6" required></div>

                <div class="col-md-3"><label class="form-label">Aadhaar No.</label><input type="text" class="form-control" name="aadhaar_no" value="{{ old('aadhaar_no') }}"></div>
                <div class="col-md-3"><label class="form-label">Ration Card No.</label><input type="text" class="form-control" name="ration_card_no" value="{{ old('ration_card_no') }}"></div>
                <div class="col-md-3"><label class="form-label">Voter ID No.</label><input type="text" class="form-control" name="voter_id_no" value="{{ old('voter_id_no') }}"></div>
                <div class="col-md-3"><label class="form-label">Income Certificate No.</label><input type="text" class="form-control" name="income_certificate_no" value="{{ old('income_certificate_no') }}"></div>

                <div class="col-md-6"><label class="form-label">Aadhaar Doc</label><input type="file" class="form-control" name="aadhaar_doc"></div>
                <div class="col-md-6"><label class="form-label">Ration Card Doc</label><input type="file" class="form-control" name="ration_card_doc"></div>
                <div class="col-md-6"><label class="form-label">Voter ID Doc</label><input type="file" class="form-control" name="voter_id_doc"></div>
                <div class="col-md-6"><label class="form-label">Income Certificate Doc</label><input type="file" class="form-control" name="income_certificate_doc"></div>

                <div class="col-12">
                    <div class="d-flex gap-2 mt-1">
                        <button type="submit" class="btn btn-primary">Save Citizen</button>
                        <a href="{{ route('center.citizens.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const STATES_API = @json(route('meta.states'));
    const CITIES_API = @json(route('meta.cities'));

    function initStateCityDropdowns() {
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');
        if (!stateSelect || !citySelect) return;

        const selectedState = @json(old('state'));
        const selectedCity = @json(old('city'));
        function setFallbackSelectedOption(selectEl, value) {
            if (!value) return;
            const option = document.createElement('option');
            option.value = value;
            option.textContent = value;
            option.selected = true;
            selectEl.appendChild(option);
        }

        function populateStates(states) {
            stateSelect.innerHTML = '<option value="">-- Select State --</option>';
            states.forEach(state => {
                const option = document.createElement('option');
                option.value = state;
                option.textContent = state;
                if (selectedState && state.toLowerCase() === String(selectedState).toLowerCase()) option.selected = true;
                stateSelect.appendChild(option);
            });
            if (selectedState && !states.some(s => s.toLowerCase() === String(selectedState).toLowerCase())) {
                setFallbackSelectedOption(stateSelect, selectedState);
            }
        }

        function populateCities(cities, preferredCity = null) {
            citySelect.innerHTML = '<option value="">-- Select City --</option>';
            if (!Array.isArray(cities) || cities.length === 0) return;

            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                if (preferredCity && city.toLowerCase() === String(preferredCity).toLowerCase()) option.selected = true;
                citySelect.appendChild(option);
            });

            if (preferredCity && !cities.some(c => c.toLowerCase() === String(preferredCity).toLowerCase())) {
                setFallbackSelectedOption(citySelect, preferredCity);
            }
        }

        function fetchCities(stateValue, preferredCity = null) {
            if (!stateValue) {
                populateCities([], preferredCity);
                return Promise.resolve();
            }

            return fetch(CITIES_API + '?state=' + encodeURIComponent(stateValue))
                .then(res => res.json())
                .then(payload => {
                    const cities = Array.isArray(payload.data) ? payload.data : [];
                    populateCities(cities, preferredCity);
                });
        }

        stateSelect.addEventListener('change', function () {
            fetchCities(this.value).catch(() => {
                citySelect.innerHTML = '<option value="">-- Select City --</option>';
            });
        });

        fetch(STATES_API)
            .then(res => res.json())
            .then(payload => {
                const states = Array.isArray(payload.data) ? payload.data : [];
                populateStates(states);
                return fetchCities(stateSelect.value || selectedState, selectedCity);
            })
            .catch(() => {
                setFallbackSelectedOption(stateSelect, selectedState);
                setFallbackSelectedOption(citySelect, selectedCity);
            });
    }

    function updateAge() {
        const dobInput = document.getElementById('dob');
        const ageInput = document.getElementById('age');
        if (!dobInput || !ageInput || !dobInput.value) {
            if (ageInput) ageInput.value = '';
            return;
        }

        const dob = new Date(dobInput.value);
        const today = new Date();
        let age = today.getFullYear() - dob.getFullYear();
        const m = today.getMonth() - dob.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) {
            age--;
        }

        ageInput.value = age >= 0 ? age + ' years' : '';
    }

    document.addEventListener('DOMContentLoaded', function () {
        initStateCityDropdowns();
        const dobInput = document.getElementById('dob');
        if (dobInput) {
            dobInput.addEventListener('change', updateAge);
            updateAge();
        }
    });
</script>
@endsection