<?php
/**
 * Attendance Sheet Page - Refactored for Bootstrap 5.3
 * Allows daily attendance tracking for students.
 */

// Hijri Date Logic for Defaults
$promotionDt = date('Y-m-d');
$dateEd = date('Y-m-d', strtotime('+1 year'));
if (isset($_SESSION['hijri'])) {
    $promotionDt = $_SESSION['hijri'];
    $parts = explode("-", $promotionDt);
    $nextYear = (int) $parts[0] + 1;
    $dateEd = $nextYear . '-' . $parts[1] . '-' . $parts[2];
}
?>

<style>
    /* ─── Page-level responsive fixes ─── */
    @media (max-width: 768px) {
        #attendanceSheetWrapper .row.g-3>[class*="col-md"] {
            flex: 0 0 100%;
            max-width: 100%;
        }

        #attendanceSheetWrapper .card-header .row {
            flex-direction: column;
            gap: 10px;
        }

        #attendanceSheetWrapper .card-header .col-md-6 {
            text-align: center !important;
            justify-content: center !important;
            width: 100%;
        }

        #attendanceSheetWrapper .card-header .d-flex {
            flex-wrap: wrap;
            justify-content: center !important;
        }

        #attendanceSheetWrapper .card-header #attendanceDate {
            width: 100% !important;
        }

        .d-flex.flex-wrap.gap-2.mb-4 {
            justify-content: center;
        }

        .d-flex.flex-wrap.gap-2.mb-4 .btn {
            flex: 1 1 auto;
            text-align: center;
        }
    }

    @media (max-width: 576px) {
        #attendanceSheetWrapper h2 {
            font-size: 1.25rem;
        }

        #attendanceSheetWrapper .btn-lg {
            font-size: 0.95rem;
            padding: 10px 16px;
        }

        #attendanceSheetWrapper .form-control-lg {
            font-size: 0.95rem;
        }
    }
</style>

<div id="attendanceSheetWrapper" dir="rtl">
    <!-- Navigation Tabs / Links -->
    <div class="d-flex flex-wrap gap-2 mb-4">
        <a href="attendenceSheetSingleStd" class="btn btn-outline-primary" title="علحٰیدہ طالب العلم کی حاضری لگائیں">
            <i class="bi bi-person-badge me-1"></i>انفرادی حاضری
        </a>
        <a href="updateAttendence" class="btn btn-outline-secondary" title="کشف الحضور میں تبدیلی کریں">
            <i class="bi bi-pencil-square me-1"></i>حاضری میں تبدیلی
        </a>
        <a href="dashboard" class="btn btn-outline-dark">
            <i class="bi bi-house me-1"></i>ڈیش بورڈ
        </a>
    </div>

    <!-- Page Header -->
    <div class="mb-4">
        <h2 class="fw-bold mb-0 text-primary">
            <i class="bi bi-calendar-check me-2"></i>کشف الحضور (Daily Attendance)
        </h2>
        <p class="text-muted small">
            روزانہ کی حاضری لگائیں اور محفوظ کریں
        </p>
    </div>

    <!-- Alert Placeholder -->
    <div id="formAlert"></div>

    <!-- Search Form Card -->
    <div class="card border-0 shadow-sm mb-4 bg-light">
        <div class="card-body p-4">
            <form id="searchForm" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-semibold">درجہ منتخب کریں</label>
                    <?php $crud->darjaatCmb('darja', 'class="form-select form-select-lg" id="darja" required'); ?>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">تاریخِ ابتداء (Start Date)</label>
                    <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden" dir="ltr">
                        <span class="input-group-text bg-light border-0 text-primary"><i
                                class="bi bi-calendar-event"></i></span>
                        <input type="text" id="promotionDate" name="promotionDate"
                            class="form-control border-0 text-start hijri-picker" value="<?php echo $promotionDt; ?>"
                            readonly required>
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">تاریخِ انتہا (End Date)</label>
                    <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden" dir="ltr">
                        <span class="input-group-text bg-light border-0 text-primary"><i
                                class="bi bi-calendar-check"></i></span>
                        <input type="text" id="dateEnd" name="dateEnd"
                            class="form-control border-0 text-start hijri-picker" value="<?php echo $dateEd; ?>"
                            readonly required>
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary btn-lg w-100 shadow-sm">
                        <i class="bi bi-search me-2"></i> طلباء تلاش کریں
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Attendance Section (Hidden until search) -->
    <div id="resultsSection" class="d-none">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-dark text-white py-3">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h5 class="mb-0"><i class="bi bi-table me-2"></i> حاضری رجسٹر </h5>
                    </div>
                    <div class="col-md-6 text-end d-flex align-items-center justify-content-end gap-3">
                        <label for="attendanceDate" class="mb-0 fw-semibold small">حاضری کی تاریخ:</label>
                        <div class="input-group input-group-sm shadow-sm rounded-3 overflow-hidden" dir="ltr"
                            style="width: 180px;">
                            <span class="input-group-text bg-dark border-0 text-white"><i
                                    class="bi bi-calendar-event"></i></span>
                            <input type="text" id="attendanceDate" name="attendanceDate"
                                class="form-control border-0 text-start hijri-picker"
                                value="<?php echo (isset($_SESSION['hijri']) ? $_SESSION['hijri'] : date('Y-m-d')); ?>"
                                readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width: 60px;">#</th>
                                <th>نام طالب علم بمعہ ولدیت</th>
                                <th class="text-center">حاضری (Status)</th>
                            </tr>
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Rows injected by JS -->
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 pt-3 border-top text-end">
                    <button type="button" id="btnSaveAttendance" class="btn btn-success btn-lg px-5 shadow-sm">
                        <i class="bi bi-save me-2"></i>محفوظ کیجیے
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page Specific JS -->
<script src="assets/js/attendence_sheet.js"></script>