@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 mb-3">
               <ul class="dm-breadcrumb nav d-flex align-items-center">
                  <li class="dm-breadcrumb__item">
                     <a href="http://localhost/icmr-web/public/staff-management">
                        <svg width="44" height="44" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <g filter="url(#filter0_d_6590_53542)">
                              <rect x="56" y="52" width="48" height="48" rx="24" transform="rotate(180 56 52)" fill="white"></rect>
                              <path d="M30.3636 27.9999L38 35.7778L35.8182 38L26 27.9999L35.8182 18L38 20.2222L30.3636 27.9999Z" fill="black"></path>
                           </g>
                           <defs>
                              <filter id="filter0_d_6590_53542" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                 <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                                 <feOffset dy="4"></feOffset>
                                 <feGaussianBlur stdDeviation="4"></feGaussianBlur>
                                 <feComposite in2="hardAlpha" operator="out"></feComposite>
                                 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix>
                                 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6590_53542"></feBlend>
                                 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6590_53542" result="shape"></feBlend>
                              </filter>
                           </defs>
                        </svg>
                        Assessment Type
                     </a>
                     <span class="breadcrumb__seperator">
                        <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M17.5606 16.0009L10.9609 9.40124L12.8466 7.51562L21.3318 16.0009L12.8466 24.4861L10.9609 22.6005L17.5606 16.0009Z" fill="black"></path>
                        </svg>
                     </span>
                  </li>
                  <li class="dm-breadcrumb__item">
                     <span>Children’s Assessment</span>
                  </li>
               </ul>
            </div>
            <div class="mb-3 d-flex justify-content-between align-items-center">
               <div class="col-lg-6 d-flex align-items-center justify-content-start">
                  <h2 class="breadcrumb-title ">Children's Assessment</h2>
               </div>
               <div class="col-lg-6 d-flex justify-content-end align-items-center">
                  <p class="m-0 me-3 fw-600 showing-color-tablesearch">Showing Result: 125</p>
                  <div class="dm-select w-50 me-3">
                     <select name="select-size-1" id="select-size-1" class="form-control  form-control-lg">
                        <option value="01">All Sections</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>
               </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>Assessment Date</th>
                              <th>Assessment Name</th>
                              <th>Class Participated</th>
                              <th>Completion Rate</th>
                              <th>Least Responsive sections</th>
                              <th>Students at Risk</th>
                              <th class="text-end">Actions</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>12 June 2025</td>
                              <td>Assessment 1</td>
                              <td>XII B</td>
                              <td>
                                 <svg width="169" height="22" viewBox="0 0 169 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="119" height="8" rx="4" fill="#D9D9D9"/>
