<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><i class="fas fa-calendar-plus me-2"></i><?= lang('facilities.create_booking') ?></h5></div>
            <div class="card-body">
                <form method="POST" action="/bookings" data-ajax="true">
                    <?= csrf_field() ?>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Member <span class="text-danger">*</span></label>
                            <select name="member_id" class="form-select select2" id="member-search" required data-placeholder="Search member..."></select>
                            <div class="invalid-feedback" data-field="member_id"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Facility <span class="text-danger">*</span></label>
                            <select name="facility_id" class="form-select" id="facility-select" required>
                                <option value="">Select facility...</option>
                                <?php foreach ($facilities as $f): ?>
                                <option value="<?= $f['id'] ?>" data-fee="<?= $f['booking_fee_members'] ?>" data-min="<?= $f['min_booking_minutes'] ?>" data-max="<?= $f['max_booking_minutes'] ?>" data-advance="<?= $f['advance_booking_days'] ?>">
                                    <?= e($f['name_en']) ?> (<?= e($f['facility_code']) ?>)
                                </option>
                                <?php endforeach; ?>
                            </select>
                            <div class="invalid-feedback" data-field="facility_id"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Date <span class="text-danger">*</span></label>
                            <input type="date" name="booking_date" class="form-control" id="booking-date" required min="<?= date('Y-m-d') ?>">
                            <div class="invalid-feedback" data-field="booking_date"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Start Time <span class="text-danger">*</span></label>
                            <input type="time" name="start_time" class="form-control" id="start-time" required step="900">
                            <div class="invalid-feedback" data-field="start_time"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End Time <span class="text-danger">*</span></label>
                            <input type="time" name="end_time" class="form-control" id="end-time" required step="900">
                            <div class="invalid-feedback" data-field="end_time"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Booking Type</label>
                            <select name="booking_type" class="form-select">
                                <option value="regular">Regular</option>
                                <option value="training">Training</option>
                                <option value="tournament">Tournament</option>
                                <option value="event">Event</option>
                                <option value="private">Private</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Estimated Fee</label>
                            <input type="text" class="form-control" id="estimated-fee" readonly value="-">
                        </div>
                        <div class="col-12" id="availability-result" style="display:none"></div>
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="mt-4 d-flex gap-2">
                        <button type="button" class="btn btn-outline-info" id="check-availability-btn"><i class="fas fa-search me-1"></i>Check Availability</button>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
                        <a href="/bookings" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('#member-search').select2({
        theme: 'bootstrap-5', width: '100%', minimumInputLength: 2,
        ajax: {
            url: '/api/members/search',
            dataType: 'json', delay: 300,
            data: function(params) { return { q: params.term }; },
            processResults: function(data) { return { results: data.map(m => ({ id: m.id, text: m.membership_number + ' - ' + m.text })) }; }
        }
    });

    function calcFee() {
        const opt = document.querySelector('#facility-select option:checked');
        const fee = parseFloat(opt?.dataset?.fee || 0);
        const s = document.getElementById('start-time').value;
        const e = document.getElementById('end-time').value;
        if (s && e && fee) {
            const mins = (new Date('2000-01-01T' + e) - new Date('2000-01-01T' + s)) / 60000;
            if (mins > 0) { document.getElementById('estimated-fee').value = (fee * (mins / 60)).toFixed(2) + ' EGP'; }
        }
    }
    document.getElementById('start-time').addEventListener('change', calcFee);
    document.getElementById('end-time').addEventListener('change', calcFee);
    document.getElementById('facility-select').addEventListener('change', calcFee);

    document.getElementById('check-availability-btn').addEventListener('click', function() {
        const fac = document.getElementById('facility-select').value;
        const dt = document.getElementById('booking-date').value;
        const st = document.getElementById('start-time').value;
        const et = document.getElementById('end-time').value;
        if (!fac || !dt || !st || !et) { FormHelper.showToast('warning', 'Fill in facility, date, and time first'); return; }
        $.get('/api/bookings/availability', { facility_id: fac, date: dt, start_time: st, end_time: et }, function(res) {
            const el = document.getElementById('availability-result');
            el.style.display = 'block';
            el.innerHTML = res.available
                ? '<div class="alert alert-success mb-0"><i class="fas fa-check-circle me-1"></i> Slot is available!</div>'
                : '<div class="alert alert-danger mb-0"><i class="fas fa-times-circle me-1"></i> Slot is NOT available (' + res.conflict_count + ' conflicts)</div>';
        });
    });
});
</script>
<?php $__view->endPush() ?>