<?php
require_once('includes/auth_check.php');
include_once('includes/header.php');
include_once('includes/sidebar.php');

?>


<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">Dashboard</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Add Students</li>
        </ol>

        <div class="row ">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="m-0 fw-bold text-primary">Student List</h6>
                <div>

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#studentModal">
                        <i class="fas fa-user-plus me-1"></i> Add Student
                    </button>
                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#promotionModal">
                        <i class="fas fa-graduation-cap me-1"></i> Bulk Promotion
                    </button>
                </div>
            </div>
            <div class="col">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3">
                        <div class="row align-items-center">
                            <div class="col-xl-4 col-lg-5">
                                <div class="d-flex align-items-center gap-3">

                                    <div class="d-flex align-items-center gap-2 border-start ps-3">
                                        <small class="text-muted text-nowrap">Session:</small>
                                        <select id="session_switcher" class="form-select form-select-sm border-primary"
                                            style="width: 160px;" onchange="fetchStudentList()">
                                            <option value="1"> </option>
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-8 col-lg-7">
                                <div class="d-flex flex-wrap gap-2 justify-content-end align-items-center">
                                    <div style="width: 200px;" >
                                        
                                        <select id="filter_medium" class="form-select form-select-sm" onchange="fetchStudentList()">
                                            <option value="">All Mediums</option>
                                           
                                        </select>
                                    </div>
                                    <div style="width: 200px;" class="input-group">
                                        <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
                                        <input type="text" id="studentSearch"
                                            class="form-control border-start-0 form-control-sm"
                                            placeholder="Search name or roll...">
                                    </div>

                                    <div style="width: 140px;">
                                        <select id="classFilter" class="form-select form-select-sm"
                                            onchange="fetchStudentList()">
                                            <option value="">All Classes</option>
                                        </select>
                                    </div>

                                    <div style="width: 140px;">
                                        <select id="filter_section" class="form-select form-select-sm"
                                            onchange="fetchStudentList()">
                                            <option value="">All Sections</option>
                                        </select>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-success shadow-sm"
                                        onclick="exportToExcel()">
                                        <i class="fas fa-file-excel me-1"></i> Export
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Roll No</th>
                                    <th>Photo</th>
                                    <th>Student Name</th>
                                    <th>Class,Section Name & Medium</th>
                                    

                                    <th>Parent Phone</th>
                                    <th>Status</th>

                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="studentTableBody">
                            </tbody>
                        </table>
                        <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                            <div class="text-muted small">
                                Showing page <span id="stu_current_page_text">1</span> of <span
                                    id="stu_total_pages_text">1</span>
                            </div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item"><button class="page-link" id="stu_prev_btn"
                                            onclick="changeStuPage(-1)">Previous</button></li>
                                    <li class="page-item"><button class="page-link" id="stu_next_btn"
                                            onclick="changeStuPage(1)">Next</button></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- ==============add student modal ================== -->
