<?php
/**
 * Update Attendance Page - Refactored for Bootstrap 5.3
 * Allows modifying or deleting existing attendance records.
 */

// Default to Hijri date if available
$defaultDate = date('Y-m-d');
if (isset($_SESSION['hijri'])) {
    $defaultDate = $_SESSION['hijri'];
}
?>

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

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

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

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

<div id="updateAttendanceWrapper" 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="attendenceSheetSingleStd" class="btn btn-outline-primary" title="علحٰیدہ طالب العلم کی حاضری لگائیں">
            <i class="bi bi-person-badge 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-success">
            <i class="bi bi-pencil-square me-2"></i>حاضری میں تبدیلی کریں
        </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>
                    <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="attendanceDateSearch" name="attendanceDateSearch"
                            class="form-control border-0 text-start hijri-picker" value="<?php echo $defaultDate; ?>"
                            readonly required>
                    </div>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-success 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>
                            </tr>
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Rows injected by JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Attendance Modal -->
<div class="modal fade" id="editAttendanceModal" tabindex="-1" aria-labelledby="editModalLabel" 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="editModalLabel">حاضری میں تبدیلی</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="editAttendanceForm">
                <div class="modal-body p-4">
                    <input type="hidden" id="editAttSno" name="attSno">

                    <div class="text-center mb-4 pb-3 border-bottom">
                        <h4 id="editStudentName" class="fw-bold text-dark mb-0"></h4>
                        <p class="text-muted small">حاضری کی نئی صورتحال منتخب کریں</p>
                    </div>

                    <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="editStatus" id="edit_h" value="ح">
                                <label class="form-check-label fw-semibold stretched-link" for="edit_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="editStatus" id="edit_g" value="غ">
                                <label class="form-check-label fw-semibold stretched-link" for="edit_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="editStatus" id="edit_r" value="ر">
                                <label class="form-check-label fw-semibold stretched-link" for="edit_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="editStatus" id="edit_b" value="ب">
                                <label class="form-check-label fw-semibold stretched-link" for="edit_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/update_attendance.js"></script>