@extends('layouts.app')
@section('content')
<div class="contents">
   <div class="crm mb-25">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-12 d-flex justify-content-end">
               @include('layouts.navigation')
            </div>
            <div class="col-lg-12">
               <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                  <h2 class="breadcrumb-title">Faculities & Staff</h2>
                  <div class="d-flex justify-content-end align-items-center">
                     <p class="m-0 me-3 fw-600 showing-color-tablesearch">Showing Result: 125</p>
                     <a href="{{route('users.create')}}" class="btn btn-primary">Add Staff <i class="fa-solid fa-plus ms-2"></i></a>
                  </div>
               </div>
            </div>
            <div class="col-xxl-12">
               <div class="userDatatable global-shadow border-light-0 w-100 adv-table">
                  <div class="table-responsive">
                     <table class="table mb-0 table-borderless table-striped">
                        <thead>
                           <tr>
                              <th>Teacher’s ID </th>
                              <th>Teacher’s Name</th>
                              <th>Area Of Teaching</th>
                              <th>Designation</th>
                              <th>Assigned Class</th>
                              <th>Status</th>
                              <th class="text-center">Action</th>
                           </tr>
                        </thead>
                        <tbody>
                           @if($users->count() > 0)
                           @foreach($users as $key => $user)
                           <tr>
                              <td>{{ $user->uid ?? ""}}</td>
                              <td>{{ $user->name ?? "-" }}</td>
                              <td>{{ $user->department_id ?? "-"}}</td>
                              <td>{{ $user->designation ?? "-" }}</td>
                              <td>
                                 {{-- <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton{{$key}}" data-bs-toggle="dropdown" aria-expanded="false">
                                    XII A
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{$key}}">
                                       <!-- Class I -->
                                       <li class="dropdown-submenu">
                                          <a class="dropdown-item dropdown-toggle" href="#">Class I</a>
                                          <ul class="dropdown-menu">
                                             <li class="dropdown-submenu">
                                                <a class="dropdown-item dropdown-toggle" href="#">Section A</a>
                                                <ul class="dropdown-menu">
                                                   <li><a class="dropdown-item" href="#">Assign Class</a></li>
                                                </ul>
                                             </li>
                                             <li class="dropdown-submenu">
                                                <a class="dropdown-item dropdown-toggle" href="#">Section B</a>
                                                <ul class="dropdown-menu">
                                                   <li><a class="dropdown-item" href="#">Assign Class</a></li>
                                                </ul>
                                             </li>
                                             <li class="dropdown-submenu">
                                                <a class="dropdown-item dropdown-toggle" href="#">Section C</a>
                                                <ul class="dropdown-menu">
                                                   <li><a class="dropdown-item" href="#">Assign Class</a></li>
                                                </ul>
                                             </li>
                                             <li class="dropdown-submenu">
                                                <a class="dropdown-item dropdown-toggle" href="#">Section D</a>
                                                <ul class="dropdown-menu">
                                                   <li><a class="dropdown-item" href="#">Assign Class</a></li>
                                                </ul>
                                             </li>
                                          </ul>
                                       </li>
                                       <!-- Repeat for other classes -->
                                       <li><a class="dropdown-item" href="#">Class II</a></li>
                                       <li><a class="dropdown-item" href="#">Class III</a></li>
                                       <li><a class="dropdown-item" href="#">Class IV</a></li>
                                       <li><a class="dropdown-item" href="#">Class V</a></li>
                                       <li><a class="dropdown-item" href="#">Class VI</a></li>
                                       <li><a class="dropdown-item" href="#">Class VII</a></li>
                                       <li><a class="dropdown-item" href="#">Class VIII</a></li>
                                       <li><a class="dropdown-item" href="#">Class IX</a></li>
                                       <li><a class="dropdown-item" href="#">Class X</a></li>
                                       <li><a class="dropdown-item" href="#">Class XI</a></li>
                                       <li><a class="dropdown-item" href="#">Class XII</a></li>
                                    </ul>
                                 </div> --}}
                                 <div class="dm-select ">
