<?php
/**
 * Attendance Sheet Single Student Page - Refactored for Bootstrap 5.3
 * Allows searching and marking attendance for individual students.
 */

// Gregorian/Hijri Default Logic
$promotionDt = date('Y-m-d');
if (isset($_SESSION['hijri'])) {
    $dt = new DateTime($_SESSION['hijri']);
    $promotionDt = $dt->format('Y-m-d');
}
?>

<div id="singleAttendanceWrapper" dir="rtl">
    <!-- Navigation Tabs / Links -->
    <div class="d-flex flex-wrap gap-2 mb-4">
        <a href="attendenceSheet" class="btn btn-outline-secondary">
            <i class="bi bi-calendar-check 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-person-badge me-2"></i>انفرادی حاضری (Single Student 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-4">
                    <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-4">
                    <label class="form-label fw-semibold">داخلہ سال منتخب کریں</label>
                    <input type="text" id="yearInput" name="year"
                        class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                        value="<?php echo $promotionDt; ?>" readonly required>
                </div>
                <div class="col-md-4">
                    <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>

    <!-- Results 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">
                <h5 class="mb-0"><i class="bi bi-table me-2"></i> طلباء کی فہرست </h5>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width: 60px;">#</th>
                                <th>اسم الطالب</th>
                                <th class="text-center">رجسٹریشن نمبر</th>
                                <th class="text-center">تاریخِ پیدائش</th>
                                <th class="text-center">رول نمبر</th>
                                <th>مستقل پتہ</th>
                                <th class="text-center">درجہ</th>
                            </tr>
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Rows injected by JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Attendance Modal -->
<div class="modal fade" id="attendanceModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" dir="rtl">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalLabel">انفرادی حاضری لگائیں</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form id="attendanceForm">
                <div class="modal-body p-4">
                    <input type="hidden" id="stdSno" name="stdSno">
                    <input type="hidden" id="darjaSno" name="darjaSno">

                    <div class="alert alert-info border-0 text-center py-3 mb-4">
                        <h4 id="modalStudentName" class="fw-bold mb-0"></h4>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">حاضری کی تاریخ منتخب کریں</label>
                        <input type="text" id="attendanceDate" name="attendanceDate"
                            class="form-control text-start hijri-picker" dir="ltr" value="<?php echo date('Y-m-d'); ?>"
                            readonly required>
                    </div>

                    <label class="form-label fw-semibold mb-3">حاضری کی صورتحال:</label>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="form-check card p-3 h-100 transition-all hover-bg-light cursor-pointer">
                                <input class="form-check-input" type="radio" name="attendanceStatus" id="att_h"
                                    value="ح">
                                <label class="form-check-label fw-semibold stretched-link" for="att_h">
                                    <i class="bi bi-check-circle-fill text-success me-2"></i>حاضر (P)
                                </label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check card p-3 h-100 transition-all hover-bg-light cursor-pointer">
                                <input class="form-check-input" type="radio" name="attendanceStatus" id="att_g"
                                    value="غ" checked>
                                <label class="form-check-label fw-semibold stretched-link" for="att_g">
                                    <i class="bi bi-x-circle-fill text-danger me-2"></i>غیر حاضر (A)
                                </label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check card p-3 h-100 transition-all hover-bg-light cursor-pointer">
                                <input class="form-check-input" type="radio" name="attendanceStatus" id="att_r"
                                    value="ر">
                                <label class="form-check-label fw-semibold stretched-link" for="att_r">
                                    <i class="bi bi-info-circle-fill text-primary me-2"></i>رخصت (L)
                                </label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-check card p-3 h-100 transition-all hover-bg-light cursor-pointer">
                                <input class="form-check-input" type="radio" name="attendanceStatus" id="att_b"
                                    value="ب">
                                <label class="form-check-label fw-semibold stretched-link" for="att_b">
                                    <i class="bi bi-heart-pulse-fill text-warning me-2"></i>بیمار (S)
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light p-3">
                    <button type="button" class="btn btn-secondary px-4 rounded-pill" data-bs-dismiss="modal">منسوخ
                        کریں</button>
                    <button type="submit" class="btn btn-primary px-5 rounded-pill shadow-sm">
                        <i class="bi bi-save me-2"></i>محفوظ کریں
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .cursor-pointer {
        cursor: pointer;
    }

    .hover-bg-light:hover {
        background-color: #f8f9fa !important;
    }

    .transition-all {
        transition: all 0.2s ease;
    }
</style>

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