@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="{{route('classes.index')}}">
                        <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>
                        Classes & Student
                     </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>Class 12th students</span>
                  </li>
                   <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 class="dm-breadcrumb__item">
                     <span>Add Student</span>
                  </li>
               </ul>
            </div>

        
                          <div class=" py-4">

                                 <h2 class="breadcrumb-title">Add Student</h2>
                                <p class="text-muted mb-4">Add basic data of Student</p>

                                <form id="studentForm" class="row g-3">
                                    @csrf
                                        <div class="col-md-4">
                                            <label class="form-label">Name <span class="text-danger">*</span></label>
                                            <input type="text" name="name" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Student Name" required>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Grade/Class <span class="text-danger">*</span></label>
                                            <div class="dm-select ">
                                            <select  name="class_id" id="class_id" class="form-control ih-medium ip-light radius-xs b-light px-15" required>
                                                <option value="">Select Class</option>
                                                @foreach($class as $value)
                                                <option value="{{$value->id}}">{{$value->name}}</option>
                                                @endforeach
                                            </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Section <span class="text-danger">*</span></label>
                                            <select name="section_id" id="section_id" class="form-control ih-medium ip-light radius-xs b-light px-15" required>
                                                <option value="">Select Section</option>
                                                
                                            </select>
                                        </div>

                                        <div class="col-md-4">
<div class="dm-date-picker">
<div class="form-group mb-0 form-group-calender">
    <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
<div class="position-relative">
<input type="date" class="form-control form-control-lg" name="dob"  placeholder="DD/MM/YYYY" required>
<a href="#"></a>
</div>
</div>
</div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Email <span class="text-danger">*</span></label>
                                            <input type="email" name="email" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Email" required>
                                        </div>

                                        <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">+91</span>
                                                <input type="text" name="mobile" class="form-control ih-medium ip-light radius-xs b-light px-15" pattern="[6-9][0-9]{9}" maxlength="10" title="Enter valid 10 digit Indian mobile number starting with 6,7,8, or 9" placeholder="Enter Mobile" required>
                                            </div>
                                        </div>

                                        <!-- Parent Info -->
                                        <div class="col-12 mt-3">
                                            <h5>Guardian Information</h5>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Select Relation<span class="text-danger">*</span></label>
                                            <div class="dm-select ">
                                            <select id="select-size-1" class="form-control ih-medium ip-light radius-xs b-light px-15" name="families[0][relation]">
                                                <option value="Mother">Mother</option>
                                                <option value="Father">Father</option>
                                                <option value="Guardian">Guardian</option>
                                            </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Name</label>
                                            <input type="text" name="families[0][name]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Name">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="families[0][email]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Email">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Mobile</label>
                                            <input type="text" name="families[0][mobile]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Mobile" pattern="[6-9][0-9]{9}" maxlength="10" title="Enter valid 10 digit Indian mobile number starting with 6,7,8, or 9">
                                        </div>

                                        <!-- Father -->
                                        <div class="col-md-3">
                                            <label class="form-label">Select Relation<span class="text-danger">*</span></label>
                                            <div class="dm-select ">
                                            <select id="select-size-1" class="form-control ih-medium ip-light radius-xs b-light px-15" name="families[1][relation]">
                                                <option value="Father">Father</option>
                                            </select>
                                            </div>
                                                         </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Name</label>
                                            <input type="text" name="families[1][name]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Name">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="families[1][email]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Email">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Mobile</label>
                                            <input type="text" name="families[1][mobile]" class="form-control ih-medium ip-light radius-xs b-light px-15" pattern="[6-9][0-9]{9}" maxlength="10" title="Enter valid 10 digit Indian mobile number starting with 6,7,8, or 9" placeholder="Enter Mobile">
                                        </div>


                                        <div class=" mt-4 d-flex justify-content-end">
                                            <button type="submit" id="studentSubmit" class="btn btn-primary wh-50 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');
    });
    
    $('#studentForm').submit(function(e){
        e.preventDefault();

       let id = $('#student_id').val();
const url = "{{ route('student.store') }}";
let method = id ? 'PUT' : 'POST';


        $.ajax({
            url: url,
            type: method,
            data: $(this).serialize(),
            success: function(res){
                $('#modal-user').modal('hide');
               Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: id ? 'Student updated successfully' : 'Student created successfully',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    window.location.href = '/classes';
                });

            },
            error: function(xhr){
                Swal.fire({icon:'error',title:'Error',text:xhr.responseJSON.message || 'Something went wrong'});
            }
        });
    });

    $('#class_id').change(function(){
        let classId = $(this).val();
        if(!classId) return;

        $.get(`/sections/${classId}`,function(res){
            $('#section_id').html('<option value="">Select Section</option>');
            $.each(res,function(k,v){
                $('#section_id').append(`<option value="${v.id}">${v.name}</option>`);
            });
        });
    });




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