<select name="select-1" id="select-1" class="form-control ">
<option value="01">Option 1</option>
<option value="02">Option 2</option>
<option value="03">Option 3</option>
<option value="04">Option 4</option>
<option value="05">Option 5</option>
</select>
</div>
                              </td>
                              {{-- 
                              <td class="d-flex align-items-center">
                                 <div class="dm-select dropdown-badges me-2">
                                    <select class="form-control form-control-sm assigned-class" id="select-option2"
                                       data-user-id="{{ $user->id }}" multiple>
                                    @foreach($class as $value)
                                    <option value="{{ $value->id }}"
                                    {{ in_array($value->id, $user->class_ids) ? 'selected' : '' }}>
                                    {{ $value->name }}
                                    </option>
                                    @endforeach
                                    </select>
                                 </div>
                                 <div class="dm-select dropdown-badges">
                                    <select class="form-control form-control-sm assigned-section" id="select-option2"
                                       data-user-id="{{ $user->id }}" multiple>
                                    @foreach($user->class ? $user->class->sections : [] as $section)
                                    <option value="{{ $section->id }}"
                                    {{ in_array($section->id, $user->section_ids) ? 'selected' : '' }}>
                                    {{ $section->name }}
                                    </option>
                                    @endforeach
                                    </select>
                                 </div>
                              </td>
                              --}}
                              <td>
                                 {{-- <select class="form-control bedge-green-active form-control-sm update-status" data-user-id="{{ $user->id }}">
                                 <option value="1" {{ $user->status == 1 ? 'selected' : '' }}>Active</option>
                                 <option value="0" {{ $user->status == 0 ? 'selected' : '' }}>In-active</option>
                                 </select> --}}
                                 {{-- <div class="dm-select dropdown-badges">
                                    <select name="select-1" id="select-1" class="form-control update-status" id="select-option2" data-user-id="{{ $user->id }}">
                                    <option value="1" {{ $user->status == 1 ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ $user->status == 0 ? 'selected' : '' }}>Left</option>
                                    </select>
                                 </div> --}}
                               <!-- HTML -->
<div class="custom-select-wrapper" id="myCustomSelect">
  <div class="custom-select" tabindex="0" aria-haspopup="listbox" aria-expanded="false">
    <span class="custom-select-label">Select Status</span>
    <span class="custom-select-arrow">▾</span>
  </div>
  <!-- note: options container will be moved to body by JS -->
  <div class="custom-options" data-attached="false">
    <div class="custom-option" data-value="01">Active</div>
    <div class="custom-option" data-value="02">Left</div>
    <div class="custom-option" data-value="03">Transferred</div>
  </div>
</div>
                              </td>
                              <td>
                                 <div class="userDatatable-content d-flex  align-items-center">
                                    <a href="#" class="me-3">
                                    View Profile >>
                                    </a>
                                    {{-- <button class="btn btn-primary btn-default btn-squared btn-transparent-primary primary-lite btn-icon btn-edit ">
                                    <i class="fa-solid fa-pen"></i>
                                    </button> --}}
                                   
