@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <h1 class="page-title">Edit Center</h1>
    <p class="page-subtitle">Update center details and owner account — {{ $center->code }}.</p>
</div>

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="form-card-title">Modify Center</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.update', $center) }}" method="POST">
            @csrf
            @method('PUT')

            <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', $center->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', $center->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', $center->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', $center->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', $center->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 Details</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', $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', $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">Reset Password (Optional)</label>
                    <input type="password" name="owner_password" class="form-control @error('owner_password') is-invalid @enderror">
                    @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', $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', $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', optional($owner?->dob)->format('Y-m-d')) }}" 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', $owner?->address_line_1 ?: $owner?->full_address) }}" 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', $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', $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>

            <hr style="border:none;border-top:1px solid #f1f5f9;margin:1.5rem 0;">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-2 p-3 bg-light rounded mb-2">
                        <input type="checkbox" class="form-check-input" id="is_verified" name="is_verified" value="1" {{ old('is_verified', $center->is_verified) ? 'checked' : '' }}>
                        <div>
                            <label class="form-label mb-0" for="is_verified">Mark as Verified</label>
                            <div style="font-size:0.75rem;color:#94a3b8;">Center & Owner KYC approved</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-2 p-3 bg-light rounded mb-2">
                        <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ old('is_active', $center->is_active) ? 'checked' : '' }}>
                        <div>
                            <label class="form-label mb-0" for="is_active">Center Active</label>
                            <div style="font-size:0.75rem;color:#94a3b8;">Uncheck to disable this center</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary">Update 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', $owner?->state));
        const selectedCity = @json(old('owner_city', $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