@extends('admin.layouts.app')

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

@section('content')
<div class="form-card" style="max-width:800px;">
    <form method="POST" action="{{ route('admin.admin.redemption-center.update', $redemptionCenter) }}">
        @csrf
        @method('PUT')

        <div class="row g-3">
            <div class="col-md-6">
                <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name"
                       value="{{ old('name', $redemptionCenter->name) }}" required>
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-3">
                <label for="longitude" class="form-label">Longitude</label>
                <input type="text" class="form-control @error('longitude') is-invalid @enderror" id="longitude" name="longitude"
                       value="{{ old('longitude', $redemptionCenter->longitude) }}">
                @error('longitude')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-3">
                <label for="latitude" class="form-label">Latitude</label>
                <input type="text" class="form-control @error('latitude') is-invalid @enderror" id="latitude" name="latitude"
                       value="{{ old('latitude', $redemptionCenter->latitude) }}">
                @error('latitude')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="region_id" class="form-label">Region</label>
                <select class="form-select" id="region_id" name="region_id">
                    <option value="">Select Region</option>
                    @foreach($regions as $region)
                        <option value="{{ $region->id }}" {{ old('region_id', $redemptionCenter->region_id) == $region->id ? 'selected' : '' }}>
                            {{ $region->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label for="state_id" class="form-label">State <span class="text-danger">*</span></label>
                <select class="form-select @error('state_id') is-invalid @enderror" id="state_id" name="state_id" required>
                    <option value="">Select State</option>
                    @foreach($states as $state)
                        <option value="{{ $state->id }}" {{ old('state_id', $redemptionCenter->state_id) == $state->id ? 'selected' : '' }}>
                            {{ $state->name }}
                        </option>
                    @endforeach
                </select>
                @error('state_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="lga_id" class="form-label">LGA <span class="text-danger">*</span></label>
                <select class="form-select @error('lga_id') is-invalid @enderror" id="lga_id" name="lga_id" required>
                    <option value="">Select LGA</option>
                    @foreach($lgas as $lga)
                        <option value="{{ $lga->id }}" {{ old('lga_id', $redemptionCenter->lga_id) == $lga->id ? 'selected' : '' }}>
                            {{ $lga->name }}
                        </option>
                    @endforeach
                </select>
                @error('lga_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-8">
                <label for="full_address" class="form-label">Full Address</label>
                <input type="text" class="form-control" id="full_address" name="full_address"
                       value="{{ old('full_address', $redemptionCenter->full_address) }}">
            </div>
            <div class="col-md-4">
                <label for="contact_phone" class="form-label">Contact Phone</label>
                <input type="text" class="form-control" id="contact_phone" name="contact_phone"
                       value="{{ old('contact_phone', $redemptionCenter->contact_phone) }}">
            </div>
        </div>

        <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn-submit">Update Redemption Center</button>
            <a href="{{ route('admin.admin.redemption-center.index') }}" class="btn-cancel">Cancel</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    const regionSelect = document.getElementById('region_id');
    const stateSelect = document.getElementById('state_id');
    const lgaSelect = document.getElementById('lga_id');

    regionSelect.addEventListener('change', function () {
        const regionId = this.value;
        stateSelect.innerHTML = '<option value="">Loading...</option>';
        lgaSelect.innerHTML = '<option value="">Select LGA</option>';

        if (!regionId) {
            stateSelect.innerHTML = '<option value="">Select State</option>';
            return;
        }

        fetch(`/admin/api/states-by-region/${regionId}`, {
            headers: { 'X-CSRF-TOKEN': window.csrfToken, 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(states => {
            stateSelect.innerHTML = '<option value="">Select State</option>';
            states.forEach(s => {
                stateSelect.innerHTML += `<option value="${s.id}">${s.name}</option>`;
            });
        });
    });

    stateSelect.addEventListener('change', function () {
        const stateId = this.value;
        lgaSelect.innerHTML = '<option value="">Loading...</option>';

        if (!stateId) {
            lgaSelect.innerHTML = '<option value="">Select LGA</option>';
            return;
        }

        fetch(`/admin/api/lgas-by-state/${stateId}`, {
            headers: { 'X-CSRF-TOKEN': window.csrfToken, 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(lgas => {
            lgaSelect.innerHTML = '<option value="">Select LGA</option>';
            lgas.forEach(l => {
                lgaSelect.innerHTML += `<option value="${l.id}">${l.name}</option>`;
            });
        });
    });
</script>
@endpush