<div class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header btn-primary text-white">
                <h5 class="modal-title" id="studentModalLabel">Register New Student</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="studentForm" method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label>Student Name *:</label>
                            <input type="text" class="form-control" id="student_name" name="student_name" required>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Father Name *:</label>
                            <input type="text" class="form-control" id="father_name" name="father_name" required>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Mother Name (optional):</label>
                            <input type="text" class="form-control" id="mother_name" name="mother_name">
                        </div>
                        <div class="col-md-4 mb-2">
                            <label for="dob">Date of Birth *:</label>
                            <input type="date" id="dob" name="dob" class="form-control" required>
                        </div>

                        <div class=" col-md-4 mb-2">
                            <label for="admission_date">Admission Date *:</label>
                            <input type="date" id="admission_date" name="admission_date" class="form-control" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Class * :</label>
                            <select class="form-control" id="class_id" name="class_id" required>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Medium <span class="text-danger">*</span></label>
                            <select name="medium_id" id="medium_id" class="form-select" required>
                                <option value="">Select Medium</option>
                            </select>
                        </div>
                        <!-- <div class="col-md-4 mb-3" id="stream_container" style="display: none;">
                            <label class="fw-bold text-primary">Select Stream *:</label>
                            <select class="form-control border-primary" id="stream_id" name="stream_id">
                                <option value="">Loading Streams...</option>
                            </select>
                        </div> -->
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Section</label>
                            <select id="student_section" name="section_id" class="form-select" disabled required>
                                <option value="">Select Class First</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Roll No *:</label>
                            <input type="number" class="form-control" id="roll_no" name="roll_no" required>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Gender *:</label>
                            <select class="form-control" id="gender" name="gender" required>
                                <option value="">Choose...</option>
                                <option>Male</option>
                                <option>Female</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Parent Phone *:</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white">+91</i></span>
                                <input type="text" class="form-control" id="parent_phone" name="parent_phone"
                                    placeholder="Enter 10 digits" maxlength="13"
                                    oninput="this.value = this.value.replace(/[^0-9+]/g, '')">
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label>Address *:</label>
                            <textarea class="form-control" id="address" name="address" rows="2"></textarea>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">
                                Student Photo :<span class="">*</span>
                            </label>
                            <input type="file" id="student_photo" name="student_photo" class="form-control"
                                accept="image/png, image/jpeg">
                            <small class="text-muted">
                                JPG or PNG only, max 300KB
                            </small>
                        </div>
                    </div>

                    <div class="modal-footer px-0 pb-0 mt-3">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary px-5" onclick="addStudent()">Save Student</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- ==========view Student modal   ==========-->

<div class="modal fade" id="viewStudentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Student Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="viewStudentContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" onclick="downloadStudentPDF()">
                    <i class="fas fa-file-pdf"></i> Download PDF
                </button>
            </div>
        </div>
    </div>
</div>
<div id="pdf-buffer" style="position: absolute; left: -9999px; top: -9999px; width: 700px; background: white;"></div>
<!-- ===========promotion table ============ -->
<div class="modal fade" id="promotionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header btn-success text-white">
                <h5 class="modal-title">Bulk Student Promotion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5">
                        <label class="fw-bold mb-2">PROMOTE FROM (Current)</label>
                        <select id="promote_from_class" class="form-select" required>
                            <option value="">Select Class</option>
                        </select>
                        <div class="form-text mt-1 text-muted">All students in this class will be listed.</div>
                    </div>

                    <div class="col-md-2 text-center d-flex align-items-center justify-content-center">
                        <i class="fas fa-arrow-right fa-2x text-muted"></i>
                    </div>

                    <div class="col-md-5">
                        <label class="fw-bold mb-2">PROMOTE TO (Next Session)</label>
                        <select id="promote_to_class" class="form-select mb-2" 
                                onchange="handleToClassChange(this.value)" required>
                            <option value="">Select Next Class</option>
                        </select>

                        <div id="to_section_container" style="display: none;">
                            <label class="small fw-bold">Assign to Section (Optional)</label>
                            <select id="promote_to_section" class="form-select mb-2">
                                <option value="">Select Section</option>
                            </select>
                        </div>

                        <label class="small fw-bold">Select New Session</label>
                        <select id="next_academic_year" class="form-select border-primary" required>
                            <option value="">Select Session</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="modal-body border-top">
                <div id="promotion_preview_area" style="display:none;">
                    <h6 class="fw-bold text-primary">Select Students to Promote:</h6>
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-sm table-bordered">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th width="50">
                                        <input type="checkbox" id="select_all_promo" checked onclick="toggleAllPromo(this)">
                                    </th>
                                    <th>Roll No</th>
                                    <th>Student Name</th>
                                </tr>
                            </thead>
                            <tbody id="promo_student_list"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-success text-white" onclick="previewPromotion()">Preview List</button>
                <button type="button" class="btn btn-primary" id="btn_finish_promo" style="display:none;" onclick="promoteStudents()">Confirm & Promote</button>
            </div>
        </div>
    </div>
</div>

<?php include_once('includes/footer.php') ?>