<ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-zones">Zones</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-permits">Permits</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-log">Parking Log</a></li>
</ul>

<div class="tab-content">
    <!-- Zones Tab -->
    <div class="tab-pane fade show active" id="tab-zones">
        <div class="row g-3">
            <?php foreach ($zones as $z): ?>
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <i class="fas fa-parking fa-2x text-primary mb-2"></i>
                        <h5><?= e($z['name_en']) ?> <small class="text-muted">(<?= e($z['zone_code']) ?>)</small></h5>
                        <div class="row g-1 mt-2">
                            <div class="col-4"><div class="border rounded p-2"><strong><?= $z['total_spots'] ?></strong><br><small class="text-muted">Total</small></div></div>
                            <div class="col-4"><div class="border rounded p-2"><strong><?= $z['reserved_spots'] ?></strong><br><small class="text-muted">Reserved</small></div></div>
                            <div class="col-4"><div class="border rounded p-2"><strong><?= $z['vip_spots'] ?></strong><br><small class="text-muted">VIP</small></div></div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- Permits Tab -->
    <div class="tab-pane fade" id="tab-permits">
        <?php if (auth_can('facilities.manage')): ?>
        <div class="mb-3 text-end"><button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#permitModal"><i class="fas fa-plus me-1"></i>Issue Permit</button></div>
        <?php endif; ?>
        <div class="card"><div class="card-body">
            <table id="permits-table" class="table table-striped w-100"
                   data-url="/api/facilities/parking/permits"
                   data-columns='<?= json_encode([
                       ["data"=>"id","title"=>"#","width"=>"50px"],
                       ["data"=>"number","title"=>"Permit #"],
                       ["data"=>"member","title"=>"Member"],
                       ["data"=>"plate","title"=>"Plate"],
                       ["data"=>"vehicle","title"=>"Vehicle"],
                       ["data"=>"zone","title"=>"Zone"],
                       ["data"=>"type","title"=>"Type"],
                       ["data"=>"dates","title"=>"Validity"],
                       ["data"=>"status","title"=>"Status"],
                   ]) ?>'>
                <thead><tr><th>#</th><th>Permit #</th><th>Member</th><th>Plate</th><th>Vehicle</th><th>Zone</th><th>Type</th><th>Validity</th><th>Status</th></tr></thead>
            </table>
        </div></div>
    </div>

    <!-- Log Tab -->
    <div class="tab-pane fade" id="tab-log">
        <div class="mb-3"><label class="form-label">Date</label><input type="date" id="log-date" class="form-control" style="max-width:200px" value="<?= date('Y-m-d') ?>"></div>
        <div class="card"><div class="card-body">
            <table id="parking-log-table" class="table table-striped w-100"
                   data-url="/api/facilities/parking/log"
                   data-columns='<?= json_encode([
                       ["data"=>"id","title"=>"#","width"=>"50px"],
                       ["data"=>"time","title"=>"Time"],
                       ["data"=>"direction","title"=>"Direction"],
                       ["data"=>"plate","title"=>"Plate"],
                       ["data"=>"member","title"=>"Member"],
                       ["data"=>"zone","title"=>"Zone"],
                       ["data"=>"authorized","title"=>"Auth","className"=>"text-center"],
                   ]) ?>'>
                <thead><tr><th>#</th><th>Time</th><th>Direction</th><th>Plate</th><th>Member</th><th>Zone</th><th>Auth</th></tr></thead>
            </table>
        </div></div>
    </div>
</div>

<!-- Issue Permit Modal -->
<div class="modal fade" id="permitModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">Issue Parking Permit</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form method="POST" action="/facilities/parking/permits" 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" data-placeholder="Search member..." required></select></div>
                <div class="col-md-6"><label class="form-label">Zone</label><select name="zone_id" class="form-select"><option value="">Any</option><?php foreach ($zones as $z): ?><option value="<?= $z['id'] ?>"><?= e($z['name_en']) ?></option><?php endforeach; ?></select></div>
                <div class="col-md-4"><label class="form-label">Vehicle Plate <span class="text-danger">*</span></label><input type="text" name="vehicle_plate" class="form-control" required></div>
                <div class="col-md-4"><label class="form-label">Make</label><input type="text" name="vehicle_make" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Model</label><input type="text" name="vehicle_model" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Color</label><input type="text" name="vehicle_color" class="form-control"></div>
                <div class="col-md-4"><label class="form-label">Permit Type <span class="text-danger">*</span></label><select name="permit_type" class="form-select" required><option value="annual">Annual</option><option value="seasonal">Seasonal</option><option value="monthly">Monthly</option><option value="daily">Daily</option><option value="vip">VIP</option><option value="disabled">Disabled</option></select></div>
                <div class="col-md-4"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="date" name="start_date" class="form-control" value="<?= date('Y-m-d') ?>" required></div>
                <div class="col-md-4"><label class="form-label">End Date</label><input type="date" name="end_date" class="form-control"></div>
            </div>
            <div class="mt-3"><button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Issue Permit</button></div>
        </form>
    </div>
</div></div></div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('permits-table');

    var logTable = DataTableHelper.init('parking-log-table', {
        ajax: {
            url: '/api/facilities/parking/log',
            data: function(d) { d.date = document.getElementById('log-date').value; return d; }
        }
    });

    document.getElementById('log-date').addEventListener('change', function() { DataTableHelper.reload('parking-log-table'); });

    $('#permitModal select.select2').select2({
        theme: 'bootstrap-5', width: '100%', dropdownParent: $('#permitModal'), minimumInputLength: 2,
        ajax: { url: '/api/members/search', dataType: 'json', delay: 300, data: function(p) { return { q: p.term }; }, processResults: function(d) { return { results: d.map(m => ({ id: m.id, text: m.membership_number + ' - ' + m.text })) }; } }
    });
});
</script>
<?php $__view->endPush() ?>