@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <h1 class="page-title">Add Center</h1>
    <p class="page-subtitle">Register a new government service center and its owner account.</p>
</div>

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="form-card-title">Center Details</span>
        <a href="{{ route('admin.centers.index') }}" class="btn btn-light">← Back to Centers</a>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.centers.store') }}" method="POST">
            @csrf

            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#64748b;margin-bottom:1rem;">Center Details</div>
            <div class="row g-3">
                <div class="col-md-4">
                    <label for="code" class="form-label">Center Code</label>
                    <input type="text" class="form-control @error('code') is-invalid @enderror" id="code" name="code" value="{{ old('code') }}" required>
                    @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label for="location" class="form-label">Location</label>
                    <input type="text" class="form-control @error('location') is-invalid @enderror" id="location" name="location" value="{{ old('location') }}" required>
                    @error('location')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label for="email" class="form-label">Mail ID</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label for="mobile_no" class="form-label">Mobile No.</label>
                    <input type="text" class="form-control @error('mobile_no') is-invalid @enderror" id="mobile_no" name="mobile_no" value="{{ old('mobile_no') }}" required>
                    @error('mobile_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label for="full_address" class="form-label">Full Address</label>
                    <input type="text" class="form-control @error('full_address') is-invalid @enderror" id="full_address" name="full_address" value="{{ old('full_address') }}" required>
                    @error('full_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <hr style="border:none;border-top:1px solid #f1f5f9;margin:1.5rem 0;">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#64748b;margin-bottom:1rem;">Center Owner Login & Profile</div>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Name</label>
                    <input type="text" name="owner_name" value="{{ old('owner_name') }}" class="form-control @error('owner_name') is-invalid @enderror" required>
                    @error('owner_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Mail ID</label>
                    <input type="email" name="owner_email" value="{{ old('owner_email') }}" class="form-control @error('owner_email') is-invalid @enderror" required>
                    @error('owner_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Password</label>
                    <input type="password" name="owner_password" class="form-control @error('owner_password') is-invalid @enderror" required>
                    @error('owner_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Mobile No.</label>
                    <input type="text" name="owner_mobile_no" value="{{ old('owner_mobile_no') }}" class="form-control @error('owner_mobile_no') is-invalid @enderror" required>
                    @error('owner_mobile_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">WhatsApp No.</label>
                    <input type="text" name="owner_whatsapp_no" value="{{ old('owner_whatsapp_no') }}" class="form-control @error('owner_whatsapp_no') is-invalid @enderror">
                    @error('owner_whatsapp_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">DoB</label>
                    <input type="date" name="owner_dob" value="{{ old('owner_dob') }}" class="form-control @error('owner_dob') is-invalid @enderror">
                    @error('owner_dob')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Address Line 01</label>
                    <input type="text" name="owner_address_line_1" value="{{ old('owner_address_line_1') }}" class="form-control @error('owner_address_line_1') is-invalid @enderror" required>
                    @error('owner_address_line_1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Address Line 02</label>
                    <input type="text" name="owner_address_line_2" value="{{ old('owner_address_line_2') }}" class="form-control @error('owner_address_line_2') is-invalid @enderror">
                    @error('owner_address_line_2')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">State</label>
                    <select name="owner_state" id="owner_state" class="form-select @error('owner_state') is-invalid @enderror" required>
                        <option value="">-- Select State --</option>
                    </select>
                    @error('owner_state')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">City</label>
                    <select name="owner_city" id="owner_city" class="form-select @error('owner_city') is-invalid @enderror" required>
                        <option value="">-- Select City --</option>
                    </select>
                    @error('owner_city')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Pincode</label>
                    <input type="text" name="owner_pincode" value="{{ old('owner_pincode') }}" class="form-control @error('owner_pincode') is-invalid @enderror" pattern="[0-9]{6}" maxlength="6" required>
                    @error('owner_pincode')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary">Create Center</button>
                <a href="{{ route('admin.centers.index') }}" class="btn btn-light">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    (function () {
        const STATES_API = @json(route('meta.states'));
        const CITIES_API = @json(route('meta.cities'));
        const stateSelect = document.getElementById('owner_state');
        const citySelect = document.getElementById('owner_city');
        if (!stateSelect || !citySelect) return;

        const selectedState = @json(old('owner_state'));
        const selectedCity = @json(old('owner_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);
            });
    })();
</script>
@endsection