<rect y="7" width="73" height="8" rx="4" fill="#E89A1C"/>
<path d="M137.956 18.192C137.338 18.192 136.756 18.0853 136.212 17.872C135.668 17.648 135.194 17.3333 134.788 16.928C134.394 16.512 134.106 16.0267 133.924 15.472L135.204 14.928C135.428 15.5147 135.791 15.9733 136.292 16.304C136.804 16.624 137.359 16.784 137.956 16.784C138.447 16.784 138.879 16.6773 139.252 16.464C139.636 16.24 139.935 15.936 140.148 15.552C140.362 15.1573 140.468 14.72 140.468 14.24C140.468 13.7387 140.356 13.296 140.132 12.912C139.919 12.528 139.626 12.2293 139.252 12.016C138.879 11.792 138.452 11.68 137.972 11.68C137.482 11.68 137.034 11.792 136.628 12.016C136.223 12.24 135.93 12.5227 135.748 12.864L134.484 12.592L135.396 6.08H141.572V7.44H135.988L136.596 6.832L135.892 11.888L135.348 11.568C135.7 11.12 136.111 10.8 136.58 10.608C137.06 10.4053 137.578 10.304 138.132 10.304C138.911 10.304 139.594 10.48 140.18 10.832C140.767 11.184 141.226 11.6533 141.556 12.24C141.887 12.8267 142.052 13.4933 142.052 14.24C142.052 14.9867 141.871 15.6587 141.508 16.256C141.156 16.8533 140.671 17.328 140.052 17.68C139.444 18.0213 138.746 18.192 137.956 18.192ZM147.816 18.192C147.197 18.192 146.616 18.0853 146.072 17.872C145.528 17.648 145.053 17.3333 144.648 16.928C144.253 16.512 143.965 16.0267 143.784 15.472L145.064 14.928C145.288 15.5147 145.65 15.9733 146.152 16.304C146.664 16.624 147.218 16.784 147.816 16.784C148.306 16.784 148.738 16.6773 149.112 16.464C149.496 16.24 149.794 15.936 150.008 15.552C150.221 15.1573 150.328 14.72 150.328 14.24C150.328 13.7387 150.216 13.296 149.992 12.912C149.778 12.528 149.485 12.2293 149.112 12.016C148.738 11.792 148.312 11.68 147.832 11.68C147.341 11.68 146.893 11.792 146.488 12.016C146.082 12.24 145.789 12.5227 145.608 12.864L144.344 12.592L145.256 6.08H151.432V7.44H145.848L146.456 6.832L145.752 11.888L145.208 11.568C145.56 11.12 145.97 10.8 146.44 10.608C146.92 10.4053 147.437 10.304 147.992 10.304C148.77 10.304 149.453 10.48 150.04 10.832C150.626 11.184 151.085 11.6533 151.416 12.24C151.746 12.8267 151.912 13.4933 151.912 14.24C151.912 14.9867 151.73 15.6587 151.368 16.256C151.016 16.8533 150.53 17.328 149.912 17.68C149.304 18.0213 148.605 18.192 147.816 18.192ZM155.163 18L164.891 6.08H166.667L156.939 18H155.163ZM156.955 12.128C156.368 12.128 155.84 11.9893 155.371 11.712C154.902 11.424 154.523 11.0453 154.235 10.576C153.958 10.1067 153.819 9.584 153.819 9.008C153.819 8.432 153.958 7.90933 154.235 7.44C154.523 6.96 154.902 6.58133 155.371 6.304C155.84 6.02667 156.368 5.888 156.955 5.888C157.531 5.888 158.054 6.02667 158.523 6.304C158.992 6.58133 159.366 6.96 159.643 7.44C159.92 7.90933 160.059 8.432 160.059 9.008C160.059 9.584 159.92 10.1067 159.643 10.576C159.366 11.0453 158.992 11.424 158.523 11.712C158.054 11.9893 157.531 12.128 156.955 12.128ZM156.939 10.816C157.302 10.816 157.611 10.7307 157.867 10.56C158.123 10.3893 158.326 10.1653 158.475 9.888C158.624 9.61067 158.699 9.31733 158.699 9.008C158.699 8.688 158.624 8.39467 158.475 8.128C158.326 7.85067 158.123 7.62667 157.867 7.456C157.611 7.27467 157.302 7.184 156.939 7.184C156.598 7.184 156.294 7.27467 156.027 7.456C155.76 7.62667 155.552 7.85067 155.403 8.128C155.254 8.40533 155.179 8.69867 155.179 9.008C155.179 9.30667 155.254 9.6 155.403 9.888C155.552 10.1653 155.76 10.3893 156.027 10.56C156.294 10.7307 156.598 10.816 156.939 10.816ZM164.779 18.192C164.192 18.192 163.664 18.0533 163.195 17.776C162.726 17.488 162.347 17.1093 162.059 16.64C161.782 16.1707 161.643 15.648 161.643 15.072C161.643 14.496 161.782 13.9733 162.059 13.504C162.347 13.024 162.726 12.6453 163.195 12.368C163.664 12.0907 164.192 11.952 164.779 11.952C165.355 11.952 165.878 12.0907 166.347 12.368C166.816 12.6453 167.19 13.024 167.467 13.504C167.744 13.9733 167.883 14.496 167.883 15.072C167.883 15.648 167.744 16.1707 167.467 16.64C167.19 17.1093 166.816 17.488 166.347 17.776C165.878 18.0533 165.355 18.192 164.779 18.192ZM164.779 16.88C165.131 16.88 165.435 16.7947 165.691 16.624C165.958 16.4533 166.16 16.2293 166.299 15.952C166.448 15.6747 166.523 15.3813 166.523 15.072C166.523 14.752 166.448 14.4587 166.299 14.192C166.16 13.9147 165.958 13.6907 165.691 13.52C165.435 13.3387 165.131 13.248 164.779 13.248C164.438 13.248 164.128 13.3387 163.851 13.52C163.584 13.6907 163.376 13.9147 163.227 14.192C163.078 14.4693 163.003 14.7627 163.003 15.072C163.003 15.3707 163.078 15.664 163.227 15.952C163.376 16.2293 163.584 16.4533 163.851 16.624C164.128 16.7947 164.438 16.88 164.779 16.88Z" fill="#292929"/>
</svg>

                              </td>
                              <td>Demographic Details</td>
                              <td>
                                 <button class="badges-red btn text-danger">20</button>
                              </td>
                              <td>
                                 <div class="userDatatable-content">
                                    <a href="#">
                                    View More >>
                                    </a>
                                 </div>
                              </td>
                              <td>
                              </td>
                           </tr>
                            <tr>
                              <td>12 June 2025</td>
                              <td>Assessment 1</td>
                              <td>XII A</td>
                              <td>
                                 <svg width="168" height="22" viewBox="0 0 168 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect y="7" width="119" height="8" rx="4" fill="#D9D9D9"/>
                                    <rect y="7" width="95" height="8" rx="4" fill="#2FC47C"/>
                                    <path d="M134.591 18L139.823 7.44H133.983V6.08H141.471V7.44L136.287 18H134.591ZM146.613 18.192C145.994 18.192 145.413 18.0853 144.869 17.872C144.325 17.648 143.85 17.3333 143.445 16.928C143.05 16.512 142.762 16.0267 142.581 15.472L143.861 14.928C144.085 15.5147 144.447 15.9733 144.949 16.304C145.461 16.624 146.015 16.784 146.613 16.784C147.103 16.784 147.535 16.6773 147.909 16.464C148.293 16.24 148.591 15.936 148.805 15.552C149.018 15.1573 149.125 14.72 149.125 14.24C149.125 13.7387 149.013 13.296 148.789 12.912C148.575 12.528 148.282 12.2293 147.909 12.016C147.535 11.792 147.109 11.68 146.629 11.68C146.138 11.68 145.69 11.792 145.285 12.016C144.879 12.24 144.586 12.5227 144.405 12.864L143.141 12.592L144.053 6.08H150.229V7.44H144.645L145.253 6.832L144.549 11.888L144.005 11.568C144.357 11.12 144.767 10.8 145.237 10.608C145.717 10.4053 146.234 10.304 146.789 10.304C147.567 10.304 148.25 10.48 148.837 10.832C149.423 11.184 149.882 11.6533 150.213 12.24C150.543 12.8267 150.709 13.4933 150.709 14.24C150.709 14.9867 150.527 15.6587 150.165 16.256C149.813 16.8533 149.327 17.328 148.709 17.68C148.101 18.0213 147.402 18.192 146.613 18.192ZM153.96 18L163.688 6.08H165.464L155.736 18H153.96ZM155.752 12.128C155.165 12.128 154.637 11.9893 154.168 11.712C153.699 11.424 153.32 11.0453 153.032 10.576C152.755 10.1067 152.616 9.584 152.616 9.008C152.616 8.432 152.755 7.90933 153.032 7.44C153.32 6.96 153.699 6.58133 154.168 6.304C154.637 6.02667 155.165 5.888 155.752 5.888C156.328 5.888 156.851 6.02667 157.32 6.304C157.789 6.58133 158.163 6.96 158.44 7.44C158.717 7.90933 158.856 8.432 158.856 9.008C158.856 9.584 158.717 10.1067 158.44 10.576C158.163 11.0453 157.789 11.424 157.32 11.712C156.851 11.9893 156.328 12.128 155.752 12.128ZM155.736 10.816C156.099 10.816 156.408 10.7307 156.664 10.56C156.92 10.3893 157.123 10.1653 157.272 9.888C157.421 9.61067 157.496 9.31733 157.496 9.008C157.496 8.688 157.421 8.39467 157.272 8.128C157.123 7.85067 156.92 7.62667 156.664 7.456C156.408 7.27467 156.099 7.184 155.736 7.184C155.395 7.184 155.091 7.27467 154.824 7.456C154.557 7.62667 154.349 7.85067 154.2 8.128C154.051 8.40533 153.976 8.69867 153.976 9.008C153.976 9.30667 154.051 9.6 154.2 9.888C154.349 10.1653 154.557 10.3893 154.824 10.56C155.091 10.7307 155.395 10.816 155.736 10.816ZM163.576 18.192C162.989 18.192 162.461 18.0533 161.992 17.776C161.523 17.488 161.144 17.1093 160.856 16.64C160.579 16.1707 160.44 15.648 160.44 15.072C160.44 14.496 160.579 13.9733 160.856 13.504C161.144 13.024 161.523 12.6453 161.992 12.368C162.461 12.0907 162.989 11.952 163.576 11.952C164.152 11.952 164.675 12.0907 165.144 12.368C165.613 12.6453 165.987 13.024 166.264 13.504C166.541 13.9733 166.68 14.496 166.68 15.072C166.68 15.648 166.541 16.1707 166.264 16.64C165.987 17.1093 165.613 17.488 165.144 17.776C164.675 18.0533 164.152 18.192 163.576 18.192ZM163.576 16.88C163.928 16.88 164.232 16.7947 164.488 16.624C164.755 16.4533 164.957 16.2293 165.096 15.952C165.245 15.6747 165.32 15.3813 165.32 15.072C165.32 14.752 165.245 14.4587 165.096 14.192C164.957 13.9147 164.755 13.6907 164.488 13.52C164.232 13.3387 163.928 13.248 163.576 13.248C163.235 13.248 162.925 13.3387 162.648 13.52C162.381 13.6907 162.173 13.9147 162.024 14.192C161.875 14.4693 161.8 14.7627 161.8 15.072C161.8 15.3707 161.875 15.664 162.024 15.952C162.173 16.2293 162.381 16.4533 162.648 16.624C162.925 16.7947 163.235 16.88 163.576 16.88Z" fill="#292929"/>
                                 </svg>
                              </td>
                              <td>Demographic Details</td>
                              <td>
                                 <button class="badges-red btn text-danger">20</button>
                              </td>
                              <td>
                                 <div class="userDatatable-content">
                                    <a href="#">
                                    View More >>
                                    </a>
                                 </div>
                              </td>
                              <td>
                              </td>
                           </tr>
                        </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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></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).ready(function(){
   
       // Load sections when class changes
       $(document).on('change', '.assigned-class', function(){
           let classId = $(this).val();
           let userId  = $(this).data('user-id');
           let sectionDropdown = $(this).closest('td').find('.assigned-section');
   
           sectionDropdown.html('<option value="">Loading...</option>');
   
           $.ajax({
               url: "{{ url('sections') }}/" + classId,
               type: "GET",
               success: function(res){
                   sectionDropdown.html('<option value="">Select Section</option>');
                   $.each(res, function(key, section){
                       sectionDropdown.append('<option value="'+section.id+'">'+section.name+'</option>');
                   });
               }
           });
   
           updateAssignedClass(userId, classId, null);
       });
   
       $(document).on('change', '.assigned-section', function(){
           let sectionId = $(this).val();
           let userId    = $(this).data('user-id');
           let classId   = $(this).closest('td').find('.assigned-class').val();
           updateAssignedClass(userId, classId, sectionId);
       });
   
           function updateAssignedClass(userId, classId, sectionId){
               $.ajax({
                   url: "{{ url('update-user-assigned-class') }}",
                   type: "POST",
                   data: {
                       _token: "{{ csrf_token() }}",
                       user_id: userId,
                       class_id: classId,
                       section_id: sectionId
                   },
                   success: function(res){
                       toastr.success('Assigned Class 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!'
                   });
               }
           });
       });
   
   
   
   
       // 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