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

$pageTitle = 'Personnel Passes';
$activePage = 'employees';

$pageScripts = [
<<<'HTML'
<script>
window.crudConfig = {
    api: 'api/employees.php',
    tableBody: '#employeeTableBody',
    form: '#employeeForm',
    modal: '#employeeModal',
    modalTitle: '#employeeModalTitle',
    addButton: '#addEmployeeBtn',
    alertBox: '#ajaxAlert',

    emptyMessage: 'No personnel passes found.',

    fields: [
        'id',
        'transaction_ref',
        'section_name',
        'id_number',
        'name',
        'signature',
        'pass_date',
        'pass_time',
        'reason',
        'date_time_filed',
        'status'
    ],

    columns: [
        { key: 'transaction_ref' },
        { key: 'section_name' },
        { key: 'id_number' },
        { key: 'name', format: 'title' },
        { key: 'signature' },
        { key: 'pass_date' },
        { key: 'pass_time' },
        { key: 'reason' },
        { key: 'date_time_filed', format: 'datetime' },
        { 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>Personnel Pass</h2>
            <p>Manage personnel undertime / halfday pass requests.</p>
        </div>

        <button class="btn btn-primary" type="button" id="addEmployeeBtn">
            <i class="bi bi-plus-lg"></i>
            Add Personnel 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>Section</th>
                    <th>ID No.</th>
                    <th>Name</th>
                    <th>Signature</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Reason</th>
                    <th>Date / Time Filed</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody id="employeeTableBody"></tbody>
        </table>
    </div>

</section>

<div class="modal fade" id="employeeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">

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

            <div class="modal-header">
                <h5 class="modal-title" id="employeeModalTitle">
                    Add Personnel 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">Section</label>
                    <input
                        class="form-control"
                        type="text"
                        name="section_name"
                        required>
                </div>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label class="form-label">ID No.</label>
                        <input
                            class="form-control"
                            type="text"
                            name="id_number"
                            required>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Name</label>
                        <input
                            class="form-control"
                            type="text"
                            name="name"
                            data-capitalize="words"
                            required>
                    </div>

                </div>

                <div class="mb-3">
                    <label class="form-label">Signature</label>
                    <input
                        class="form-control"
                        type="text"
                        name="signature"
                        placeholder="Type name as signature">
                </div>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Date</label>
                        <input
                            class="form-control"
                            type="date"
                            name="pass_date"
                            required>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Time</label>
                        <input
                            class="form-control"
                            type="time"
                            name="pass_time"
                            required>
                    </div>

                </div>

                <div class="mb-3">
                    <label class="form-label">Reason</label>
                    <textarea
                        class="form-control"
                        name="reason"
                        rows="3"
                        required></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">Date / Time Filed</label>
                    <input
                        class="form-control"
                        type="text"
                        name="date_time_filed"
                        data-auto-datetime
                        disabled>
                </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'; ?>