@extends('layouts.admin')

@section('title', 'Cities')

@section('content')
<div class="admin-page-header d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div>
        <h1>All Cities</h1>
        <p class="admin-page-subtitle mb-0">View and filter cities with state and country context.</p>
    </div>
    <button type="button" class="admin-btn-primary" data-bs-toggle="modal" data-bs-target="#addCityModal">
        <i class="bi bi-plus-lg"></i> Add City
    </button>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="admin-card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="admin-form-label">Search</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" value="{{ $search }}" class="admin-form-control form-control" placeholder="Type city name">
                </div>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Country</label>
                <select name="country_id" class="admin-form-control form-select" onchange="this.form.submit()">
                    <option value="">Select country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ (string)$countryId === (string)$country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">State</label>
                <select name="state_id" class="admin-form-control form-select">
                    <option value="">Select state</option>
                    @foreach($states as $state)
                        <option value="{{ $state->id }}" {{ (string)$stateId === (string)$state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <option value="">All status</option>
                    <option value="1" {{ $status === '1' ? 'selected' : '' }}>Show</option>
                    <option value="0" {{ $status === '0' ? 'selected' : '' }}>Hidden</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Source</label>
                <select name="source" class="admin-form-control form-select">
                    <option value="">All sources</option>
                    <option value="seed" {{ ($source ?? '') === 'seed' ? 'selected' : '' }}>Seeded</option>
                    <option value="customer" {{ ($source ?? '') === 'customer' ? 'selected' : '' }}>Customer added</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="admin-btn-primary w-100" style="margin-top: 28px;">
                    <i class="bi bi-filter"></i> Filter
                </button>
            </div>
            <div class="col-md-1">
                <a href="{{ route('admin.settings.shipping.cities') }}" class="btn btn-outline-secondary w-100" style="margin-top: 28px;">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:80px;">#</th>
                        <th>Name</th>
                        <th style="width:140px;">Source</th>
                        <th>State</th>
                        <th>Country</th>
                        <th style="width:180px;">Area Wise Shipping Cost</th>
                        <th style="width:140px;">Show/Hide</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cities as $city)
                        <tr>
                            <td>{{ $city->id }}</td>
                            <td class="fw-semibold">{{ $city->name }}</td>
                            <td>
                                @if(($city->source ?? 'seed') === 'customer')
                                    <span class="badge bg-info text-dark">Customer</span>
                                @else
                                    <span class="badge bg-secondary">Seeded</span>
                                @endif
                            </td>
                            <td>{{ $city->state->name ?? '—' }}</td>
                            <td>{{ $city->country->name ?? '—' }}</td>
                            <td>₹{{ number_format($city->cost ?? 0, 2) }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.settings.shipping.cities.status', $city) }}" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $city->status ? 0 : 1 }}">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" {{ $city->status ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label text-muted small">{{ $city->status ? 'Visible' : 'Hidden' }}</label>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-building"></i>
                                    <h3>No Cities Found</h3>
                                    <p>No cities match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination - Right Aligned -->
        @if($cities->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $cities->firstItem() ?? 0 }}</strong>–<strong>{{ $cities->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $cities->total() }}</strong> cities
                </div>
                <div class="pagination-controls">
                    {{ $cities->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<div class="modal fade mt-5" id="addCityModal" tabindex="-1" aria-labelledby="addCityModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('admin.settings.shipping.cities.store') }}" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="addCityModalLabel">Add New City</h5>
                <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal" aria-label="Close"><i class="bi-x-lg"></i></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">New cities appear in checkout and customer address forms for the selected state.</p>
                <div class="mb-3">
                    <label class="admin-form-label">Country *</label>
                    <select name="country_id" id="addCityCountry" class="admin-form-control form-select no-select2" required>
                        <option value="">Select country</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}" {{ (string) old('country_id', $countryId) === (string) $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="admin-form-label">State *</label>
                    <select name="state_id" id="addCityState" class="admin-form-control form-select no-select2" required disabled>
                        <option value="">Select state</option>
                        @foreach($states as $state)
                            <option value="{{ $state->id }}" {{ (string) old('state_id', $stateId) === (string) $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="admin-form-label">City name *</label>
                    <input type="text" name="name" class="admin-form-control form-control" value="{{ old('name') }}" maxlength="191" required placeholder="e.g. Whitefield">
                </div>
                <div class="mb-3">
                    <label class="admin-form-label">Area wise shipping cost (₹)</label>
                    <input type="number" name="cost" class="admin-form-control form-control" value="{{ old('cost', '0') }}" min="0" step="0.01" placeholder="0.00">
                </div>
                <div class="form-check">
                    <input type="hidden" name="status" value="0">
                    <input type="checkbox" name="status" value="1" class="form-check-input" id="addCityVisible" {{ old('status', '1') ? 'checked' : '' }}>
                    <label class="form-check-label" for="addCityVisible">Visible in address dropdowns</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="admin-btn-primary">Save City</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const shippingApiBase = @json(url('/api/shipping'));
    const countrySelect = document.getElementById('addCityCountry');
    const stateSelect = document.getElementById('addCityState');
    const modalEl = document.getElementById('addCityModal');
    const presetStateId = @json(old('state_id', $stateId));

    if (!countrySelect || !stateSelect) {
        return;
    }

    function setStateSelectEnabled(enabled) {
        stateSelect.disabled = !enabled;
    }

    async function loadStatesForCountry(countryId, selectedStateId = '') {
        if (!countryId) {
            stateSelect.innerHTML = '<option value="">Select state</option>';
            setStateSelectEnabled(false);
            return;
        }

        stateSelect.innerHTML = '<option value="">Loading states...</option>';
        setStateSelectEnabled(false);

        try {
            const response = await fetch(`${shippingApiBase}/states?country_id=${encodeURIComponent(countryId)}`, {
                headers: { Accept: 'application/json' },
            });
            if (!response.ok) {
                throw new Error('Failed to load states');
            }
            const payload = await response.json();
            const states = payload.data || [];
            const options = ['<option value="">Select state</option>'];
            states.forEach((state) => {
                const selected = selectedStateId && String(selectedStateId) === String(state.id) ? ' selected' : '';
                options.push(`<option value="${state.id}"${selected}>${state.name}</option>`);
            });
            stateSelect.innerHTML = options.join('');
            setStateSelectEnabled(states.length > 0);
            if (selectedStateId && states.length > 0) {
                stateSelect.value = String(selectedStateId);
            }
        } catch (error) {
            console.error('Add city: failed to load states', error);
            stateSelect.innerHTML = '<option value="">Failed to load states</option>';
            setStateSelectEnabled(false);
        }
    }

    function onCountryChange() {
        loadStatesForCountry(countrySelect.value);
    }

    countrySelect.addEventListener('change', onCountryChange);

    if (typeof jQuery !== 'undefined') {
        jQuery(countrySelect).on('change', onCountryChange);
    }

    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function () {
            if (countrySelect.value) {
                loadStatesForCountry(countrySelect.value, presetStateId || '');
            } else {
                stateSelect.innerHTML = '<option value="">Select state</option>';
                setStateSelectEnabled(false);
            }
        });
    }

    if (countrySelect.value) {
        loadStatesForCountry(countrySelect.value, presetStateId);
    }

    if (modalEl && @json($errors->any())) {
        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();
    }
});
</script>
@endpush