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

$pageTitle = 'Item Passes';
$activePage = 'packages';

$pageScripts = [
<<<'HTML'
<script>
window.crudConfig = {
    api: 'api/packages.php',
    tableBody: '#packageTableBody',
    form: '#packageForm',
    modal: '#packageModal',
    modalTitle: '#packageModalTitle',
    addButton: '#addPackageBtn',
    alertBox: '#ajaxAlert',

    emptyMessage: 'No item passes found.',

    fields: [
        'transaction_ref',
        'id',
        'description',
        'quantity',
        'measurement',
        'remarks',
        'checked_out',
        'checked_in',
        'status'
    ],

    columns: [
        { key: 'transaction_ref' },
        { key: 'description', format: 'title' },
        { key: 'quantity' },
        { key: 'measurement' },
        { key: 'remarks', format: 'title' },
        { key: 'checked_out' },
        { key: 'checked_in' },
        { 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>Item Pass</h2>
            <p>Manage item gate pass requests.</p>
        </div>

        <button class="btn btn-primary" type="button" id="addPackageBtn">
            <i class="bi bi-plus-lg"></i>
            Add Item 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>Description</th>
                    <th>Quantity</th>
                    <th>Measurement</th>
                    <th>Remarks</th>
                    <th>Checked By Out</th>
                    <th>Checked By In</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody id="packageTableBody"></tbody>
        </table>
    </div>
</section>

<div class="modal fade" id="packageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form class="modal-content" id="packageForm">

            <div class="modal-header">
                <h5 class="modal-title" id="packageModalTitle">Add Item Pass</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" name="id">

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

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Quantity</label>
                        <input class="form-control" type="number" name="quantity" required>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Measurement</label>
                        <input class="form-control" type="text" name="measurement" placeholder="pcs, box, kg, etc." required>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Remarks</label>
                    <textarea class="form-control" name="remarks" rows="2"></textarea>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Checked By Out</label>
                        <input class="form-control" type="text" name="checked_out">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Checked By In</label>
                        <input class="form-control" type="text" name="checked_in">
                    </div>
                </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'; ?>