@extends('layouts.app')

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">Edit Trade Fair</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('tradefairs.update', $tradefair) }}" class="row g-2" id="form_edit_tradefair">
                        @csrf
                        @method('PUT')
                        <div class="col-12">
                            <label class="form-label">Fair Name <span class="text-danger">*</span></label>
                            <input name="fair_name" class="form-control" required maxlength="120" value="{{ old('fair_name', $tradefair->fair_name) }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Continent <span class="text-danger">*</span></label>
                            <select name="continent_id" id="edit_continent_id" class="form-select" required>
                                <option value="">— Select —</option>
                                @foreach($continents as $c)
                                    <option value="{{ $c->id }}" {{ (string) old('continent_id', $selectedContinentId) === (string) $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country_id" id="edit_country_id" class="form-select" required>
                                @foreach($countries as $c)
                                    <option value="{{ $c->id }}" {{ (string) old('country_id', $selectedCountryId) === (string) $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">City (venue) <span class="text-danger">*</span></label>
                            <select name="city_id" id="edit_city_id" class="form-select" required>
                                @foreach($cities as $ct)
                                    <option value="{{ $ct->id }}" {{ (string) old('city_id', $selectedCityId) === (string) $ct->id ? 'selected' : '' }}>{{ $ct->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Start Date</label>
                            <input type="date" name="event_start_date" class="form-control" value="{{ old('event_start_date', optional($tradefair->event_start_date)->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date</label>
                            <input type="date" name="event_end_date" class="form-control" value="{{ old('event_end_date', optional($tradefair->event_end_date)->format('Y-m-d')) }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Fair Logo (URL or notes)</label>
                            <textarea name="fair_logo" class="form-control" rows="2">{{ old('fair_logo', $tradefair->fair_logo) }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="1" {{ old('status', $tradefair->status ?? '1') === '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status', $tradefair->status) === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 d-flex gap-2 mt-2">
                            <button class="btn btn-primary">Update</button>
                            <a href="{{ route('tradefairs.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function () {
    var countriesUrl = @json(route('locations.countries-by-continent'));
    var citiesUrl = @json(route('locations.cities-by-country'));

    function fillSelect(select, items, placeholder, selectedId) {
        select.innerHTML = '';
        var p = document.createElement('option');
        p.value = '';
        p.textContent = placeholder;
        select.appendChild(p);
        (items || []).forEach(function (row) {
            var o = document.createElement('option');
            o.value = row.id;
            o.textContent = row.name;
            if (selectedId != null && String(row.id) === String(selectedId)) o.selected = true;
            select.appendChild(o);
        });
    }

    function loadCountries(continentId, target, citySelect, preselectCountry, preselectCity) {
        if (!continentId) {
            target.disabled = true;
            fillSelect(target, [], '— Select continent —', null);
            if (citySelect) {
                citySelect.disabled = true;
                fillSelect(citySelect, [], '— Select country —', null);
            }
            return;
        }
        target.disabled = true;
        fetch(countriesUrl + '?continent_id=' + encodeURIComponent(continentId), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (r) { return r.json(); }).then(function (rows) {
            target.disabled = false;
            fillSelect(target, rows, '— Select country —', preselectCountry);
            if (citySelect) {
                var cid = preselectCountry != null ? preselectCountry : target.value;
                if (cid) loadCities(cid, citySelect, preselectCity);
                else {
                    citySelect.disabled = true;
                    fillSelect(citySelect, [], '— Select country —', null);
                }
            }
        });
    }

    function loadCities(countryId, target, preselectCity) {
        if (!countryId) {
            target.disabled = true;
            fillSelect(target, [], '— Select country —', null);
            return;
        }
        target.disabled = true;
        fetch(citiesUrl + '?country_id=' + encodeURIComponent(countryId), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (r) { return r.json(); }).then(function (rows) {
            target.disabled = false;
            fillSelect(target, rows, '— Select city —', preselectCity);
        });
    }

    var eCont = document.getElementById('edit_continent_id');
    var eCoun = document.getElementById('edit_country_id');
    var eCity = document.getElementById('edit_city_id');
    if (eCont && eCoun && eCity) {
        eCont.addEventListener('change', function () {
            loadCountries(this.value, eCoun, eCity, null, null);
        });
        eCoun.addEventListener('change', function () {
            loadCities(this.value, eCity, null);
        });
    }
})();
</script>
@endpush
