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

$pageTitle = 'Food Passes';
$activePage = 'items';

$pageScripts = [
<<<'HTML'
<script>
window.crudConfig = {
    api: 'api/items.php',
    tableBody: '#itemTableBody',
    form: '#itemForm',
    modal: '#itemModal',
    modalTitle: '#itemModalTitle',
    addButton: '#addItemBtn',
    alertBox: '#ajaxAlert',

    emptyMessage: 'No food passes found.',

    fields: [
        'id',
        'transaction_ref',
        'food_items',
        'quantity_measurement',
        'container_type',
        'reason',
        'status'
    ],

    columns: [
        { key: 'transaction_ref' },
        { key: 'food_items', format: 'title' },
        { key: 'quantity_measurement' },
        { key: 'container_type', format: 'title' },
        { key: 'reason', format: 'title' },
        { 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>Food Pass</h2>
            <p>Manage food items to bring in.</p>
        </div>

        <button class="btn btn-primary" type="button" id="addItemBtn">
            <i class="bi bi-plus-lg"></i>
            Add Food 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>Food Items to Bring In</th>
                    <th>Qty. and Measurement</th>
                    <th>Type of Container</th>
                    <th>Reason</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>

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

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

            <div class="modal-header">
                <h5 class="modal-title" id="itemModalTitle">Add Food 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">Food Items to Bring In</label>
                    <textarea class="form-control" name="food_items" rows="3" required></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">Qty. and Measurement</label>
                    <input
                        class="form-control"
                        type="text"
                        name="quantity_measurement"
                        placeholder="Example: 2 boxes, 1 kilo, 5 pcs"
                        required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Type of Container</label>
                    <input
                        class="form-control"
                        type="text"
                        name="container_type"
                        placeholder="Example: Plastic container, box, bag"
                        required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Reason</label>
                    <textarea class="form-control" name="reason" rows="2" required></textarea>
                </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'; ?>