@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="{{ url('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"/>
<path d="M30.3636 27.9999L38 35.7778L35.8182 38L26 27.9999L35.8182 18L38 20.2222L30.3636 27.9999Z" fill="black"/>
</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"/>
<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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<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"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6590_53542"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6590_53542" result="shape"/>
</filter>
</defs>
</svg>

    
      Faculties & Staff
      </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"/>
</svg>

      </span>
   </li>
   <li class="dm-breadcrumb__item">
      <span>Edit Staff</span>
   </li>
</ul>
                </div>

        
                          <div class="col-lg-12">
                          <div class="mb-40">
                              <h2 class="breadcrumb-title ">Add Staff</h2>
                            <p class="text-muted breadcrumb-title-content" >Add basic data of Staff</p>
                          </div>

                                <form id="userForm" class="row g-3">
                                    @csrf
                                  <div class="row gap-3">
  <div class="col-md-4 mb-4 col-xxl-3">
    <label class="radio-box">
      <input type="radio" name="profile_type" id="teaching_staff" value="42">
      <div class="content d-flex align-items-center">
        <img class="svg" src="{{url('/')}}/admin_assets/img/themeicmr/teachin-staff.svg" alt="Teaching Staff">
        <div class="radio-text">Teaching Staff</div>
      </div>
    </label>
  </div>

  <div class="col-md-4 mb-4 col-xxl-3">
    <label class="radio-box">
      <input type="radio" name="profile_type" id="non_teaching_staff" value="43">
      <div class="content d-flex align-items-center">
        <img class="svg" src="{{url('/')}}/admin_assets/img/themeicmr/non-teaching-staff.svg" alt="Non Teaching Staff">
        <div class="radio-text">Non Teaching Staff</div>
      </div>
    </label>
  </div>
</div>

                               
                                    <input type="hidden" id="user_id" name="user_id" value="{{auth()->user()->id}}">
                                    <input type="hidden" name="user_type" id="user_type" value="2">

                                    <!-- Row 1 -->
                                    <div class="col-md-4">
                                        <label class="form-label">Name of Staff <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control ih-medium" id="name" name="name" >
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Designation <span class="text-danger">*</span></label>
                                        <select class="form-control ih-medium" name="designation" id="designation">
                                            <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 class="form-control ih-medium" name="department_id" id="department_id">
                                            <option>Select an Area of Teaching</option>
                                            @foreach(category_data(14) as $value)
                                                <option value="{{$value->id}}">{{$value->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Row 2 -->
                                    
                                     <div class="col-md-4">
                                        <label class="form-label">Mobile No <span class="text-danger">*</span></label>
                                    <div class="input-group">
   <span class="input-group-text fw-600">+91</span>
   <input  id="mobile_number" type="number" name="mobile_number"  pattern="[6-9][0-9]{9}"
           maxlength="10" class="form-control ih-medium ip-light radius-xs b-light px-15" 
      >
</div>
</div>
                                    <div class="col-md-4">
                                        <label class="form-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" class="form-control ih-medium" id="email" name="email" >
                                    </div>
                                   
                                    <div class="col-md-4">
                                        <div class="dm-date-picker">
                                             <label class="form-label" for="datepicker8" class="il-gray fs-14 fw-500 align-center mb-10">Date of Birth <span class="text-danger">*</span></label>
<div class="form-group mb-0 form-group-calender">
<div class="position-relative">
<input type="date" class="form-control ih-medium form-control-default" placeholder="DD/MM/YYYY" name="dob">
<a href="#"><img class="svg" src="{{url('/')}}/admin_assets/img/svg/calendar.svg" alt="calendar"></a>
</div>
</div>
</div>
                                        </div>

                                    <div class="col-12 text-end mt-4 d-flex justify-content-between">
                                        <button class="btn btn-default btn-squared color-danger btn-outline-danger "><i class="fa-solid fa-trash me-2"></i> Delete Staff</button>
                                        <button type="submit" class="btn btn-primary px-5">Save</button>
                                    </div>
                                </form>
                            </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('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');
    });
    $('#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();


        // Validation for Staff (user_type = 2)
        if(user_type == '2'){
            if(!$('#profile_type').val()){
                toastr.error('Staff Type is required!');
                return;
            }
            if(!name){
                toastr.error('Name 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(!email){
                toastr.error('Email is required!');
                return;
            }
            if(!$('.dob').val()){
            toastr.error('Date of Birth is required!');
            return;
            }
        }
        // Prepare AJAX
        const url = "{{ route('users.store') }}";
        let formData = new FormData(this);
        if(id) formData.append('_method','POST');

        $.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 ? 'Staff updated successfully' : 'Staff created successfully',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = '/staff-management';
                });

            },
            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