<?php
/**
 * Student Promotion Page - Refactored for Bootstrap 5.3
 * Allows promoting students and re-sequencing roll numbers.
 */

// Hijri/Gregorian Default Logic
$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 id="stdPromotionWrapper" dir="rtl">
    <!-- Breadcrumb / Header -->
    <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
        <div>
            <h2 class="fw-bold mb-0 text-success">
                <i class="bi bi-person-up me-2"></i>طالب العلم کی ترقی (Promotion)
            </h2>
            <p class="text-muted small mb-0">طالب العلم کو ایک درجہ سے دوسرے میں منتقل کریں اور رول نمبرز ترتیب دیں</p>
        </div>
        <div class="d-flex gap-2">
            <a href="dashboard" class="btn btn-outline-dark">
                <i class="bi bi-house me-1"></i> ڈیش بورڈ
            </a>
        </div>
    </div>

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

    <!-- Search Section Card -->
    <div class="card border-0 shadow-sm mb-4 bg-light bg-opacity-50">
        <div class="card-body p-4">
            <h5 class="fw-bold mb-3 d-flex align-items-center">
                <span class="badge bg-success me-2 rounded-pill">1</span>
                موجودہ درجہ اور تفصیلات منتخب کریں
            </h5>
            <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('darja1', 'class="form-select form-select-lg" id="darja1" required'); ?>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">تاریخ ابتداء</label>
                    <input type="text" name="promotionDates" id="promotionDates"
                        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">تاریخ انتہا</label>
                    <input type="text" name="dateEnds" id="dateEnds"
                        class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                        value="<?php echo $dateEd; ?>" readonly required>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success btn-lg w-100 shadow-sm h-100 py-2">
                        <i class="bi bi-search me-1"></i> لسٹ دیکھیں
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Results and Actions Section (Hidden until search) -->
    <div id="resultsSection" class="d-none">
        <!-- Action Toolbar for Roll Numbers -->
        <div class="card border-0 shadow-sm mb-4 bg-dark text-white">
            <div class="card-body py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div class="d-flex align-items-center">
                    <i class="bi bi-list-ol fs-4 me-3 text-warning"></i>
                    <div>
                        <h6 class="mb-0 fw-bold text-warning">رول نمبرز کی ترتیب</h6>
                        <small class="opacity-75">تمام طلباء کے رول نمبرز کو بالترتیب تبدیل کرنے کے لیے بٹن
                            دبائیں</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div id="rolUptMsg" class="small fw-bold"></div>
                    <button type="button" id="btnUpdateRollNumbers" class="btn btn-warning fw-bold px-4">
                        رول نمبرز تبدیل کریں
                    </button>
                </div>
            </div>
        </div>

        <!-- Student List Card -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3 border-0">
                <h5 class="mb-0 fw-bold border-start border-4 border-success ps-3">طلباء کی تفصیلات</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-info bg-opacity-25">
                            <tr>
                                <th class="text-center" style="width: 50px;">#</th>
                                <th class="ps-3">اسم الطالب بمعہ ولدیت</th>
                                <th class="text-center">رجسٹریشن نمبر</th>
                                <th class="text-center">تاریخِ پیدائش</th>
                                <th class="text-center">رول نمبر</th>
                                <th>مستقل پتہ</th>
                                <th class="text-center">موجودہ درجہ</th>
                                <th class="text-center" style="width: 100px;">انفرادی ترقی</th>
                            </tr>
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Rows injected by JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Promotion Action Section -->
        <div id="promotionActionRow" class="d-none mb-5">
            <!-- Settings Card -->
            <div class="card border-success shadow-sm mb-3 border-2">
                <div class="card-body p-4 bg-success bg-opacity-10 text-success">
                    <h5 class="fw-bold mb-4 d-flex align-items-center">
                        <i class="bi bi-gear-fill me-2 fs-4"></i>
                        ترقی کے لئے نئی معلومات (Promotion Settings)
                    </h5>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark">تاریخ داخلہ (نئی)</label>
                            <input type="text" id="promotionDateNew"
                                class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                                value="<?php echo $promotionDt; ?>" readonly required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark">اختتامِ داخلہ (نئی)</label>
                            <input type="text" id="dateEndNew"
                                class="form-control form-control-lg text-start hijri-picker" dir="ltr"
                                value="<?php echo $dateEd; ?>" readonly required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark">درجہ تبدیل کریں (To)</label>
                            <?php $crud->darjaatCmb('toDarja', 'class="form-select form-select-lg" required'); ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Execution Card (Small with Warning background) -->
            <div class="card border-warning shadow-sm bg-warning bg-opacity-10">
                <div
                    class="card-body p-3 d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                    <div class="d-flex align-items-center text-danger">
                        <i class="bi bi-exclamation-triangle-fill fs-3 me-3"></i>
                        <div>
                            <p class="mb-0 fw-bold">توجہ! اس لسٹ کے تمام طلباء کو منتخب کردہ درجہ میں منتقل کرنے کے لئے
                                بٹن دبائیں۔</p>
                            <small class="opacity-75">اس عمل کے بعد طلباء کی موجودہ پوزیشن تبدیل ہو جائے گی۔</small>
                        </div>
                    </div>
                    <div>
                        <button type="button" id="btnBulkPromote"
                            class="btn btn-success btn-lg shadow px-5 py-2 fw-bold text-nowrap">
                            <i class="bi bi-check-all fs-4 me-1"></i> سب کو منتقل کریں
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    .student-select-radio {
        width: 1.5em;
        height: 1.5em;
        cursor: pointer;
        border-color: #198754;
    }

    .student-select-radio:checked {
        background-color: #198754;
    }
</style>

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