<?php
/**
 * Result By Subject Page - Refactored for Bootstrap 5.3
 * Allows entering marks for a specific subject across all students in a class.
 */
?>

<div id="resultBySubjectWrapper" dir="rtl">
    <!-- Navigation Tabs / Links -->
    <div class="d-flex flex-wrap gap-2 mb-4">
        <a href="resultFrm" class="btn btn-outline-primary" title="تمام طلباء کا نتیجہ ایک ساتھ درج کریں">
            <i class="bi bi-person-lines-fill me-1"></i>تمام طلباء کا نتیجہ
        </a>
        <a href="resultFrmSingleStd" class="btn btn-outline-secondary" 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-journal-check me-2"></i>مضمون وار نتیجہ (Result By Subject)
        </h2>
        <p class="text-muted small">
            <?php echo htmlspecialchars(M_Name); ?>
        </p>
    </div>

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

    <!-- Search Form Card -->
    <?php
    $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 = explode("-", $promotionDt);
        $y = (int) $y[0] + 1;
        $dateEd = $dt->format($y . '-m-d');
    }
    ?>
    <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>
                    <input type="text" id="promotionDate" name="promotionDate"
                        class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                        value="<?php echo $promotionDt; ?>" readonly required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">تاریخِ انتہا (End Date)</label>
                    <input type="text" id="dateEnd" name="dateEnd"
                        class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                        value="<?php echo $dateEd; ?>" readonly required>
                </div>
                <div class="col-md-3">
                    <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">
                <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">
                        <span class="badge bg-success fs-6">کل نمبر (Max Marks): <span
                                id="totalMarksDisplay">0</span></span>
                    </div>
                </div>
            </div>
            <div class="card-body p-4">
                <div class="row g-3 mb-4 border-bottom pb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">مضمون منتخب کریں (Select Subject)</label>
                        <select id="subjects" class="form-select form-select-lg border-primary">
                            <option value="">پہلے درجہ تلاش کریں</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">امتحان (Result Term)</label>
                        <select id="resultTerm" class="form-select form-select-lg">
                            <option value="1"> سہ ماہی (Quarterly) </option>
                            <option value="2"> شش ماہی (Half-Yearly) </option>
                            <option value="3"> سالانہ (Annual) </option>
                        </select>
                    </div>
                </div>

                <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" style="width: 150px;">حاصل کردہ نمبر</th>
                                <th class="text-center" style="width: 150px;">کل نمبر</th>
                            </tr>
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Rows injected by JS -->
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 pt-3 border-top">
                    <div class="mb-3">
                        <label for="edu_year_remarks" class="form-label fw-semibold">تعلیمی سال کی تفصیل
                            (Remarks)</label>
                        <textarea class="form-control" id="edu_year_remarks" rows="2"
                            placeholder="مثلاً: تعلیمی سال 1445-1446ھ کے نتائج"></textarea>
                    </div>
                    <div class="text-end">
                        <button type="button" id="btnSaveResults" class="btn btn-success btn-lg px-5 shadow-sm">
                            <i class="bi bi-save me-2"></i>محفوظ کیجیے
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals or extra UI components can go here -->
</div>

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