<?php $__env->startSection('content'); ?>
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">Add trade fair</h4>
                <a href="<?php echo e(route('tradefairs.index')); ?>" class="btn btn-outline-secondary btn-sm">Back to listing</a>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="POST" action="<?php echo e(route('tradefairs.store')); ?>" class="row g-2" id="form_create_tradefair">
                        <?php echo csrf_field(); ?>
                        <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="<?php echo e(old('fair_name')); ?>">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Continent <span class="text-danger">*</span></label>
                            <select name="continent_id" id="add_continent_id" class="form-select" required>
                                <option value="">— Select —</option>
                                <?php $__currentLoopData = $continents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($c->id); ?>" <?php echo e((string) old('continent_id') === (string) $c->id ? 'selected' : ''); ?>><?php echo e($c->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country_id" id="add_country_id" class="form-select" required disabled>
                                <option value="">— Select continent first —</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">City (venue) <span class="text-danger">*</span></label>
                            <select name="city_id" id="add_city_id" class="form-select" required disabled>
                                <option value="">— Select country first —</option>
                            </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="<?php echo e(old('event_start_date')); ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">End Date</label>
                            <input type="date" name="event_end_date" class="form-control" value="<?php echo e(old('event_end_date')); ?>">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Fair Logo (URL or notes)</label>
                            <textarea name="fair_logo" class="form-control" rows="2"><?php echo e(old('fair_logo')); ?></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="1" <?php echo e(old('status', '1') === '1' ? 'selected' : ''); ?>>Active</option>
                                <option value="0" <?php echo e(old('status') === '0' ? 'selected' : ''); ?>>Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 d-flex gap-2 mt-2">
                            <button type="submit" class="btn btn-success">Save trade fair</button>
                            <a href="<?php echo e(route('tradefairs.index')); ?>" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
(function () {
    var countriesUrl = <?php echo json_encode(route('locations.countries-by-continent'), 15, 512) ?>;
    var citiesUrl = <?php echo json_encode(route('locations.cities-by-country'), 15, 512) ?>;

    function fillSelect(select, items, placeholder) {
        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;
            select.appendChild(o);
        });
    }

    function loadCountries(continentId, countrySel, citySel) {
        if (!continentId) {
            countrySel.disabled = true;
            fillSelect(countrySel, [], '— Select continent first —');
            citySel.disabled = true;
            fillSelect(citySel, [], '— Select country first —');
            return;
        }
        countrySel.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) {
            countrySel.disabled = false;
            fillSelect(countrySel, rows, '— Select country —');
            citySel.disabled = true;
            fillSelect(citySel, [], '— Select country first —');
        });
    }

    function loadCities(countryId, citySel) {
        if (!countryId) {
            citySel.disabled = true;
            fillSelect(citySel, [], '— Select country first —');
            return;
        }
        citySel.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) {
            citySel.disabled = false;
            fillSelect(citySel, rows, '— Select city —');
        });
    }

    var aCont = document.getElementById('add_continent_id');
    var aCoun = document.getElementById('add_country_id');
    var aCity = document.getElementById('add_city_id');
    if (aCont && aCoun && aCity) {
        aCont.addEventListener('change', function () {
            loadCountries(this.value, aCoun, aCity);
        });
        aCoun.addEventListener('change', function () {
            loadCities(this.value, aCity);
        });
        if (aCont.value) {
            loadCountries(aCont.value, aCoun, aCity);
        }
    }
})();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\laragon\www\lt\resources\views/tradefairs/create.blade.php ENDPATH**/ ?>