<?php
require_once __DIR__ . '/config/auth.php';
require_login();

$pageTitle = 'Visitor Passes';
$activePage = 'visitors';

$pageScripts = [
<<<'HTML'
<script>
window.crudConfig = {
    api: 'api/visitors.php',
    tableBody: '#visitorTableBody',
    form: '#visitorForm',
    modal: '#visitorModal',
    modalTitle: '#visitorModalTitle',
    addButton: '#addVisitorBtn',
    alertBox: '#ajaxAlert',

    emptyMessage: 'No visitor passes found.',

   fields: [
    'id',
    'transaction_ref',
    'visitor_name',
    'visit_date',
    'time_in',
    'time_out',
    'person_to_visit',
    'section_name',
    'purpose',
    'other_purpose',
    'date_submitted',
    'status'
],

    columns: [
        { key: 'transaction_ref' },
        { key: 'visitor_name', format: 'title' },
        { key: 'visit_date' },
        { key: 'time_in' },
        { key: 'time_out' },
        { key: 'person_to_visit' },
        { key: 'section_name' },
        { key: 'purpose' },
        { key: 'status', badge: true }
    ]
};
</script>
HTML,
'<script src="assets/js/crud.js"></script>',
];

include __DIR__ . '/includes/header.php';
?>

<section class="content-panel">

    <div class="panel-heading">
        <div>
            <h2>Visitor's Pass Slip</h2>
            <p>Manage visitor gate pass requests.</p>
        </div>

        <button class="btn btn-primary" type="button" id="addVisitorBtn">
            <i class="bi bi-plus-lg"></i>
            Add Visitor Pass
        </button>
    </div>

    <div id="ajaxAlert" class="alert d-none" role="alert"></div>

    <div class="table-responsive">
        <table class="table table-hover align-middle">

            <thead>
                <tr>
                    <th>Transaction Ref</th>
                    <th>Visitor Name</th>
                    <th>Date</th>
                    <th>Time In</th>
                    <th>Time Out</th>
                    <th>Person to Visit</th>
                    <th>Section</th>
                    <th>Purpose</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody id="visitorTableBody"></tbody>

        </table>
    </div>

</section>

<div class="modal fade" id="visitorModal" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog modal-lg">

        <form class="modal-content" id="visitorForm">

            <div class="modal-header">
                <h5 class="modal-title" id="visitorModalTitle">
                    Add Visitor Pass
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>
            </div>

            <div class="modal-body">

                <input type="hidden" name="id">

                <div class="mb-3">
                    <label class="form-label">Visitor Name</label>

                    <input
                        class="form-control"
                        type="text"
                        name="visitor_name"
                        required>
                </div>

                <div class="row">

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Date</label>

                        <input
                            class="form-control"
                            type="date"
                            name="visit_date"
                            required>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Time In</label>

                        <input
                            class="form-control"
                            type="time"
                            name="time_in"
                            required>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label class="form-label">Time Out</label>

                        <input
                            class="form-control"
                            type="time"
                            name="time_out"
                            required>
                    </div>

                </div>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Person to Visit</label>

                        <input
                            class="form-control"
                            type="text"
                            name="person_to_visit"
                            required>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Section</label>

                        <input
                            class="form-control"
                            type="text"
                            name="section_name"
                            required>
                    </div>

                </div>

                <div class="mb-3">
                    <label class="form-label">Purpose of Visit</label>

                    <select
                        class="form-control"
                        name="purpose"
                        required>

                        <option value="">Select Purpose</option>

                        <option value="Collection">Collection</option>

                        <option value="Back-pay">Back-pay</option>

                        <option value="Clearance">Clearance</option>

                        <option value="Meeting">Meeting</option>

                        <option value="Delivery">Delivery</option>

                        <option value="Pick-up items">Pick-up items</option>

                        <option value="Others">Others</option>

                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">
                        Others (Please Specify)
                    </label>

                    <input
                        class="form-control"
                        type="text"
                        name="other_purpose">
                </div>

                <div class="mb-3">
                    <label class="form-label">Status</label>

                    <input
                        class="form-control"
                        type="text"
                        value="Pending"
                        disabled>
                </div>

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal">
                    Cancel
                </button>

                <button
                    type="submit"
                    class="btn btn-primary">
                    Save
                </button>

            </div>

        </form>

    </div>

</div>

<?php include __DIR__ . '/includes/footer.php'; ?>