<?php
require_once('includes/auth_check.php');
include_once('includes/header.php');
include_once('includes/sidebar.php');
?>
<main>
    <div class="container-fluid px-4">
        <!-- subject add start  -->
        <div class="container my-5">
            <div class="d-flex justify-content-between align-items-center mb-4">

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>
                        <li class="breadcrumb-item active">Marks Entry</li>
                    </ol>
                </nav>
            </div>
            <div class="row ">
                <div class="col-md-3">
                    <div class="card mb-0 border-0 shadow-sm">
                        <div class="card-header btn-primary">
                            <h6 class="text-dark m-0 f-bold text-white">Add Subjects</h6>
                        </div>
                        <div class="card-body">
                            <form id="addSubjectForm">
                                <div>
                                    <label class="my-2 fw-bold">Select Class Name</label>
                                    <select id="class_id" class="form-control mb-2"></select>

                                    <label class="my-2 fw-bold">Subject Name</label>
                                    <input type="text" id="subject_name" class="form-control mb-2"
                                        placeholder="e.g. Mathematics">

                                    <div class="row">
                                        <div class="col-md-4">
                                            <label class="my-2 fw-bold">Theory Max</label>
                                            <input type="number" id="theory_max" class="form-control mb-2" value="100"
                                                placeholder="e.g. 80">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="my-2 fw-bold">Practical Max</label>
                                            <input type="number" id="practical_max" class="form-control mb-2" value="0"
                                                placeholder="e.g. 20">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="my-2 fw-bold">Pass Marks</label>
                                            <input type="number" id="pass_marks" class="form-control mb-2" value="33"
                                                placeholder="e.g. 33">
                                        </div>
                                    </div>

                                    <button class="btn btn-primary mt-3 w-100" type="button" onclick="addSubject()">
                                        <i class="fas fa-plus-circle me-1"></i> Add Subject
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- loadtable  -->
                <div class="col-lg-9">
                    <div class="card mb-0 border-0 shadow-sm">
                        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                            <h6 class="mb-0 text-primary"><i class="fas fa-book me-2"></i>Class-wise Subjects</h6>
                            <span class="badge btn-primary" id="totalClassesBadge">0 Classes</span>
                        </div>
                        <div class="card-body">
                            <div class="input-group mb-3">
                                <span class="input-group-text bg-light"><i class="fas fa-search"></i></span>
                                <input type="text" id="subjectSearch" class="form-control"
                                    placeholder="Search class or specific subject..." onkeyup="searchSubjects()">
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 50px;">#</th>
                                            <th style="width: 150px;">Class Name</th>
                                            <th>strem</th>
                                            <th>Subjects</th>

                                            <th class="text-center" style="width: 120px;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody id="subjectTable">
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div id="paginationInfo" class="small text-muted"></div>
                                <div id="subjectPagination"></div>
                            </div>
                        </div>
                    </div>

                    <style>
                        /* Styling for the subject chips */
                        .subject-chip {
                            display: inline-flex;
                            align-items: center;
                            background: #f8f9fa;
                            border: 1px solid #dee2e6;
                            padding: 2px 8px;
                            border-radius: 50px;
                            margin: 3px;
                            transition: all 0.2s;
                        }

                        .subject-chip:hover {
                            border-color: #0d6efd;
                            background: #e9ecef;
                        }

                        .subject-chip .subject-name {
                            font-size: 0.9rem;
                            font-weight: 500;
                            margin-right: 8px;
                        }

                        .subject-chip .actions {
                            border-left: 1px solid #dee2e6;
                            padding-left: 5px;
                            display: flex;
                            gap: 2px;
                        }

                        .btn-action-sm {
                            padding: 0px 4px;
                            font-size: 0.75rem;
                            line-height: 1;
                            color: #6c757d;
                        }

                        .btn-action-sm:hover.edit {
                            color: #ffc107;
                        }

                        .btn-action-sm:hover.delete {
                            color: #dc3545;
                        }
                    </style>
                </div>
            </div>
        </div>

        <!--=================== exma term ============================ -->
        <div class="container-fluid px-4 mt-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3 mb-0 text-gray-800">Exam Term Management</h2>
                <button type="button" class="btn btn-primary shadow-sm" data-bs-toggle="modal"
                    data-bs-target="#addExamModal">
                    <i class="fas fa-plus-circle me-2"></i>Create New Term
                </button>
            </div>
            <div class="row mb-3">
                <div class="col-md-4 ms-auto">
                    <div class="input-group shadow-sm">
                        <span class="input-group-text bg-white border-end-0"><i
                                class="fas fa-search text-muted"></i></span>
                        <input type="text" id="searchTerm" class="form-control border-start-0"
                            placeholder="Search exam terms...">
                    </div>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-light">
                    <h6 class="m-0 font-weight-bold text-primary">Existing Exam Terms</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Term Name</th>
                                    <th>Max Marks</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="examTermsTable">
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center" id="paginationControls">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!--=================== exam marks  ========================= -->
        <div class="container-fluid px-4 py-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0 text-gray-800">Student Marks Entry</h1>

            </div>

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white py-3">
                    <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-search me-2"></i>Step 1: Select
                        Criteria</h6>
                </div>
                <div class="card-body">
                    <form id="marksFilterForm" class="row g-2">
                        <div class="col-md-2">
                            <label class="form-label small fw-bold text-uppercase">Class</label>
                            <select id="class_select" class="form-select form-select-sm" onchange="handleClassChange()"
                                required>
                                <option value="">Select Class</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label small fw-bold text-uppercase">Medium</label>
                            <select id="medium_select" class="form-select form-select-sm" required>
                                <option value="">Select </option>
                            </select>
                        </div>

                        <div class="col-md-2" id="section_container">
                            <label class="form-label small fw-bold text-uppercase">Section</label>
                            <select id="section_select" class="form-select form-select-sm">
                                <option value="">Select</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label small fw-bold text-uppercase">Subject</label>
                            <select id="subject_select" class="form-select form-select-sm" required>
                                <option value="">Select Subject</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label small fw-bold text-uppercase">Exam Term</label>
                            <select id="term_select" class="form-select form-select-sm" required>
                                <option value="">Select Term</option>
                            </select>
                        </div>

                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-sm w-100 shadow-sm">
                                <i class="fas fa-users me-2"></i>Fetch
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- <div id="markSheetWrapper" style="display: none;">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
                        <h6 class="m-0 font-weight-bold text-dark">
                            <i class="fas fa-user-edit me-2 text-primary"></i>Step 2: Enter Marks
                        </h6>
                        <div class="text-muted small" id="selectionSummary">
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <form id="saveMarksForm">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="ps-4" style="width: 100px;">Roll No</th>
                                            <th>Student Name</th>
                                            <th style="width: 200px;">Marks (Theory)</th>
                                            <th style="width: 200px;">Marks (Practical)</th>
                                            <th class="pe-4 text-end">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studentMarksTable">
                                    </tbody>
                                </table>
                            </div>

                            <div class="p-4 border-top bg-light text-end">
                                <button type="button" class="btn btn-secondary me-2"
                                    onclick="location.reload()">Reset</button>
                                <button type="submit" class="btn btn-success px-5">
                                    <i class="fas fa-save me-2"></i>Save All Marks
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
    <!-- ===============tabulaion sheet all the students ================================ -->
    <div class="container-fluid py-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-table me-2"></i>Academic Tabulation Sheet</h5>
            </div>
            <div class="card-body">
                <form id="tabulationFilterForm" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Class</label>
                        <select id="tab_class" class="form-select" onchange="handleClassChange(this.value)">
                            <option value="">Loading Classes...</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Medium</label>
                        <select id="tab_medium" class="form-select" onchange="checkFilters()">
                            <option value="">Select Medium</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Section</label>
                        <select id="tab_section" class="form-select" onchange="checkFilters()" disabled>
                            <option value="">Select Class First</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Exam Term</label>
                        <select id="tab_term" class="form-select" onchange="checkFilters()">
                            <option value="">Loading Terms...</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
        <!--========== loder spinner  =======-->
        <div id="loader" class="d-none text-center my-5">
            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;"></div>
            <p class="mt-2 fw-bold text-primary">Processing Data...</p>
        </div>

        <div class="card shadow-sm border-0 d-none" id="tabulationResultCard">
            <div class="card-header bg-white py-3">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="mb-0 text-primary fw-bold">
                            <i class="fas fa-list-ol me-2"></i>Class Broad Sheet
                        </h5>
                        <div id="tabulationInfo" class="mt-2 d-flex flex-wrap gap-2">
                        </div>
                    </div>
                    <!--=========== for excel /csv/ pdf for whole  ==========-->
                    <div class="col-auto d-flex gap-2">
                        <button class="btn btn-sm btn-outline-primary" onclick="exportToExcel()">
                            <i class="fas fa-file-excel me-1"></i> Excel
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="downloadAllMarksheetsPDF()">
                            <i class="fas fa-file-pdf me-1"></i> Print All PDF
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="downloadTabulationPDF()">
                            <i class="fas fa-print me-1"></i> Table PDF
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0 align-middle" id="tabulationTable">
                        <thead class="table-light small fw-bold text-uppercase" id="tabHead">
                        </thead>
                        <tbody id="tabBody" class="small">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</main>

