<?php
/**
 * Update Result Page - Refactored for Bootstrap 5.3
 * Handles searching and editing exam results via AJAX.
 */

// Initial Date Logic from legacy page
$sessionDate = "";
$dateEnding = "";
if (isset($_SESSION["hijri"]) && !empty($_SESSION["hijri"])) {
    try {
        $sDt = new DateTime($_SESSION["hijri"]);
        $sessionDate = $sDt->format('Y-m-d');
        $dtAry = explode("-", $sessionDate);
        $dateEnding = ($dtAry[0] + 1) . '-' . $dtAry[1] . '-' . $dtAry[2];
    }
    catch (Exception $e) {
        $sessionDate = date('Y-m-d');
        $dateEnding = (date('Y') + 1) . '-01-01';
    }
}
else {
    $sessionDate = date('Y-m-d');
    $dateEnding = (date('Y') + 1) . '-01-01';
}
?>

<div id="updateResultWrapper" dir="rtl">
    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-3 border-bottom gap-3">
        <div>
            <h2 class="fw-bold mb-0 text-primary urdu-regular">
                <i class="bi bi-pencil-square me-2"></i>نتیجہ میں تبدیلی (Update Result)
            </h2>
            <p class="text-muted small mb-0">
                <?php echo htmlspecialchars(M_Name); ?>
            </p>
        </div>
        <div class="d-flex gap-2">
            <a href="resultFrm" class="btn btn-outline-primary shadow-sm" title="نتیجہ بنائیں">
                <i class="bi bi-file-earmark-plus me-1"></i>نیا نتیجہ بنائیں
            </a>
            <a href="dashboard" class="btn btn-outline-secondary shadow-sm">
                <i class="bi bi-house me-1"></i>ڈیش بورڈ
            </a>
        </div>
    </div>

    <!-- Search Card -->
    <div class="card shadow-sm border-0 mb-4 overflow-hidden">
        <div class="card-header bg-success text-white py-3">
            <h5 class="card-title mb-0 urdu-regular fs-4">
                <i class="bi bi-search me-2"></i>تلاش کیجیے
            </h5>
        </div>
        <div class="card-body bg-light">
            <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', 'id="darja"', 'form-select form-select-lg'); ?>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">تاریخِ ابتداء</label>
                    <input type="text" id="promotionDate" name="promotionDate"
                        class="form-control form-control-lg text-start" dir="ltr"
                        value="<?php echo htmlspecialchars($sessionDate); ?>" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">تاریخِ انتہا</label>
                    <input type="text" id="dateEnd" name="dateEnd" class="form-control form-control-lg text-start"
                        dir="ltr" value="<?php echo htmlspecialchars($dateEnding); ?>" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">امتحان</label>
                    <select name="resultTerm" id="resultTerm" class="form-select form-select-lg">
                        <option value="1"> سہ ماہی </option>
                        <option value="2"> شش ماہی </option>
                        <option value="3"> سالانہ </option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-success btn-lg w-100 shadow-sm" id="btnSearch">
                        <i class="bi bi-search me-2"></i>تلاش کریں
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Results Table Container (Hidden by default) -->
    <div id="resultsContainer" style="display: none;">
        <div class="card shadow-sm border-0 overflow-hidden">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="card-title mb-0 urdu-regular fs-4">
                    <i class="bi bi-table me-2"></i>تفصیلی نتیجہ
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered mb-0 align-middle text-center">
                        <thead id="resultsTableHeader" class="table-light align-middle">
                            <!-- Injected by JavaScript -->
                        </thead>
                        <tbody id="resultsTableBody">
                            <!-- Injected by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-light border-top p-4">
                <div class="row align-items-end g-3">
                    <div class="col-md-8">
                        <label for="edu_year_remarks" class="form-label fw-semibold">تعلیمی سال کی تفصیل
                            (Remarks)</label>
                        <textarea class="form-control form-control-lg" name="edu_year_remarks" id="edu_year_remarks"
                            rows="3" placeholder="مثلاً: تعلیمی سال 1445-1446ھ کے نتائج"></textarea>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn-primary btn-lg w-100 shadow-sm" id="btnUpdateRemarks">
                            <i class="bi bi-check-circle me-2"></i>ریمارکس اپڈیٹ کریں
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom CSS for Urdu text in standard elements if needed -->
    <style>
        #resultsContainer .table th {
            font-size: 0.95rem;
            font-weight: 700;
        }

        #resultsContainer .table td {
            font-size: 1rem;
        }

        .edit-mark {
            color: #0d6efd;
            font-size: 1.1rem;
        }

        .edit-mark:hover {
            color: #0a58ca;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
    </style>

    <!-- Load custom JS -->
    <script src="assets/js/update_result.js"></script>
</div>