@extends('admin.layouts.app')

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

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

        <div id="centerRows">
            <div class="center-row mb-4 pb-4" data-row="0" style="border-bottom:1px solid #eee;">
                <h6 style="font-weight:600; color:#555; margin-bottom:15px;">Redemption Center #1</h6>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('centers.0.name') is-invalid @enderror"
                               name="centers[0][name]" value="{{ old('centers.0.name') }}" required placeholder="Center name">
                        @error('centers.0.name')
                            <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Longitude</label>
                        <input type="text" class="form-control" name="centers[0][longitude]" value="{{ old('centers.0.longitude') }}" placeholder="e.g. 3.3792">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Latitude</label>
                        <input type="text" class="form-control" name="centers[0][latitude]" value="{{ old('centers.0.latitude') }}" placeholder="e.g. 6.5244">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Region</label>
                        <select class="form-select region-select" name="centers[0][region_id]" data-row="0">
                            <option value="">Select Region</option>
                            @foreach($regions as $region)
                                <option value="{{ $region->id }}" {{ old('centers.0.region_id') == $region->id ? 'selected' : '' }}>
                                    {{ $region->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">State <span class="text-danger">*</span></label>
                        <select class="form-select state-select" name="centers[0][state_id]" data-row="0" required>
                            <option value="">Select State</option>
                        </select>
                        @error('centers.0.state_id')
                            <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">LGA <span class="text-danger">*</span></label>
                        <select class="form-select lga-select" name="centers[0][lga_id]" data-row="0" required>
                            <option value="">Select LGA</option>
                        </select>
                        @error('centers.0.lga_id')
                            <div style="color:#c62828; font-size:12px; margin-top:4px;">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Full Address</label>
                        <input type="text" class="form-control" name="centers[0][full_address]" value="{{ old('centers.0.full_address') }}" placeholder="Full address">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Contact Phone</label>
                        <input type="text" class="form-control" name="centers[0][contact_phone]" value="{{ old('centers.0.contact_phone') }}" placeholder="Phone number">
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <button type="button" class="btn-add-row" onclick="addCenterRow()">
                <i class="bi bi-plus-circle"></i> + add new Redemption Center
            </button>
        </div>

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

@push('scripts')
<script>
    let centerRowCount = 1;
    const regions = @json($regions);

    function addCenterRow() {
        const container = document.getElementById('centerRows');
        const row = document.createElement('div');
        row.className = 'center-row mb-4 pb-4';
        row.dataset.row = centerRowCount;
        row.style.borderBottom = '1px solid #eee';

        let regionOptions = '<option value="">Select Region</option>';
        regions.forEach(r => {
            regionOptions += `<option value="${r.id}">${r.name}</option>`;
        });

        row.innerHTML = `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 style="font-weight:600; color:#555; margin:0;">Redemption Center #${centerRowCount + 1}</h6>
                <button type="button" class="btn-remove-row" onclick="removeCenterRow(this)" style="position:static; transform:none;">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="centers[${centerRowCount}][name]" required placeholder="Center name">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Longitude</label>
                    <input type="text" class="form-control" name="centers[${centerRowCount}][longitude]" placeholder="e.g. 3.3792">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Latitude</label>
                    <input type="text" class="form-control" name="centers[${centerRowCount}][latitude]" placeholder="e.g. 6.5244">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Region</label>
                    <select class="form-select region-select" name="centers[${centerRowCount}][region_id]" data-row="${centerRowCount}">
                        ${regionOptions}
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">State <span class="text-danger">*</span></label>
                    <select class="form-select state-select" name="centers[${centerRowCount}][state_id]" data-row="${centerRowCount}" required>
                        <option value="">Select State</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">LGA <span class="text-danger">*</span></label>
                    <select class="form-select lga-select" name="centers[${centerRowCount}][lga_id]" data-row="${centerRowCount}" required>
                        <option value="">Select LGA</option>
                    </select>
                </div>
                <div class="col-md-8">
                    <label class="form-label">Full Address</label>
                    <input type="text" class="form-control" name="centers[${centerRowCount}][full_address]" placeholder="Full address">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Contact Phone</label>
                    <input type="text" class="form-control" name="centers[${centerRowCount}][contact_phone]" placeholder="Phone number">
                </div>
            </div>
        `;
        container.appendChild(row);
        attachDropdownListeners(row);
        centerRowCount++;
    }

    function removeCenterRow(btn) {
        btn.closest('.center-row').remove();
    }

    // Dependent dropdown logic
    function attachDropdownListeners(container) {
        const regionSelect = container.querySelector('.region-select');
        const stateSelect = container.querySelector('.state-select');
        const lgaSelect = container.querySelector('.lga-select');

        if (regionSelect) {
            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>`;
                    });
                });
            });
        }

        if (stateSelect) {
            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>`;
                    });
                });
            });
        }
    }

    // Attach listeners to the first row
    document.querySelectorAll('.center-row').forEach(row => attachDropdownListeners(row));
</script>
@endpush