@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Fee Mangements</title>

@include('datepicker')
@section('main-content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<style>
  /* .layout-wrapper{
      position: fixed;
      overflow-y: hidden;
      height: 150% !important; 
    } */
  .input {
    color: #697a8d;
  }

  #loader {
    text-align: center;
    /* Align the loader to the center */
    margin-left: 15px;
    /* Adjust this value to manage space between loader and button */
    width: auto;
    display: inline-block;
  }

  #loader img {
    width: 30px;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color: #697a8d !important;
  }

  #teacherid {
    display: inline-block !important;
    width: auto !important;
    margin-left: 5px;
    border-color: #697a8d;
  }

  .select2-selection {
    border-color: #dae0e7 !important;
  }

  /* Styles for the Select2 dropdown when focused or hovered */
  .select2-container--focus .select2-selection,
  .select2-selection:hover {
    border-color: #696cff !important;
  }

  /* Styles for the Select2 dropdown when active (clicked) */
  .select2-container--open .select2-selection {
    border-color: #696cff !important;
  }

  .select2-selection--single .select2-selection__rendered {
    color: #697a8d !important;
  }

  .ig_outer .input-group span.input-group-text {
    max-width: 44px;
    flex: 0 0 44px;
  }

  .ig_outer .input-group .select2-container--default {
    max-width: calc(100% - 44px);
    flex: 0 0 calc(100% - 44px);
  }

  .ig_outer .input-group .select2-container--default span {
    height: 100%;
    display: block;
  }

  .ig_outer .input-group .select2-container--default span.select2-search--inline {
    display: inline-block;
  }

  .ig_outer .input-group .select2-container--default span.select2-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .ig_outer .input-group span.input-group-text,
  .ig_outer .input-group .select2-container--default {
    height: 34px;
  }

  .ig_outer .input-group .select2-container--default span.select2-selection__rendered {
    display: flex;
    align-items: center;
  }

  .ig_outer .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
  }
</style>

<div class="content-wrapper">
  <!-- Content -->
  <div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add Fee Details</h4>
    <!-- Basic Layout -->
    <div class="row">
      <div class="col-xl d-none">
        <div class="card mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Fee Details</h5>
            <!-- <small class="text-muted float-end">Merged input group</small> -->
          </div>
          <div class="card-body">
            @if(!$additional_fee_charges)
            <h4>Class creation is required.</h4>
            <a href="{{url('/show-classes')}}">Go To Class Section Under Fee Plan</a>
            @else
            <form>
              <div class="mb-3 ig_outer">
                <label class="form-label" for="basic-icon-default-fullname">Parent List</label>
                <div class="input-group">
                  <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                  <select name="" id="parentid" class="form-select input form-control-line" multiple>
                  </select>
                </div>
                <button class="btn btn-info mt-2 d-none" id="remove_parent">Remove Parent <span class="ps-1" style="color: red;"> x</span></button>
              </div>
              <div class="mb-3 ig_outer">
                <label class="form-label" for="basic-icon-default-fullname">Student List</label>
                <div class="input-group">
                  <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                  <select name="" id="studentid" class="form-select input form-control-line">
                  </select>
                </div>
                <button class="btn btn-info mt-2 d-none" id="remove_student">Remove Student <span class="ps-1" style="color: red;"> x</span></button>
              </div>

              <div class="mb-3">
                <label class="form-label" for="basic-icon-default-fullname">Class</label>
                <div class="input-group">
                  <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                  <input class="form-control input form-control" id="student_class" type="text" placeholder="Student Class" readonly autocomplete="off" />
                </div>
              </div>

              <div class="form-group loaderbtn_div">
                <button type="button" class="btn btn-success text-white" id="fetch_details_btn" disabled>Fetch details</button>
                <div class="loaderDiv d-none" id="loader">
                  <!-- Your loader HTML or spinner goes here -->
                  <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                </div>
              </div>
              <span class="payment_section_show d-none">
                <div class="mt-3 ig_outer">
                  <label class="form-label" for="basic-icon-default-fullname">Payment Type</label>
                  <div class="input-group payment_type_div">
                    <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                    <select name="" id="payment_type_id" class="form-select input form-control-line">
                      <option value="" selected disabled hidden>Select Payment Type</option>
                      <option value="0">Monthly</option>
                      <option value="1">Quarterly</option>
                      <option value="2">Semi Annual</option>
                      <option value="3">Annual</option>
                    </select>
                  </div>
                  <button class="btn btn-info mt-2 d-none" id="remove_payment_type" disabled>Remove Payment Type<span class="ps-1" style="color: red;"> x</span></button>
                  <div class="row ms-0 mt-3">
                    <div class="col-12 col-md-6 p-1 ps-0 pe-3">
                      <label class="form-label">Start Month</label>
                      <input class="form-control form-input" type="text" value="" id="start_month" readonly autocomplete="off" />
                    </div>

                    <div class="col-12 col-md-6 p-1 ps-0 pe-3">
                      <label class="form-label">End Month</label>
                      <input class="form-control form-input" type="text" value="" id="end_month" readonly autocomplete="off" />
                    </div>

                    <div class="p-1 ps-0 pe-3">
                      <div class="col-12 col-md-6">
                        <label class="form-label">Want Transport Facility ?</label>
                      </div>
                    </div>
                    <div class="col-2 col-xs-12 d-flex flex-wrap justify-content-between transportDiv">
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="radioBtn" id="radioBtn1" value="yes" onclick="handleRadioChange(event)">
                        <label class="form-check-label" for="radioBtn1">
                          Yes
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="radioBtn" id="radioBtn2" value="no" onclick="handleRadioChange(event)" checked>
                        <label class="form-check-label" for="radioBtn2">
                          No
                        </label>
                      </div>
                    </div>
                  </div>
                  <br />
                  <div class="row finalFeeStructure">

                  </div>
                </div>
                <button type="button" class="btn btn-success text-white mt-3 d-none" id="save_details_btn" disabled>Add Fee</button>
              </span>
            </form>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / Content -->
