@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">
                    <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->name}} Students</span>
   </li>
</ul>
                </div>
                <!-- Header -->
                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">List of {{$class->name}} Students</h2>
                       <div class="d-flex justify-content-end">
                         <button class="btn btn-default btn-squared color-primary btn-outline-primary  me-3" href="{{url('student-create')}}" data-bs-toggle="modal" data-bs-target="#modal-basic">Add Section <i class="fa-solid fa-plus ms-2"></i>
                         </button>
                        <a class="btn btn-primary btn-squared" href="{{url('student-create')}}">Add Student <i class="fa-solid fa-plus ms-2"></i>
                        </a>
                       </div>
                        
                    </div>
                </div>
               <div class="mb-2 d-flex justify-content-between align-items-center">
                 <div class="col-lg-3 d-flex align-items-center">
                    <div class="dm-select w-100 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>
<svg width="60" height="60" viewBox="0 0 56 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="52" rx="6" fill="white"/>
<path d="M33.0619 31.028L37.75 35.75M35.5833 24.9167C35.5833 29.7032 31.7032 33.5833 26.9167 33.5833C22.1302 33.5833 18.25 29.7032 18.25 24.9167C18.25 20.1302 22.1302 16.25 26.9167 16.25C31.7032 16.25 35.5833 20.1302 35.5833 24.9167Z" stroke="#7A7A7A" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>


                </div>
                <div class="d-flex justify-content-end">
                    <p class="m-0 me-3 fw-600 showing-color-tablesearch">Showing Result: 125</p>
                </div>
               </div>

                <!-- Student Table -->
                <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>S.No.</th>
                                        <th>Student UID</th>
                                        <th>Student Name</th>
                                        <th>Health Score</th>
                                        <th>Risk Level</th>
                                        <th>Attendence %</th>
                                        <th>Questionaire Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($students as $key => $student)
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $student->uid }}</td>
                                        <td>{{ $student->name }}</td>
                                        <td class="text-center">85/100</td>
                                        <td class="text-center">
                                        <bedge class="risklavel-low">Low</bedge>
                                        </td>
                                        <td class="text-center">96%</td>
                                        <td class="text-center"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#01B81A" fill-rule="evenodd" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m-.232-5.36l5-6l-1.536-1.28l-4.3 5.159l-2.225-2.226l-1.414 1.414l3 3l.774.774z" clip-rule="evenodd"/></svg></td>
                                        <td>
                                            <div class="userDatatable-content d-flex justify-content-end align-items-center">
     <div class="d-flex gap-2 align-items-center">
                   <a href="#" class="me-3">
                    View Profile &gt;&gt;
                </a>
    <a href="" class="btn btn-icon  btn-primary-light btn-squared btn-custom-action"><i class="fa-solid fa-pen"></i></a>
     </div>


                </div>
                                        </td>
                                        {{-- <td class="text-end">
                                            <a href="javascript:void(0)" 
                                               class="btn btn-sm btn-success edit-student"
                                               data-id="{{ $student->id }}">
                                                Edit
                                            </a>
                                            <a href="javascript:void(0)" 
                                               class="btn btn-sm btn-danger delete-student"
                                               data-id="{{ $student->id }}">
                                                Delete
                                            </a>
                                        </td> --}}
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 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">Add Student</h3>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <form id="studentForm">
                                    @csrf
                                    <input type="hidden" name="id" id="student_id">

                                    <div class="row g-3">
                                        <!-- Student Info -->
                                        <div class="col-md-4">
                                            <label class="form-label">Name <span class="text-danger">*</span></label>
                                            <input type="text" name="name" class="form-control" placeholder="Enter Student Name" required>
                                        </div>

                                               <input type="hidden" value="{{$class->id}}" name="class_id" id="class_id" class="form-control" required>
                                               <input type="hidden" value="{{$institute_id}}" name="institute_id" id="institute_id" class="form-control" required>

                                        <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" required>
                                                <option value="">Select Section</option>
                                                @foreach($class->sections as $value)
                                                <option value="{{$value->id}}">{{$value->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Date of Birth <span class="text-danger">*</span></label>
                                            <input type="date" name="dob" class="form-control" required>
                                        </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" 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" 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</label>
                                             <select class="form-control" name="relation" id="relation">
                                                 <option value="">Select an Option</option>
                                                <option value="Mother">Mother</option>
                                             </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Mother’s Name</label>
                                            <input type="text" placeholder="Enter Name" name="" class="form-control">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Mother’s Email</label>
                                            <input type="email" placeholder="Enter Email" name="email" class="form-control">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Mother’s Mobile</label>
                                            <input type="text" placeholder="+91" name="mobile_number" class="form-control">
                                        </div>


                                         <div class="col-md-3">
                                            <label class="form-label">Select Relation</label>
                                             <select class="form-control" name="relation" id="relation">
                                                 <option value="">Select an Option</option>
                                                <option value="Father">Father</option>
                                             </select>
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Father’s Name</label>
                                            <input type="text" name="name" placeholder="Enter Name" class="form-control">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Father’s Email</label>
                                            <input type="email" placeholder="Enter Email" name="email" class="form-control">
                                        </div>

                                        <div class="col-md-3">
                                            <label class="form-label">Father’s Mobile</label>
                                            <input type="text"  placeholder="+91" name="mobile_number" class="form-control">
                                        </div>

                                        <div class="col-md-12 text-center mt-3">
                                            <button type="submit" id="studentSubmit" class="btn btn-primary w-50">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Modal -->


                <div class="modal-basic modal fade show" id="modal-basic" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content modal-bg-white custom-scroll">
 <div class="modal-header">
                                <h3 class="modal-title">Add Section</h3>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
<div class="modal-body">
<form>
<div class="row g-3">
<div class="form-group col-12 mb-3">
        <label for="class_name" class="il-gray fs-16 fw-500 align-center mb-10">For Class</label>
        <input type="text" id="class_name" name="name" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Class 12th" required="">
    </div>
    <div class="form-group col-8 mb-3">
        <label for="class_name" class="il-gray fs-16 fw-500 align-center mb-10">Section Name</label>
        <input type="text" id="class_name" name="name" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Section Name" required="">
    </div>
     <div class="form-group col-4 mb-3">
        <label for="class_name" class="il-gray fs-16 fw-500 align-center mb-10">Total Students</label>
        <input type="text" id="class_name" name="name" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Total Students" required="">
    </div>
</div>
<div class="modal-footer">
<button type="submit"  class="btn btn-primary btn-default btn-rounded w-100 mx-auto mt-3">Save</button>
</div>
</div>
</div>
</div>

            </div>
        </div>
    </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function(){

    $('[data-bs-target="#modal-user"]').on('click', function(){
        $('#studentForm')[0].reset();
        $('#student_id').val('');
        $('.modal-title').text('Add Student');
        $('#studentSubmit').text('Save');
    });

    $('#studentForm').submit(function(e){
        e.preventDefault();

        let id = $('#student_id').val();
        let url = id ? `/student/${id}` : `/student`;
        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:res.message,timer:2000,showConfirmButton:false})
                .then(()=>location.reload());
            },
            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>`);
            });
        });
    });

    $(document).on('click', '.delete-student', function(){
        let id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "This student will be deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if(result.isConfirmed){
                $.ajax({
                    url: `/student/${id}`,
                    type: 'DELETE',
                    data: {_token: '{{ csrf_token() }}'},
                    success: function(res){
                        Swal.fire({icon:'success',title:'Deleted',timer:1500,showConfirmButton:false})
                        .then(()=>location.reload());
                    }
                });
            }
        });
    });

});
</script>
@endsection