<?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>

        <div class="row">
            <!-- fee types list  -->
            <div class="d-flex justify-content-between mb-1">
                <h5> Fee Types List</h5>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feeTypesModal">
                    <i class="fas fa-plus"></i> Configure Fee
                </button>
            </div>
            <div class="col-md-12">
                <div class="card shadow-sm">
                    <div class="row ">
                        <div class="mb-3 mt-2 col-md-3 px-3">
                            <div class="input-group">
                                <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control border-start-0"
                                    placeholder="Search fee or class..." onkeyup="searchFees(this.value)">
                            </div>
                        </div>
                        <div class="mb-3 mt-2 col-md-3">

                            <select id="filter_class" class="form-select" onchange="loadFeeTypesList()">
                                <option value="">All Classes</option>
                            </select>
                        </div>

                        <div class="mb-3 mt-2 col-md-3">

                            <select id="filter_medium" class="form-select" onchange="loadFeeTypesList()">
                                <option value="">All Mediums</option>
                            </select>
                        </div>
                        <div class="mb-3 mt-2 col-md-3">
                            <select id="filter_academic_year" class="form-select" onchange="loadFeeTypesList(1)">
                            </select>
                        </div>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle mb-0" id="feeTypesTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Fee Type Name</th>
                                        <th>Academic Year</th>
                                        <th>Class Name & Medium</th>
                                        <th>Description</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="feeTypesList">
                                </tbody>
                            </table>
                        </div>
                        <div id="seachpagination" class="d-flex justify-content-center mt-3 pb-3"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- fee end section  -->
    <div class="row my-5 mx-4">
        <div class=" card bg-light py-5">
            <button type="button" class="btn btn-sm btn-primary text-white " onclick="openAssignFeeModal()">
                <i class="fas fa-user-plus"></i> Assign Fee to Class
            </button>
        </div>
    </div>



    <div class="row py-3 my-5">
        <div class="col">
            <div class="card shadow-md mx-4">
                <div class="card-header">
                    <h5> Student Fee Assign List</h5>

                </div>
                <div class="card-body">
                    <div class="row mb-3 g-2">
                        <div class="row d-flex flex-end justify-content-between align-items-end g-2">

                            <div class="col-md-2">
                                <label class="small fw-bold">Search</label>
                                <div class="input-group ">
                                    <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
                                    <input type="text" id="feeSearchInput" class="form-control border-start-0"
                                        placeholder="Search student...">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="small fw-bold">Select Academic Year</label>
                                <select id="feeFilterYear" class="form-select border-primary"
                                    onchange="loadAssignedFees(1, document.getElementById('feeSearchInput').value)">
                                    <option value="">Loading years...</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold small">Class</label>
                                <select id="filter_class_id" class="form-select form-select-sm"
                                    onchange="handleSmartFilterChange()">
                                    <option value="">All Classes</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold small">Medium</label>
                                <select id="filter_medium_id" class="form-select form-select-sm border-info"
                                    onchange="loadAssignedFees()">
                                    <option value="">All Mediums</option>
                                </select>
                            </div>
                           

                            <div class="col-md-1">
                                <label class="form-label fw-bold small">Roll No</label>
                                <input type="number" id="filter_roll_no" class="form-control form-control-sm"
                                    placeholder="Ex: 101" oninput="loadAssignedFees()">
                            </div>

                            <div class="col-md-1">
                                <button class="btn btn-sm btn-outline-secondary w-100" onclick="resetSmartFilters()"
                                    title="Reset Filters">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover table-bordered border-light shadow-sm">
                            <thead class="table-dark">
                                <tr>
                                    <th>Id</th>
                                    <th>Student Name</th>
                                    <th>Class Name</th>
                                    <th>Fee Type</th>
                                    <th>Amount</th>
                                    <th>Due date</th>

                                    <th>Due Month</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="assignedFeesList"></tbody>
                        </table>
                    </div>
                    <div id="paginationControls" class="mt-3 d-flex justify-content-center"></div>
                </div>

            </div>
        </div>
    </div>
    <hr>