<a href="{{route('users.create')}}" class="btn btn-icon  btn-primary-light btn-squared btn-custom-action"><i class="fa-solid fa-pen"></i></a>
                                 </div>
                              </td>
                              </td>
                              {{-- 
                              <td>
                                 <ul class="orderDatatable_actions mb-0 d-flex flex-wrap justify-content-end">
                                    @can('update-user')
                                    <li>
                                       <a href="javascript:void(0)" class="edit text-success edit-user-btn"
                                          data-id="{{ $user->id }}"
                                          data-user_type = "{{$user->user_type}}"
                                          data-name="{{ $user->name }}"
                                          data-email="{{ $user->email }}"
                                          data-institute_type="{{ $user->institute_type ?? '' }}"
                                          data-education_level="{{ $user->education_level ?? '' }}"
                                          data-state_id="{{ $user->state_id ?? '' }}"
                                          data-district_id="{{ $user->district_id ?? '' }}"
                                          data-city_id="{{ $user->city_id ?? '' }}"
                                          data-institute_id="{{ $user->institute_id ?? '' }}"
                                          data-address="{{ $user->address }}"
                                          data-pincode="{{ $user->pincode }}"
                                          title="Edit">
                                       <i class="fas fa-pen"></i>
                                       </a>
                                    </li>
                                    @endcan
                                    @can('delete-user')
                                    <li>
                                       <a href="{{ url('user/'.$user->id.'/delete') }}"
                                          class="remove text-danger mx-2" title="Delete">
                                       <i class="fas fa-trash"></i>
                                       </a>
                                    </li>
                                    @endcan
                                 </ul>
                              </td>
                              --}}
                           </tr>
                           @endforeach
                           @else
                           <tr>
                              <td colspan="9" class="text-center">Data Not Found</td>
                           </tr>
                           @endif
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
            <!-- User Modal -->
            <div class="modal fade" id="modal-user" tabindex="-1" aria-hidden="true">
               <div class="modal-dialog modal-xl">
                  <div class="modal-content modal-bg-white">
                     <div class="modal-header">
                        <h3 class="modal-title">Create Staff</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                     </div>
                     <div class="modal-body">
                        <form id="userForm" class="p-4">
                           @csrf
                           <input type="hidden" id="user_id" name="user_id">
                           <div class="row g-3">
                              <input type="hidden" name="user_type" id="user_type" value="2">
                              <div class="col-md-4">
                                 <label class="form-label">Name <span class="text-danger">*</span></label>
                                 <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name">
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Mobile Number<span class="text-danger">*</span></label>
                                 <input type="text" id="mobile_number" name="mobile_number" class="form-control" placeholder="Enter Mobile Number">
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Email <span class="text-danger">*</span></label>
                                 <input type="email" id="email" name="email" class="form-control" placeholder="Enter Email">
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                 <input type="date" id="dob" name="dob" class="form-control">
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Staff<span class="text-danger">*</span></label>
                                 <select name="profile_type" id="profile_type" class="form-control">
                                    <option>Select an Staff Type</option>
                                    @foreach(category_data(16) as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                 </select>
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Designation<span class="text-danger">*</span></label>
                                 <select name="designation" id="designation" class="form-control">
                                    <option>Select Designation</option>
                                    @foreach(category_data(17) as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                 </select>
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Area of Teaching<span class="text-danger">*</span></label>
                                 <select name="department_id" id="department_id" class="form-control">
                                    <option>Select an Area of Teaching</option>
                                    @foreach(category_data(14) as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                 </select>
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Assigned Class<span class="text-danger">*</span></label>
                                 <select name="assigned_class_id" class="form-control">
                                    <option>Select an Assigned Class</option>
                                    @foreach(schoolclass() as $value)
                                    <option value="{{$value->id}}">{{$value->name}}</option>
                                    @endforeach
                                 </select>
                              </div>
                              <div class="col-md-4">
                                 <label class="form-label">Status of Staff<span class="text-danger">*</span></label>
                                 <select name="status" class="form-control">
                                    <option value="">Select Status</option>
                                    <option value="1">Active</option>
                                    <option value="2">Inactive</option>
                                 </select>
                              </div>
                              <div class="col-md-4 password-fields">
                                 <label class="form-label">Password <span class="text-danger">*</span></label>
                                 <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password">
                              </div>
                              <div class="col-md-4 password-fields">
                                 <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                 <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" placeholder="Confirm Password">
                              </div>
                              <div class="col-md-12 text-center mt-3">
                                 <button type="submit" id="userSubmit" class="btn btn-primary w-100 shadow">Save</button>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
<script>
// Custom-dropdown-code
(function(){
  const wrapper = document.getElementById('myCustomSelect');
  const selectBox = wrapper.querySelector('.custom-select');
  const label = wrapper.querySelector('.custom-select-label');
  const optionsBox = wrapper.querySelector('.custom-options');
  const options = Array.from(wrapper.querySelectorAll('.custom-option'));

  function attachOptionsToBody() {
    if (optionsBox.getAttribute('data-attached') === 'true') return;
    document.body.appendChild(optionsBox);
    optionsBox.setAttribute('data-attached', 'true');
    optionsBox.classList.add('attached-to-body');
    optionsBox.style.position = 'absolute';
    optionsBox.style.zIndex = 2147483647;
  }
  attachOptionsToBody();
  function positionOptions() {
    const rect = selectBox.getBoundingClientRect();
    const scrollY = window.scrollY || window.pageYOffset;
    const scrollX = window.scrollX || window.pageXOffset;
    const top = rect.bottom + scrollY + 6; // 6px gap
    let left = rect.left + scrollX;
    let width = Math.max(rect.width, 170); // keep width at least 220
    const viewportWidth = document.documentElement.clientWidth;
    if (left + width > viewportWidth - 8) {
      left = Math.max(8, viewportWidth - width - 8);
    }

    optionsBox.style.left = left + 'px';
    optionsBox.style.top = top + 'px';
    optionsBox.style.minWidth = width + 'px';
  }

  // Toggle dropdown
  function openOptions() {
    attachOptionsToBody();
    positionOptions();
    optionsBox.style.display = 'block';
    selectBox.setAttribute('aria-expanded', 'true');
    // small timeout to let CSS apply, optional
    requestAnimationFrame(() => {});
  }

  function closeOptions() {
    optionsBox.style.display = 'none';
    selectBox.setAttribute('aria-expanded', 'false');
  }

  // Click to toggle
  selectBox.addEventListener('click', (e) => {
    e.stopPropagation();
    if (optionsBox.style.display === 'block') closeOptions();
    else openOptions();
  });

  // Close on outside click
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.custom-select-wrapper') && !e.target.closest('.custom-options')) {
      closeOptions();
    }
  });

  // Reposition on scroll/resize (keeps it aligned)
  window.addEventListener('resize', () => {
    if (optionsBox.style.display === 'block') positionOptions();
  });
  window.addEventListener('scroll', () => {
    if (optionsBox.style.display === 'block') positionOptions();
  }, true); // use capture to catch scrolls on ancestors too

  // Option click behaviour
  options.forEach(opt => {
    opt.addEventListener('click', (e) => {
      const val = opt.getAttribute('data-value');
      const text = opt.textContent.trim();
      label.textContent = text;

      // Remove previous color classes
      selectBox.classList.remove('selected-green','selected-red','selected-blue');

      // Add new color class
      if (val === '01') selectBox.classList.add('selected-green');
      if (val === '02') selectBox.classList.add('selected-red');
      if (val === '03') selectBox.classList.add('selected-blue');

      closeOptions();
    });
  });

  // Accessibility: keyboard open/close and navigation (basic)
  selectBox.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openOptions(); }
    if (e.key === 'Escape') { closeOptions(); }
  });
})();


