<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-primary h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1"><?= lang('facilities.today_bookings') ?></h6><h3 class="mb-0"><?= $todayCount ?></h3></div>
            <div class="align-self-center"><i class="fas fa-calendar-day fa-2x text-primary opacity-50"></i></div></div>
        </div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-warning h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1"><?= lang('facilities.pending_bookings') ?></h6><h3 class="mb-0"><?= $pendingCount ?></h3></div>
            <div class="align-self-center"><i class="fas fa-clock fa-2x text-warning opacity-50"></i></div></div>
        </div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-success h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1"><?= lang('facilities.confirmed_bookings') ?></h6><h3 class="mb-0"><?= $confirmedCount ?></h3></div>
            <div class="align-self-center"><i class="fas fa-check-circle fa-2x text-success opacity-50"></i></div></div>
        </div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" id="booking-filters" data-filter-table="bookings-table">
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('common.status') ?></label>
                <select name="status" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="pending">Pending</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="checked_in">Checked In</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="no_show">No Show</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('facilities.facility') ?></label>
                <select name="facility_id" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <?php foreach ($facilities as $f): ?>
                    <option value="<?= $f['id'] ?>"><?= e($f['name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm">From</label>
                <input type="date" name="date_from" class="form-control form-control-sm">
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm">To</label>
                <input type="date" name="date_to" class="form-control form-control-sm">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="DataTableHelper.reload('bookings-table')"><?= lang('common.filter') ?></button>
            </div>
            <?php if (auth_can('bookings.create')): ?>
            <div class="col-md-2 text-end">
                <a href="/bookings/create" class="btn btn-sm btn-primary"><i class="fas fa-plus me-1"></i><?= lang('facilities.create_booking') ?></a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="bookings-table" class="table table-striped table-hover w-100"
               data-url="/api/bookings/list"
               data-columns='<?= json_encode([
                   ["data"=>"id","title"=>"#","width"=>"50px"],
                   ["data"=>"number","title"=>"Booking #"],
                   ["data"=>"facility","title"=>"Facility"],
                   ["data"=>"member","title"=>"Member"],
                   ["data"=>"date","title"=>"Date"],
                   ["data"=>"time","title"=>"Time"],
                   ["data"=>"fee","title"=>"Fee"],
                   ["data"=>"status","title"=>"Status"],
                   ["data"=>"actions","title"=>"Actions","orderable"=>false,"searchable"=>false],
               ]) ?>'>
            <thead><tr><th>#</th><th>Booking #</th><th>Facility</th><th>Member</th><th>Date</th><th>Time</th><th>Fee</th><th>Status</th><th>Actions</th></tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('bookings-table', { order: [[0, 'desc']] });

    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.btn-status');
        if (!btn) return;
        const bookingId = btn.dataset.id;
        const newStatus = btn.dataset.status;
        const needsReason = newStatus === 'cancelled';

        if (needsReason) {
            Swal.fire({
                title: 'Cancel Booking',
                input: 'textarea',
                inputLabel: 'Reason for cancellation',
                showCancelButton: true,
                confirmButtonText: 'Confirm Cancel',
                confirmButtonColor: '#dc3545',
            }).then((result) => {
                if (result.isConfirmed) {
                    updateBookingStatus(bookingId, newStatus, result.value || '');
                }
            });
        } else {
            Swal.fire({
                title: 'Confirm',
                text: 'Change booking status to ' + newStatus + '?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
            }).then((result) => {
                if (result.isConfirmed) {
                    updateBookingStatus(bookingId, newStatus, '');
                }
            });
        }
    });

    function updateBookingStatus(id, status, reason) {
        const formData = new FormData();
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        formData.append('status', status);
        formData.append('reason', reason);

        $.ajax({
            url: '/bookings/' + id + '/status',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.success) {
                    FormHelper.showToast('success', res.message);
                    DataTableHelper.reload('bookings-table');
                } else {
                    FormHelper.showToast('error', res.message);
                }
            }
        });
    }
});
</script>
<?php $__view->endPush() ?>