</main>
<!--============= add fee types modal =========== -->
<div class="modal fade" id="feeTypesModal" tabindex="-1" aria-labelledby="feeTypesModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header btn-primary text-white">
                <h5 class="modal-title" id="feeTypesModalLabel">Add Fee Structure</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="fee_types_form">
                    <div class="mb-3">
                        <label for="fee_title" class="form-label">Fee Type Name *</label>
                        <select class="form-select" id="fee_title" name="fee_title" required
                            onchange="toggleTransportFields(this.value)">
                            <option value="">-- Select Fee Type --</option>
                            <option value="Tuition Fee">Tuition Fee</option>
                            <option value="Admission Fee">Admission Fee</option>
                            <option value="Hostel Fee">Hostel Fee</option>
                            <option value="Transport Fee">Transport Fee</option>

                        </select>
                    </div>

                    <div id="transport_details" class="p-3 mb-3 border rounded bg-light" style="display: none;">
                        <label for="km_range" class="form-label">Distance Range (KM) *</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="km_range" name="km_range"
                                placeholder="e.g. 5">
                            <span class="input-group-text">KM</span>
                        </div>
                        <small class="text-muted">Enter the distance this fee covers.</small>
                    </div>

                    <div class="mb-3">
                        <label>Academic Year *</label>
                        <select id="academic_year_id" name="academic_year_id" class="form-select" required>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Class * :</label>
                        <select class="form-control" id="class_id" name="class_id" required>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="medium_id" class="form-label">Medium *</label>
                        <select class="form-select" id="medium_id" name="medium_id" required>
                            <option value="">-- Select Medium --</option>
                        </select>
                        <small class="text-muted">Select if this fee applies to a specific medium.</small>
                    </div>

                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount *</label>
                        <input type="number" class="form-control" id="amount" name="amount" required>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description (Optional)</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="addFeeTypes()">Add Fee Type</button>
            </div>
        </div>
    </div>
</div>
<!-- Edit Fee Type Modal -->
<div class="modal fade" id="editFeeModal" tabindex="-1" aria-labelledby="editFeeModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header btn-primary text-white">
                <h5 class="modal-title" id="editFeeModalLabel">Edit Fee Type</h5>
                <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Edit Form -->
                <form id="editFeeForm">
                    <input type="hidden" id="edit_fee_id" name="id">

                    <div class="mb-3">
                        <label for="edit_fee_title" class="form-label">Fee Type Name</label>
                        <select class="form-select" id="edit_fee_title" name="edit_fee_title" required
                            onchange="toggleEditTransportFields(this.value)">
                            <option value="Tuition Fee">Tuition Fee</option>
                            <option value="Admission Fee">Admission Fee</option>
                            <option value="Hostel Fee">Hostel Fee</option>
                            <option value="Transport Fee">Transport Fee</option>
                        </select>
                    </div>

                    <div id="edit_transport_details" class="p-3 mb-3 border rounded bg-light" style="display: none;">
                        <label for="edit_km_range" class="form-label">Distance Range (KM) *</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="edit_km_range" name="edit_km_range">
                            <span class="input-group-text">KM</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="edit_class_id" class="form-label">Class</label>
                        <select class="form-select" id="edit_class_id" name="edit_class_id" required>
                            <option value="">Select Class</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_medium_id" class="form-label">Medium *</label>
                        <select class="form-select" id="edit_medium_id" name="edit_medium_id" required>
                            <option value="">-- Select Medium --</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_academic_year_id" class="form-label">Academic Year</label>
                        <select class="form-select" id="edit_academic_year_id" name="edit_academic_year_id" disabled>
                        </select>
                        <small class="text-muted">Year cannot be changed after creation.</small>
                    </div>

                    <div class="mb-3">
                        <label for="edit_description" class="form-label">Description</label>
                        <textarea class="form-control" id="edit_description" name="edit_description"
                            rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_amount" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="edit_amount" name="edit_amount" required>
                    </div>

                    <button type="button" class="btn btn-primary w-100" onclick="updateFeeType()">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!--==================== fee assign modal and sbmission ==================== -->