document.addEventListener('DOMContentLoaded', function () {
  // Handle submenu toggle
  document.querySelectorAll('.dropdown-submenu > a').forEach(function (el) {
    
    el.addEventListener('click', function (e) {
      
      e.preventDefault();
      e.stopPropagation();

      const submenu = this.nextElementSibling;
      const parentMenu = this.closest('.dropdown-menu');

      // Close other open submenus at the same level
      parentMenu.querySelectorAll('.dropdown-menu.show').forEach(menu => {
          alert("dfdfdffd");
        if (menu !== submenu) menu.classList.remove('show');
      });

      // Toggle this submenu
      submenu.classList.toggle('show');
    });
  });

  // Close submenus when main dropdown hides
  document.querySelectorAll('.dropdown').forEach(function (dropdown) {
    dropdown.addEventListener('hide.bs.dropdown', function () {
      this.querySelectorAll('.dropdown-menu.show').forEach(function (submenu) {
        submenu.classList.remove('show');
      });
    });
  });
});
</script>

<script>
   $(document).ready(function(){
       $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
   
       $('[data-bs-target="#modal-user"]').on('click', function () {
           $('#modal-user .modal-title').text('Create User');
           $('#userForm')[0].reset();
           $('#user_id').val('');
           $('#userSubmit').text('Save');
           
           // Show password fields
           $('.password-fields').show();
       });
       $(document).on('change', '.update-status', function(){
           let status = $(this).val();
           let userId = $(this).data('user-id');
   
           $.ajax({
               url: "{{ url('update-user-status') }}",
               type: "POST",
               data: {
                   _token: "{{ csrf_token() }}",
                   user_id: userId,
                   status: status
               },
               success: function(res){
                   toastr.success('User status updated');
               },
               error: function(){
                   toastr.error('Failed to update status');
               }
           });
       });
   
       $(document).on('click', '.edit-user-btn', function(){
           const user = $(this).data();
           $('#modal-user .modal-title').text('Edit User');
           $('#user_id').val(user.id);
           $('#name').val(user.name);
           $('#email').val(user.email);
           $('#institute_type').val(user.institute_type);
           $('#education_level').val(user.education_level);
           $('#address').val(user.address);
           $('#pincode').val(user.pincode);
           $('#user_type').val(user.user_type);
           $('#state_id').val(user.state_id).trigger('change');
   
           setTimeout(function(){
               $('#district_id').val(user.district_id).trigger('change');
               setTimeout(function(){
                   $('#city_id').val(user.city_id).trigger('change');
                   setTimeout(function(){
                       $('#institute_id').val(user.institute_id);
                   },300);
               },300);
           },300);
   
           $('#userSubmit').text('Update');
   
           $('.password-fields').hide();
   
           $('#modal-user').modal('show');
       });
           $(document).on('change', '.assigned-class, .assigned-section', function(){
               let userId       = $(this).data('user-id');
               let td           = $(this).closest('td');
               let classIds     = td.find('.assigned-class').val() || [];
               let sectionIds   = td.find('.assigned-section').val() || [];
   
               $.ajax({
                   url: "{{ url('update-user-assigned-class') }}",
                   type: "POST",
                   data: {
                       _token: "{{ csrf_token() }}",
                       user_id: userId,
                       class_ids: classIds,
                       section_ids: sectionIds
                   },
                   success: function(res){
                       toastr.success('Assigned Class/Section Updated');
                   },
                   error: function(){
                       toastr.error('Something went wrong!');
                   }
               });
           });
   
       $('#user_type').on('change', function(){
           if($(this).val() == '2'){
               $('.staff-fields').show();
               $('.institute-fields').hide();
               $('.student-fields').hide();
           }else if($(this).val() == '3'){
               $('.staff-fields').hide();
               $('.institute-fields').hide();
               $('.student-fields').show();
           }else if($(this).val() == '5'){
               $('.staff-fields').hide();
               $('.institute-fields').show();
               $('.student-fields').hide();
           } else {
               $('.staff-fields').hide();
               $('.institute-fields').hide();
               $('.student-fields').hide();
           }
       });
   
       // Submit form
       $('#userForm').on('submit', function(e){
           e.preventDefault();
   
           let id = $('#user_id').val(); 
           let user_type = $('#user_type').val();
   
           if(!user_type){
               toastr.error('User Type is required!');
               return;
           }
   
           // Common fields
           let name = $('#name').val()?.trim();
           let email = $('#email').val()?.trim();
           if(!name){
               toastr.error('Name is required!');
               return;
           }
           if(!email){
               toastr.error('Email is required!');
               return;
           }
   
           // Validation for Staff (user_type = 2)
           if(user_type == '2'){
               if(!$('#profile_type').val()){
                   toastr.error('Staff Type is required!');
                   return;
               }
               if(!$('#designation').val()){
                   toastr.error('Designation is required!');
                   return;
               }
               if(!$('#department_id').val()){
                   toastr.error('Department is required!');
                   return;
               }
               if(!$('#mobile_number').val()){
                   toastr.error('Mobile Number is required!');
                   return;
               }
               if(!$('#dob').val()){
                   toastr.error('Date of Birth is required!');
                   return;
               }
               if(!$('[name="class_id"]').val()){
                   toastr.error('Assigned Class is required!');
                   return;
               }
               if(!$('[name="status"]').val()){
                   toastr.error('Status of Staff is required!');
                   return;
               }
           }
           if(user_type == '3'){
               if(!$('[name="class_id"]').val()){
                   toastr.error('Class is required!');
                   return;
               }
               if(!$('[name="section_id"]').val()){
                   toastr.error('Section is required!');
                   return;
               }
               if(!$('#dob').val()){
                   toastr.error('Date of Birth is required!');
                   return;
               }
               // you can also add checks for parents fields if mandatory
           }
   
           // Validation for Institute (user_type = 5)
           if(user_type == '5'){
               let institute_type = $('#institute_type').val();
               let education_level = $('#education_level').val();
               let state_id = $('#state_id').val();
               let district_id = $('#district_id').val();
               let city_id = $('#city_id').val();
               let address = $('#address').val()?.trim();
               let pincode = $('#pincode').val()?.trim();
   
               if(!institute_type){
                   toastr.error('Please select Academies/Institutions!');
                   return;
               }
               if(!education_level){
                   toastr.error('Please select Education Level!');
                   return;
               }
               if(!state_id){
                   toastr.error('Please select State!');
                   return;
               }
               if(!district_id){
                   toastr.error('Please select District!');
                   return;
               }
               if(!city_id){
                   toastr.error('Please select City!');
                   return;
               }
               if(!address){
                   toastr.error('Address is required!');
                   return;
               }
               if(!pincode){
                   toastr.error('Pincode is required!');
                   return;
               }
           }
   
           // Prepare AJAX
           const url = id ? `users/${id}` : 'users';
           let formData = new FormData(this);
           if(id) formData.append('_method','PUT');
   
           $.ajax({
               url: url,
               method: 'POST',
               data: formData,
               processData:false,
               contentType:false,
               success:function(){
                   $('#modal-user').modal('hide');
                   Swal.fire({
                       icon:'success',
                       title:'Success',
                       text:id?'User updated successfully':'User created successfully',
                       timer:2000,
                       showConfirmButton:false
                   }).then(()=>location.reload());
               },
               error:function(xhr){
                   Swal.fire({
                       icon:'error',
                       title:'Error',
                       text:xhr.responseJSON?.message || 'Something went wrong!'
                   });
               }
           });
       });
   
   // Dropdown color change 
    const select = document.getElementById('select-1');
     function updateColor() {
       if (select.value === "1") {
         select.style.backgroundColor = "#DDF7DC";
         select.style.color = "#0C6409";
       } else if (select.value === "0") {
         select.style.backgroundColor = "#FFE2E0"; 
         select.style.color = "#AE6059";
       } else if (select.value === "03") {
         select.style.backgroundColor = "#DDEDFF"; 
         select.style.color = "#2247C1";
       }
     }
     updateColor();
     select.addEventListener("change", updateColor);
   
   
   
   
       // Fetch dependent dropdowns
       function fetchInstitutes(){
           let type = $("#institute_type").val();
           let education = $("#education_level").val();
           let state = $("#state_id").val();
           let district = $("#district_id").val();
           let city = $("#city_id").val();
   
           if(type && education && state && district && city){
               $.get("{{ url('get-institutes') }}", {type,education,state,district,city}, function(res){
                   $("#institute_id").empty().append('<option value="">Select Institute</option>');
                   $.each(res,function(k,v){ $("#institute_id").append(`<option value="${v.id}">${v.name}</option>`); });
               });
           }
       }
   
       $("#institute_type, #education_level, #state_id, #district_id, #city_id").on('change', fetchInstitutes);
   
       // State → District
       $('.state_here').change(function(){
           var state_id = $(this).val();
           $.post("{{ route('district.store') }}",{value:state_id,get_district:0},function(data){
               let html = '<option value="">Select District</option>';
               $.each(data,function(k,v){ html += `<option value="${v.id}">${v.name}</option>`; });
               $('.district_here').html(html);
               $('.city_here').html('<option value="">Select City</option>');
           });
       });
   
       // District → City
       $('.district_here').change(function(){
           var district_id = $(this).val();
           $.post("{{ route('district.store') }}",{value:district_id,get_city:0},function(data){
               let html = '<option value="">Select City</option>';
               $.each(data,function(k,v){ html += `<option value="${v.id}">${v.name}</option>`; });
               $('.city_here').html(html);
           });
       });
   });
</script>
@endsection