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

$pageTitle = 'Meal Break Passes';
$activePage = 'mealbreak';
$pageScripts = [
    <<<'HTML'
<script>
window.crudConfig = {
    api: 'api/mealbreak.php',
    tableBody: '#mealBreakTableBody',
    form: '#mealBreakForm',
    modal: '#mealBreakModal',
    modalTitle: '#mealBreakModalTitle',
    addButton: '#addMealBreakBtn',
    alertBox: '#ajaxAlert',
    emptyMessage: 'No meal break passes found.',
    fields: ['id', 'transaction_ref', 'name', 'line_section', 'time_out', 'time_in', 'purpose', 'status'],
    columns: [
        { key: 'transaction_ref' },
        { key: 'name', format: 'title' },
        { key: 'line_section' },
        { key: 'time_out' },
        { key: 'time_in' },
        { key: 'purpose', 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>Manufacturing Meal Break Pass</h2>
            <p>Manage meal break requests.</p>
        </div>

        <button class="btn btn-primary" type="button" id="addMealBreakBtn">
            <i class="bi bi-plus-lg"></i>
            Add Meal Break
        </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>NAME</th>
                    <th>LINE / SECTION</th>
                    <th>TIME OUT</th>
                    <th>TIME IN</th>
                    <th>PURPOSE</th>
                    <th>STATUS</th>
                    <th>ACTION</th>
                </tr>
            </thead>

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

<!-- MODAL -->
<div class="modal fade" id="mealBreakModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" id="mealBreakForm">

            <div class="modal-header">
                <h5 class="modal-title" id="mealBreakModalTitle">
                    Add Meal Break 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">Name</label>

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

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

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

                <div class="row">

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

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

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

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

                </div>

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

                    <textarea class="form-control"
                              name="purpose"
                              rows="3"
                              required></textarea>
                </div>

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

                    <input type="text"
                           class="form-control"
                           name="status"
                           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'; ?>