<!-- =================== exam terms modal =================== -->
<div class="modal fade" id="addExamModal" tabindex="-1" aria-labelledby="addExamModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="addExamModalLabel"><i class="fas fa-edit me-2"></i>Create New Exam Term</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form id="examTermForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="term_name" class="form-label fw-bold">Exam Term Name</label>
                        <input type="text" class="form-control" id="term_name" name="term_name"
                            placeholder="e.g. First Unit Test, Annual Exam" required>
                        <div class="form-text">Give a clear name that will appear on report cards.</div>
                    </div>
                    <div class="mb-3">
                        <label for="term_name" class="form-label fw-bold">Total Marks</label>
                        <input type="number" class="form-control" id="max_marks" name="max_marks"
                            placeholder="e.g. 25,50,100" required>

                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label fw-bold">Initial Status</label>
                        <select class="form-select" name="status" id="status">
                            <option value="1">Active (Allow Mark Entry)</option>
                            <option value="0">Inactive (Hidden)</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveExamBtn">
                        <span id="btnText">Save Exam Term</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--=============== exam term edit modal ====================== -->
<div class="modal fade" id="editExamModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="editExamForm" class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">Edit Exam Term</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="edit_term_id">

                <div class="mb-3">
                    <label class="form-label fw-bold">Term Name</label>
                    <input type="text" name="term_name" id="edit_term_name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Max Marks</label>
                    <input type="number" name="max_marks" id="edit_max_marks" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Status</label>
                    <select name="status" id="edit_status" class="form-select">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-info text-white">Update Changes</button>
            </div>
        </form>
    </div>