<div class="modal fade" id="assignFeeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header btn-primary ">
                <h5 class="text-white">Assign Fee to Class</h5>
            </div>
            <div class="modal-body">
                <form id="assignFeeForm">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="fw-bold">Class</label>
                            <select class="form-select" id="assign_class_id" name="class_id"
                                onchange="loadStudentsAndFees()">
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="fw-bold">Medium</label>
                            <select class="form-select border-info" id="assign_medium_id" name="medium_id"
                                onchange="loadStudentsAndFees()">
                                <option value="">-- Select Medium --</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="fw-bold">Academic Year</label>
                            <select class="form-select" id="assign_session_id" name="session_id"
                                onchange="loadStudentsAndFees()">
                            </select>
                        </div>

                        <hr class="my-3">

                        <div class="col-md-4">
                            <label class="fw-bold text-success">Select Fee Type</label>
                            <select class="form-select border-success" id="assign_fee_id" name="fee_id">
                                <option value="">Select Class/Medium First</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="fw-bold">Fee Months (Select Multiple)</label>
                            <select class="form-select" name="due_months[]" id="due_months" multiple
                                style="height: 100px;">
                                <option value="January">January</option>
                                <option value="February">February</option>
                                <option value="March">March</option>
                                <option value="April">April</option>
                                <option value="May">May</option>
                                <option value="June">June</option>
                                <option value="July">July</option>
                                <option value="August">August</option>
                                <option value="September">September</option>
                                <option value="October">October</option>
                                <option value="November">November</option>
                                <option value="December">December</option>
                            </select>
                            <small class="text-muted">Hold Ctrl (Cmd) to select multiple months</small>
                        </div>

                        <div class="col-md-4">
                            <label class="fw-bold">Base Due Date</label>
                            <input type="date" class="form-control" name="due_date" id="due_date" required>
                            <small class="text-muted">Common date for selected months</small>
                        </div>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Student List</h6>
                        <span class="badge bg-secondary" id="student_count">0 Students Found</span>
                    </div>

                    <div class="table-responsive" style="max-height: 300px; border: 1px solid #dee2e6;">
                        <table class="table table-sm table-hover table-bordered mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th width="40">
                                        <input type="checkbox" id="checkAll" >
                                    </th>
                                    <th>Roll No</th>
                                    <th>Student Name</th>
                                    <th>Medium</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="student_list_area">
                                <tr>
                                    <td colspan="5" class="text-center">Select Class and Medium to load students</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="submitFeeAssignment()">Confirm
                    Assignment</button>
            </div>
        </div>
    </div>
</div>
<!-- fee payment modal  -->
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header btn-primary text-white">
                <h5 class="modal-title" id="paymentModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="bulkPaymentForm">
                <div class="modal-body p-4">
                    <div class="row mb-4 gx-3">
                        <div class="col-12">
                            <div
                                class="p-3 border-start border-4 border-primary bg-light rounded shadow-sm d-flex justify-content-between align-items-center">
                                <div>
                                    <small class="text-muted text-uppercase fw-bold d-block mb-1">Student
                                        Details</small>
                                    <h5 class="mb-0 fw-bold text-dark"><span id="info_name">---</span></h5>
                                    <small class="text-secondary">Parent: <span id="info_father">---</span></small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-primary px-3 py-2 mb-1">Class: <span
                                            id="info_class">---</span></span>
                                    <div class="text-muted small">Roll No: <span id="info_roll"
                                            class="fw-bold text-dark">---</span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mb-4">
                        <table class="table table-hover align-middle border">
                            <thead class="table-dark">
                                <tr>
                                    <th width="80" class="text-center">Select</th>
                                    <th>Fee Description</th>
                                    <th width="150" class="text-end">Balance</th>
                                </tr>
                            </thead>
                            <tbody id="pending_fees_table" class="border-top-0">
                            </tbody>
                        </table>
                    </div>

                    <div class="row g-4">
                        <div class="col-md-7">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold small text-uppercase">Payment Mode</label>
                                    <select class="form-select border-primary-subtle" id="bulk_payment_mode">
                                        <option value="Cash">💵 Cash</option>
                                        <option value="UPI">📱 UPI / QR</option>
                                        <option value="Bank">🏦 Bank Transfer</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold small text-uppercase text-danger">Apply
                                        Discount</label>
                                    <div class="input-group">
                                        <input type="number" id="discount_percent"
                                            class="form-control border-danger-subtle" placeholder="0" min="0" max="100">
                                        <span class="input-group-text bg-danger text-white">%</span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold small text-uppercase">Internal Remarks</label>
                                    <textarea id="payment_remarks" class="form-control border-primary-subtle" rows="2"
                                        placeholder="Note down cheque numbers, transaction IDs, or who paid..."></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="card border-0 bg-success bg-opacity-10 h-100">
                                <div class="card-body d-flex flex-column justify-content-center text-end p-4">
                                    <div class="mb-2">
                                        <span class="text-muted small text-uppercase">Sub-Total:</span>
                                        <h5 class="text-dark mb-0"><span id="original_total">₹0.00</span></h5>
                                    </div>
                                    <div class="mb-3">
                                        <span class="text-danger small text-uppercase">Discount Deduction:</span>
                                        <h6 class="text-danger mb-0">- <span id="discount_amount_display">₹0.00</span>
                                        </h6>
                                    </div>
                                    <hr class="my-2">
                                    <div>
                                        <span class="text-success small fw-bold text-uppercase">Net Payable:</span>
                                        <h2 class="text-success fw-bold mb-0" id="grand_total">₹0.00</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer bg-light border-top-0 px-4 pb-4">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-lg px-5 shadow">
                        Confirm Payment & Print Receipt <i class="ms-2 bi bi-printer"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php include_once('includes/footer.php') ?>filter_class_id