<?php
// Hijri Date Logic for Defaults from Session
$promotionDt = date('Y-m-d');
$dateEd = date('Y-m-d', strtotime('+1 year'));

if (isset($_SESSION['hijri'])) {
    $dt = new DateTime($_SESSION['hijri']);
    $promotionDt = $dt->format('Y-m-d');
    $y = (int) $dt->format('Y') + 1;
    $dateEd = $dt->format($y . '-m-d');
}
?>
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white text-end">
                <h5 class="card-title mb-0 urdu-regular">تفصیلی رپورٹ حاضری طلباء</h5>
            </div>
            <div class="card-body">
                <form id="attendanceReportForm" dir="rtl">
                    <div class="row g-3 align-items-end justify-content-end">
                        <div class="col-md-3 text-end">
                            <label for="darja" class="form-label urdu-regular">درجہ منتخب کریں <span
                                    class="text-danger">*</span></label>
                            <?php
                            $css = 'form-select text-end urdu-regular shadow-sm';
                            $crud->darjaatCmb('darja', 'required', $css);
                            ?>
                        </div>
                        <div class="col-md-3 text-end">
                            <label for="date1" class="form-label urdu-regular">تاریخ ابتداء
                                <?php echo $hijri->GregorianToHijri(date('dmY', strtotime($promotionDt)), 'DDMMYYYY'); ?>
                                <span class="text-danger">*</span></label>
                            <input type="text" class="form-control text-end shadow-sm hijri-picker" name="date1"
                                id="date1"
                                value="<?php echo isset($_REQUEST['date1']) && !empty($_REQUEST['date1']) ? $_REQUEST['date1'] : $promotionDt; ?>"
                                readonly required>
                        </div>
                        <div class="col-md-3 text-end">
                            <label for="date2" class="form-label urdu-regular">تاریخ انتہاء
                                <?php echo $hijri->GregorianToHijri(date('dmY', strtotime($dateEd)), 'DDMMYYYY'); ?>
                                <span class="text-danger">*</span></label>
                            <input type="text" class="form-control text-end shadow-sm hijri-picker" name="date2"
                                id="date2"
                                value="<?php echo isset($_REQUEST['date2']) && !empty($_REQUEST['date2']) ? $_REQUEST['date2'] : $dateEd; ?>"
                                readonly required>
                        </div>
                        <div class="col-md-3 text-end mt-3 mt-md-0">
                            <button type="submit" class="btn btn-success w-100 urdu-regular shadow-sm"
                                id="btnShowReport">رپورٹ دکھائیں</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .attendance-grid {
        border-collapse: collapse;
        font-family: 'urdu-regular', 'Inter', sans-serif;
    }

    .attendance-grid th,
    .attendance-grid td {
        padding: 4px !important;
        min-width: 32px;
        text-align: center;
        border: 1px solid #999 !important;
        vertical-align: middle;
        font-size: 0.95rem;
    }

    .attendance-grid thead th {
        background-color: #f8f9fa !important;
        color: #333;
        font-weight: 600;
    }

    .attendance-grid .day-cell {
        cursor: pointer;
        transition: background-color 0.15s;
    }

    .attendance-grid .day-cell:hover {
        background-color: #e9ecef !important;
    }

    .attendance-grid .hazir {
        color: #212529;
    }

    .attendance-grid .ghair-hazir {
        color: #dc3545;
        font-weight: bold;
    }

    .attendance-grid .rokhsat {
        color: #fd7e14;
        font-weight: bold;
    }

    .attendance-grid .bemar {
        color: #0dcaf0;
        font-weight: bold;
    }

    /* Summary (Mezaan) subdivision */
    .summary-group {
        padding: 0 !important;
        width: 120px;
    }

    .summary-table {
        width: 100%;
        margin: 0;
        border: none !important;
    }

    .summary-table td,
    .summary-table th {
        border: 1px solid #999 !important;
        font-size: 0.8rem !important;
        width: 25%;
        padding: 2px !important;
    }

    .summary-header {
        background-color: #eee !important;
        font-weight: bold !important;
    }

    .table-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        padding-bottom: 5px; /* Space for scrollbar */
    }

    /* Custom scrollbar for better visibility */
    .table-scroll-container::-webkit-scrollbar {
        height: 10px;
    }

    .table-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .table-scroll-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .table-scroll-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .month-header-name {
        background-color: #e9ecef !important;
        font-weight: bold;
        color: #333;
        text-align: center !important;
        vertical-align: middle !important;
        font-size: 0.9rem;
        border-bottom: 2px solid #aaa !important;
    }
</style>

<div class="row">
    <div class="col-12">
        <div id="reportContainer" class="table-scroll-container table-responsive">
            <!-- Grid will be rendered here by JS -->
        </div>
    </div>
</div>

<!-- Attendance Quick Update Modal -->
<div class="modal fade" id="updateAttendanceModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white py-2 justify-content-center">
                <h6 class="modal-title urdu-regular mb-0">حاضری منتخب کریں</h6>
            </div>
            <div class="modal-body p-3">
                <input type="hidden" id="modalStdSno">
                <input type="hidden" id="modalDate">
                <div class="row g-2">
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-dark btn-lg w-100 py-3 urdu-regular fw-bold"
                            onclick="submitAttendance('ح')">ح (حاضر)</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-danger btn-lg w-100 py-3 urdu-regular fw-bold"
                            onclick="submitAttendance('غ')">غ (غیرحاضر)</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-warning btn-lg w-100 py-3 urdu-regular fw-bold"
                            onclick="submitAttendance('ر')">ر (رخصت)</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-outline-info btn-lg w-100 py-3 urdu-regular fw-bold"
                            onclick="submitAttendance('ب')">ب (بیمار)</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom JS for attendance report -->
<script src="assets/js/attendance_report.js"></script>