</div>
<!-- =====================marks entry ================== -->
<div class="modal fade" id="markEntryModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <form id="saveMarksForm" class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalTitle">
                    <i class="fas fa-edit me-2"></i> Mark Entry Sheet
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="bg-light border-bottom px-4 py-2 d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-secondary me-1" id="display_class">Class: --</span>
                        <span class="badge bg-secondary me-1" id="display_section">Section: --</span>
                        <span class="badge bg-secondary me-1" id="display_subject">Subject: --</span>
                    </div>
                    <div>
                        <span class="badge bg-primary" id="display_term">Term: --</span>
                    </div>
                </div>
                <input type="hidden" name="class_id" id="hidden_class_id">
                <input type="hidden" name="section_id" id="hidden_section_id">
                <input type="hidden" name="subject_id" id="hidden_subject_id">
                <input type="hidden" name="term_id" id="hidden_term_id">

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Roll</th>
                                <th>Student Name</th>
                                <th style="width: 150px;">Theory</th>
                                <th style="width: 150px;">Practical</th>
                                <th class="pe-4 text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody id="studentMarksTable">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success px-4">
                    <i class="fas fa-save me-2"></i> Save All Marks
                </button>
            </div>
        </form>
    </div>
</div>
<?php include_once('includes/footer.php') ?>