</div>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
  let parent_list = null,
    student_list = null,
    course_list = null,
    batch_list = null,
    current_parent = null,
    current_parent_student_list = null,
    calc_fee = null,
    student_classes = null,
    pending_fee = null,
    start_month = null,
    end_month = null,
    include_transport_charges = "no",
    transport_charges = 0,
    annual_charges = 0,
    transport_fee = 0;
  let monthly_fee_to_pay = 0,
    quarterly_fee_to_pay = 0,
    semi_annual_fee_to_pay = 0,
    annual_fee_to_pay = 0;

  function handleRadioChange(event) {
    $(".remove_transport_fee").remove();
    $(".finalFeeStructure").next(".text-info").remove();

    let months = $("#payment_type_id").val();
    let type = "",
      tution_fee = 0;
    transport_fee = 0;

    if (months == 0) {
      months = 1;
      type = "Monthly";
      transport_fee = transport_charges * months * 30;
      tution_fee = monthly_fee_to_pay;
    } else if (months == 1) {
      months = 3;
      type = "Quaterly";
      transport_fee = transport_charges * months * 30;
      tution_fee = quarterly_fee_to_pay;
    } else if (months == 2) {
      months = 6;
      type = "Semi Annual";
      transport_fee = transport_charges * months * 30;
      tution_fee = semi_annual_fee_to_pay;
    } else if (months == 3) {
      months = 12;
      type = "Annual";
      transport_fee = transport_charges * months * 30;
      tution_fee = annual_fee_to_pay;
    }

    if (event.target.value == "yes") {
      include_transport_charges = "yes";

      if (months != "" && type != "") {
        $(".transportDiv")
          .after(`<div class="text-info remove_transport_fee">${type} calculated transport fee will be: ₹${transport_charges*months*30}</div>`);
      }

    } else {
      include_transport_charges = "no";
      transport_fee = 0;
    }

    if (months != "" && type != "") {
      let finalFeeStructureHTML = `<div class="text-info"><strong>Total Fee will be: </strong>`;
      let grandTotal = 0;
      if (annual_charges != 0) {
        grandTotal += Number(annual_charges);
        finalFeeStructureHTML += `<div>Annual Fee: ₹${annual_charges}</div>`;
      }
      if (tution_fee != 0) {
        grandTotal += Number(tution_fee);
        finalFeeStructureHTML += `<div>Tution Fee: ₹${tution_fee}</div>`;
      }
      if (transport_fee != 0) {
        grandTotal += Number(transport_fee);
        finalFeeStructureHTML += `<div>Transport Fee: ₹${transport_fee}</div>`;
      }

      finalFeeStructureHTML += `<div>Grand Total: ₹${grandTotal}</div></div>`;
      $('.finalFeeStructure').after(finalFeeStructureHTML);
    }
  }

  jQuery(function($) {
    $('#courseid').select2({
      placeholder: 'Select Course',
      multiple: false
    });

    $("#batchid").select2({
      placeholder: 'Select Batch',
      multiple: true
    });
    $('#courseid').prop("disabled", true);
    $('#batchid').prop("disabled", true);

    $('#parentid').select2({
      placeholder: 'Select Parent',
      multiple: false
    });

    $('#studentid').select2({
      placeholder: 'Select Student',
      multiple: false
    });

    $('#payment_type_id').select2({
      placeholder: 'Select Payment Type',
      multiple: false
    });
  });

  function getParents() {
    $.ajax({
      url: "/getParentList",
      type: "GET",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {

        $('#parentid').empty();
        parent_list = response.parent_list;

        if (response.parent_list.length > 0) {
          $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
          $('#parentid').prop("disabled", false);
        }

        $.each(response.parent_list, function(key, value) {
          $('#parentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
        });

        if (response.parent_list.length == 0) {
          $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
          $('#parentid').prop("disabled", true);
        }
      },
      error: function() {
        console.log("Something went wrong");
      },
      complete: function() {

      }
    });
  }
  getParents();

  function getStudents() {
    $.ajax({
      url: "/getStudentList",
      type: "GET",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        $("#studentid").empty();
        student_list = response.student_list;

        if (response.student_list.length > 0) {
          $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
          $('#studentid').prop("disabled", false);
        }

        $.each(response.student_list, function(key, value) {
          $('#studentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
        });

        if (response.student_list.length == 0) {
          $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
          $('#studentid').prop("disabled", true);
        }
      },
      error: function(resp) {

      },
      complete: function(resp) {

      }

    });
  }
  getStudents();

  function getClasses() {
    $("#courseid").prop("disabled", true);
    $.ajax({
      url: "/getCourseList",
      type: "GET",
      header: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        $("#courseid").empty();
        course_list = response.course_list;

        if (response.course_list.length > 0) {
          $('#courseid').append(`<option selected disabled hidden>Select Course</option>`);
        }

        $.each(response.course_list, function(key, value) {
          $('#courseid').append(`<option value="${value['id']}">${value['coursename']} ( ${value['id']} )</option>`);
        });

        if (response.course_list.length == 0) {
          $('#courseid').append(`<option selected disabled hidden>No Class Found</option>`);
          $('#courseid').prop("disabled", true);
        }
      },
      error: function(resp) {

      },
      complete: function(resp) {

      }
    });
  }

  function resetParents() {
    $('#parentid').empty();
    $("#studentid").empty();
    $('#parentid').prop("disabled", true);
    $('#studentid').prop("disabled", true);
    $("#fetch_details_btn").prop('disabled', true);
    $("#student_class").val("Select Class");

    if (parent_list.length > 0) {
      $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
      $('#parentid').prop("disabled", false);
      $.each(parent_list, function(key, value) {
        $('#parentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
      });
    } else if (parent_list.length == 0) {
      $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
      $('#parentid').prop("disabled", true);
    }

    if (student_list.length > 0) {
      $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
      $('#studentid').prop("disabled", false);
      $.each(student_list, function(key, value) {
        $('#studentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
      });
    } else if (student_list.length == 0) {
      $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
      $('#studentid').prop("disabled", true);
    }
  }

  function resetStudents() {
    $("#studentid").empty();
    $("#fetch_details_btn").prop('disabled', false);
    $("#student_class").val("Select Class");

    if (current_parent != null) {
      if (current_parent_student_list.length > 0) {
        $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
        $('#studentid').prop("disabled", false);
        $.each(current_parent_student_list, function(key, value) {
          $('#studentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
        });
      } else if (current_parent_student_list.length == 0) {
        $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
        $('#studentid').prop("disabled", true);
      }
    } else {
      $("#parentid").prop("disabled", false);
      $('#parentid').empty();

      if (parent_list.length > 0) {
        $('#parentid').append(`<option selected disabled hidden>Select Parent</option>`);
        $('#parentid').prop("disabled", false);
        $.each(parent_list, function(key, value) {
          if (value['id'] == current_parent) {
            $('#parentid').append(`<option value="${value['id']}" selected>${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
          } else {
            $('#parentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
          }
        });
      } else if (parent_list.length == 0) {
        $('#parentid').append(`<option selected disabled hidden>No Parent Found</option>`);
        $('#parentid').prop("disabled", true);
      }

      if (student_list.length > 0) {
        $('#studentid').append(`<option selected disabled hidden>Select Student</option>`);
        $('#studentid').prop("disabled", false);
        $.each(student_list, function(key, value) {
          $('#studentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
        });
      } else if (student_list.length == 0) {
        $('#studentid').append(`<option selected disabled hidden>No Student Found</option>`);
        $('#studentid').prop("disabled", true);
      }
    }
  }

  function resetPaymentType() {
    $("#remove_payment_type").prop("disabled", true);
    $("#remove_payment_type").addClass("d-none");
    $("#save_details_btn").prop("disabled", true).addClass('d-none');
    $("#payment_type_id").empty();
    $("#payment_type_id").append(`<option value="" selected disabled hidden>Select Payment Type</option>
                            <option value="0">Monthly</option>
                            <option value="1">Quarterly</option>
                            <option value="2">Semi Annual</option>
                            <option value="3">Annual</option>`);
    $("#end_month").val("");
    $(".remove_fee_per_month").remove();
    $(".remove_transport_fee").remove();
  }

  $("#parentid").on("change", function(e) {
    e.stopPropagation();
    $("#studentid").prop("disabled", true);
    $("#parentid").prop("disabled", true);
    $('.removefetchdetails').remove();
    $(".payment_section_show").addClass('d-none');

    const parent_id = $("#parentid").val();
    current_parent = parent_id;

    $.ajax({
      url: "/checkStudent",
      type: "GET",
      headers: {
        "X-CSRF-TOKEN": $('meta [name="csrf-token"]').attr("content")
      },
      data: {
        "parent_id": parent_id
      },
      success: function(response) {

        const status = response["status"];
        if (status === 200) {
          const children = response["children"];

          if (children === true) {
            const students = response["students_detail"];
            current_parent_student_list = response["students_detail"];

            student_classes = response["student_class"];

            if (students.length > 0) {
              $("#studentid").empty();
              $('#studentid').append(`<option value="" selected disabled hidden>Select Student</option>`);
              $.each(students, function(key, value) {
                $('#studentid').append(`<option value="${value['id']}">${value['first_name']} ${value['last_name']} ( ${value['id']} )</option>`);
              });
              $("#studentid").prop("disabled", false);
            } else {
              $('#studentid').append(`<option value="" selected disabled hidden>No Student Found</option>`);
            }
          } else {
            student_classes = null;
            $('#studentid').append(`<option value="" selected disabled hidden>No Student Found</option>`);
          }
          $("#remove_parent").removeClass('d-none');
        }

      },
      error: function() {

      },
      complete: function() {

      }
    });
  });

  $("#studentid").on("change", function(e) {
    e.stopPropagation();
    $("#parentid").prop("disabled", true);
    $('.removefetchdetails').remove();
    $("#fetch_details_btn").prop('disabled', true);
    $(".payment_section_show").addClass('d-none');
    const student_id = $("#studentid").val();

    if (student_classes) {
      if (student_id in student_classes) {
        if (student_classes[student_id]) {
          $("#student_class").val(student_classes[student_id]);
        } else {
          $("#student_class").val("Class Not Mapped Yet.");
        }
      } else {
        $("#student_class").val("Class Not Mapped Yet.");
      }
    } else {
      $("#student_class").val("Class Not Mapped Yet.");
    }

    $.ajax({
      url: '/checkParent',
      type: 'GET',
      headers: {
        "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr('content')
      },
      data: {
        "student_id": student_id
      },
      success: function(resp) {
        const status = resp["status"];

        if (status === 200) {
          $("#fetch_details_btn").prop('disabled', false);
          const parent = resp["parent"];
          $("#parentid").empty();
          if (parent === true) {
            $("#parentid").append(`<option value="${resp['parentdetails']['id']}">${resp['parentdetails']['first_name']} ${resp['parentdetails']['last_name']}</option>`);
          } else {
            $("#parentid").append(`<option value=""Select Parent</option>`);
          }

          const singleStudentClass = resp["student_class"];

          if (singleStudentClass) {
            $("#student_class").val(singleStudentClass);
          } else {
            $("#student_class").val("Class Not Mapped Yet.");
          }
          $("#courseid").prop("disabled", false);
        } else if (status === 404) {
          $("#student_class").val("Class Not Mapped Yet.");
          $("#courseid").prop("disabled", true);
          $("#batchid").prop("disabled", true);
          student_classes = null;
        } else if (status === 400) {
          $("#student_class").val("Class Not Mapped Yet.");
          $("#courseid").prop("disabled", true);
          $("#batchid").prop("disabled", true);
          student_classes = null;
        }
        $("#remove_student").removeClass('d-none');
      },
      error: function() {

      },
      complete: function() {

      }
    });

  });

  $("#remove_parent").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    current_parent = null;
    current_parent_student_list = null;
    $("#remove_parent").addClass('d-none');
    $("#remove_student").addClass('d-none');
    $('.payment_section_show').addClass('d-none');
    $('.removefetchdetails').remove();
    $("#fetch_details_btn").prop('disabled', true);
    // $(".layout-wrapper").css({"position":"fixed","overflow-y":"hidden"});
    resetParents();
    resetPaymentType();
  });

  $("#remove_student").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#remove_student").addClass('d-none');
    $('.removefetchdetails').remove();
    $('.payment_section_show').addClass('d-none');
    $("#fetch_details_btn").prop('disabled', true);
    // $(".layout-wrapper").css({"position":"fixed","overflow-y":"hidden"});
    resetStudents();
    resetPaymentType();
  })

  function formatDateInJs(dateStr) {
    const dateObj = new Date(dateStr);

    // Extract day, month, and year from the Date object
    const day = String(1).padStart(2, '0');
    const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
    const year = dateObj.getFullYear();

    start_month = `${day}-${month}-${year}`;
    return start_month;
  }

  function addMonthsToDate(dateStr, monthsToAdd) {
    const [day, month, year] = dateStr.split('-').map(Number);
    const dateObj = new Date(year, month - 1, day);

    // Add the months
    dateObj.setMonth(dateObj.getMonth() + monthsToAdd);

    // Move to the end of the month by setting the date to 0 of the next month
    dateObj.setMonth(dateObj.getMonth(), 0);

    const newDay = String(dateObj.getDate()).padStart(2, '0');
    const newMonth = String(dateObj.getMonth() + 1).padStart(2, '0'); // getMonth() returns zero-indexed month
    const newYear = dateObj.getFullYear();

    // Format the new date in dd-mm-yyyy format
    const end_month = `${newDay}-${newMonth}-${newYear}`;

    return end_month;
  }

  $("#fetch_details_btn").on("click", function() {
    // Fetch Fee details
    const student_id = $("#studentid").val();
    const student_class = $("#student_class").val();
    transport_charges = 0;
    annual_charges = 0;
    if (student_class === "Class Not Mapped Yet.") {
      if (!$('#student_class').closest('div').next().hasClass('text-danger')) {
        $('#student_class').closest('div').after(`<span class="text-strong text-danger">Student Class mapping required before paying fees.</span>`);
      }
      return;
    }

    $('.removefetchdetails').remove();
    $('.text-danger').remove();
    $("#loader").removeClass("d-none");

    $.ajax({
      url: "/getStudentFeeDetails",
      type: 'GET',
      headers: {
        "X-CSRF-TOKEN": $('meta [name="csrf-token"]').attr('content')
      },
      data: {
        "student_id": student_id,
        "student_class": student_class
      },
      success: function(response) {
        // $(".layout-wrapper").css({"position":"absolute","overflow-y":"auto"});
        const status = response["status"];

        if (status === 404) {

          if (!$('#fetch_details_btn').closest('div').prev().hasClass('text-danger')) {
            $('#fetch_details_btn').closest('div').before(`<span class="text-strong text-danger">${response["message"]}</span>`);
          }
        } else if (status === 200) {
          const additional_fee_charges = response["additional_fee_charges"];
          const feeFound = response["feeFound"];

          let additional_fee_charges_html = ``;
          if (additional_fee_charges == false) {
            additional_fee_charges_html = `<div class='text-info removefetchdetails'><strong>Additional Charges such as annual charges, transportation charges not included in the system.</strong><a href="${window.origin}/additional-charges" target="_blank">Click here to include</a></div>`;
          } else {

            if (feeFound == true) {
              if (response["annual_charges_details"]["annual_charges_paid"] == 1) {
                additional_fee_charges_html = `<br/><div class='text-info removefetchdetails'><strong>Already paid Portal Registration Fee: &#8377;${response["annual_charges_details"]["annual_charges"]}</strong></div><br/>`;
              } else {
                annual_charges = response["annual_charges_details"]["annual_charges"];
                additional_fee_charges_html = `<br/><div class='text-info removefetchdetails'><strong>Portal Registration Fee: &#8377;${response["annual_charges_details"]["annual_charges"]}</strong></div><br/>`;
              }
              transport_charges = response["transport_charges_details"]["transport_charges"];
              additional_fee_charges_html += `<div class='text-info removefetchdetails'><strong>Transportation charges: &#8377;${response["transport_charges_details"]["transport_charges"]}/monthly</strong><br/>Monthly Fee: &#8377;${response["transport_charges_details"]["transport_charges"]*1}<br/>Quarterly Fee: &#8377;${response["transport_charges_details"]["transport_charges"]*3}<br/>Semi Annual Fee: &#8377;${response["transport_charges_details"]["transport_charges"]*6}<br/>Annual Fee: &#8377;${response["transport_charges_details"]["transport_charges"]*12}<br/><br/></div>`;
            }

          }

          const student_class = $("#student_class").val();
          const feeStructure = `<div class='text-info removefetchdetails'><strong>Fee structure for ${student_class}</strong><br/> Monthly Fee: &#8377;${response['feeStructure']['monthly']}<br/>Quarterly Fee: &#8377;${response['feeStructure']['quarterly']}<br/>Semi Annual Fee: &#8377;${response['feeStructure']['semi_annual']}<br/>Annual Fee: &#8377;${response['feeStructure']['annual']}<br/><br/></div>`;
          const feeToPayStructure = response["feeToPayStructure"];
          monthly_fee_to_pay = feeToPayStructure["monthly_fee_to_pay"];
          quarterly_fee_to_pay = feeToPayStructure["quarterly_fee_to_pay"];
          semi_annual_fee_to_pay = feeToPayStructure["semi_annual_fee_to_pay"];
          annual_fee_to_pay = feeToPayStructure["annual_fee_to_pay"];

          if (feeFound == false) {
            $(".loaderbtn_div").after(`${feeStructure}<div class='text-info removefetchdetails'>No Fee History Found.</div>`);
            $('.payment_section_show').removeClass('d-none');
          } else {
            pending_fee = response['pending_fee'];

            if (pending_fee && pending_fee != 0) {

              $(".loaderbtn_div")
                .after(`${additional_fee_charges_html}${feeStructure}<div class='text-info removefetchdetails'><strong>Student Tution Fee Details</strong><br/>Total Fee: &#8377;${response['total_fee']}<br/>Fee Paid : &#8377;${response['paid_fee']}<br/>Pending Fee : &#8377;${response['pending_fee']}<br/></div>`);
              $('.payment_section_show').removeClass('d-none');
            } else {
              $(".loaderbtn_div")
                .after(`<div class='text-info removefetchdetails'>Bills already cleared.</div>`);
            }

            $("#start_month").val(formatDateInJs(response["next_payment_date"]));
          }
        }
        $("#loader").addClass("d-none");
      },
      error: function(response) {
        $("#loader").addClass("d-none");
      },
      complete: function(response) {
        $("#loader").addClass("d-none");
      }
    });
  });

  $("#payment_type_id").on("change", function(e) {
    e.stopPropagation();
    $("#remove_payment_type").prop("disabled", false);
    $("#remove_payment_type").removeClass("d-none");
    $("#save_details_btn").prop("disabled", true).addClass('d-none');
    $(".finalFeeStructure").next(".text-info").remove();

    const val = $("#payment_type_id").val();
    let tution_fee = 0;
    transport_fee = 0;
    let change_payment_type_bool = false;

    if (val == 0 && monthly_fee_to_pay) $("#save_details_btn").prop("disabled", false).removeClass('d-none');
    else if (val == 1 && quarterly_fee_to_pay) $("#save_details_btn").prop("disabled", false).removeClass('d-none');
    else if (val == 2 && semi_annual_fee_to_pay) $("#save_details_btn").prop("disabled", false).removeClass('d-none');
    else if (val == 3 && annual_fee_to_pay) $("#save_details_btn").prop("disabled", false).removeClass('d-none');

    let selectDiffOptionStr = `<div class="text-info remove_fee_per_month">Select option: `;
    if (monthly_fee_to_pay) selectDiffOptionStr += `monthly,`;
    if (quarterly_fee_to_pay) selectDiffOptionStr += `quarterly,`;
    if (semi_annual_fee_to_pay) selectDiffOptionStr += `semi-annual,`;
    if (annual_fee_to_pay) selectDiffOptionStr += `annual.`;

    if (selectDiffOptionStr[selectDiffOptionStr.length - 1] == ",") {
      selectDiffOptionStr = selectDiffOptionStr.substring(0, selectDiffOptionStr.length - 1);
      selectDiffOptionStr += ".";
    } else if (selectDiffOptionStr == '`<d>Select option: ') {
      selectDiffOptionStr = `<div class="text-info remove_fee_per_month">Something went wrong.Trying to fix the issue</div>`;
    } else {
      selectDiffOptionStr = '';
    }

    $(".payment_type_div").next(".remove_fee_per_month").remove();
    $(".transportDiv").next(".remove_transport_fee").remove();
    if (val == 0) {
      if (monthly_fee_to_pay) {
        tution_fee = monthly_fee_to_pay;
        transport_fee = transport_charges;
        $("#end_month").val(addMonthsToDate($("#start_month").val(), 1));
        $(".payment_type_div")
          .after(`<div class="text-info remove_fee_per_month">Monthly calculated tution fee will be: ₹${monthly_fee_to_pay}</div>`);

        if (include_transport_charges == "yes") {
          $(".transportDiv")
            .after(`<div class="text-info remove_transport_fee">Monthly calculated transport fee will be: ₹${transport_fee}</div>`);
        }
      } else {
        $(".payment_type_div")
          .after(selectDiffOptionStr);
        change_payment_type_bool = true;
      }
    } else if (val == 1) {
      if (quarterly_fee_to_pay) {
        tution_fee = quarterly_fee_to_pay;
        transport_fee = transport_charges * 3;
        $("#end_month").val(addMonthsToDate($("#start_month").val(), 3));
        $(".payment_type_div")
          .after(`<div class="text-info remove_fee_per_month">Quarterly calculated tution fee will be: ₹${quarterly_fee_to_pay}</div>`);

        if (include_transport_charges == "yes") {
          $(".transportDiv")
            .after(`<div class="text-info remove_transport_fee">Quarterly calculated transport fee will be: ₹${transport_fee}</div>`);
        }

      } else {
        $(".payment_type_div")
          .after(selectDiffOptionStr);
        change_payment_type_bool = true;
      }
    } else if (val == 2) {
      if (semi_annual_fee_to_pay) {
        tution_fee = semi_annual_fee_to_pay;
        transport_fee = transport_charges * 6;
        $("#end_month").val(addMonthsToDate($("#start_month").val(), 6));
        $(".payment_type_div")
          .after(`<div class="text-info remove_fee_per_month">Semi Annual calculated tution fee will be: ₹${semi_annual_fee_to_pay}</div>`);

        if (include_transport_charges == "yes") {
          $(".transportDiv")
            .after(`<div class="text-info remove_transport_fee">Semi Annual calculated transport fee will be: ₹${transport_fee}</div>`);
        }

      } else {
        $(".payment_type_div")
          .after(selectDiffOptionStr);
        change_payment_type_bool = true;
      }
    } else if (val == 3) {
      if (annual_fee_to_pay) {
        tution_fee = annual_fee_to_pay;
        transport_fee = transport_charges * 12;
        $("#end_month").val(addMonthsToDate($("#start_month").val(), 12));
        $(".payment_type_div")
          .after(`<div class="text-info remove_fee_per_month">Annual calculated tution fee will be: ₹${annual_fee_to_pay}</div>`);

        if (include_transport_charges == "yes") {
          $(".transportDiv")
            .after(`<div class="text-info remove_transport_fee">Annual calculated transport fee will be: ₹${transport_fee}</div>`);
        }
      } else {
        $(".payment_type_div")
          .after(selectDiffOptionStr);
        change_payment_type_bool = true;
      }
    } else {
      $(".payment_type_div").after(`<div class="text-info remove_fee_per_month">Something went wrong. Try again later.</div>`);
    }

    if (change_payment_type_bool) return;
    let finalFeeStructureHTML = `<div class="text-info remove_fee_per_month"><strong>Total Fee will be: </strong>`;
    let grandTotal = 0;
    if (annual_charges != 0) {
      grandTotal += Number(annual_charges);
      finalFeeStructureHTML += `<div>Annual Fee: ₹${annual_charges}</div>`;
    }
    if (tution_fee != 0) {
      grandTotal += Number(tution_fee);
      finalFeeStructureHTML += `<div>Tution Fee: ₹${tution_fee}</div>`;
    }
    if (transport_fee != 0 && include_transport_charges == "yes") {
      grandTotal += Number(transport_fee);
      finalFeeStructureHTML += `<div>Transport Fee: ₹${transport_fee}</div>`;
    }

    finalFeeStructureHTML += `<div>Grand Total: ₹${grandTotal}</div></div>`;
    $('.finalFeeStructure')
      .after(finalFeeStructureHTML);
  });

  $("#remove_payment_type").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    resetPaymentType();
  });

  $("#save_details_btn").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(".btn-success").prop("disabled", true);
    $(".btn-info").prop("disabled", true);
    $(".input").prop("disabled", true);
    $('.text-danger').remove();

    const student_id = $("#studentid").val();
    const payment_type = $("#payment_type_id").val();
    const student_class = $("#student_class").val();

    if (student_class === "Class Not Mapped Yet.") {
      if (!$('#save_details_btn').closest('div').next().hasClass('text-danger')) {
        $('#save_details_btn').closest('div').after(`<span class="text-strong text-danger">Student Class mapping required before paying fees.</span>`);
      }
      return;
    }

    $.ajax({
      url: "/addFeeDetails",
      type: "POST",
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
      },
      data: {
        "student_id": student_id,
        "student_class": student_class,
        "payment_type": payment_type,
        "include_transport_charges": include_transport_charges,
        "annual_charges": annual_charges,
        "transport_fee": transport_fee
      },
      success: function(response) {
        const status = response["status"];

        if (status == 200) {
          const fee = response["fee"];

          if (fee === "done") {
            $("#save_details_btn").after(`<div class='text-success'>Payment added successfully. Please wait...</div>`);
            setTimeout(function() {
              window.location.href = response["success"];
              $(".btn-success").prop("disabled", false);
              $(".btn-info").prop("disabled", false);
              $(".input").prop("disabled", false);
            }, 1000);
          }

        } else if (status == 400) {

          const err = response["error"];
          if (err == "validation") {
            $("#save_details_btn").after(`<div class='text-danger'>Some required parameters are missing*</div>`);
          } else if (err == "not found") {
            $("#save_details_btn").after(`<div class='text-danger'>Records has been removed*</div>`);
          }

        } else if (status === 404) {
          if (!$('#fetch_details_btn').closest('div').prev().hasClass('text-danger')) {
            $('#fetch_details_btn').closest('div').before(`<span class="text-strong text-danger">Refresh your webpage. Something went wrong.</span>`);
          }
        }
      },
      error: function() {
        $(".btn-success").prop("disabled", false);
        $(".btn-info").prop("disabled", false);
        $(".input").prop("disabled", false);
      },
      complete: function() {

      }
    });
  });
</script>
<script>
  $(function() {
    $('.col-xl').removeClass('d-none');
  });
</script>
@endsection