@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Students List</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }
</style>
@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Edit Student: ({{ $student->name }})</h2>
    </div>
    <div class="grid grid-cols-12 gap-6">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9">
            <!-- BEGIN: Display Information -->
            <div class="intro-y box lg:mt-5">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Tusion Information</h2>
                </div>
                <div class="p-5">
                    <div class="flex flex-col-reverse xl:flex-row flex-col">
                        <div class="flex-1 mt-6 xl:mt-0">
                            <form action="{{ route('student.update', $student->id) }}" method="post" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                            <div class="grid grid-cols-12 gap-x-5">
                                <div class="col-span-12 2xl:col-span-6">


                                </div>

                                <div class="col-span-12 2xl:col-span-6">

                                </div>

                            </div>
                        </div>
                        <div class="w-52 mx-auto xl:mr-0 xl:ml-6">
                            <div class="border-2 border-dashed shadow-sm border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                                <div class="h-40 relative image-fit cursor-pointer zoom-in mx-auto">
                                    <img class="rounded-md" id="st_img" alt="Midone - HTML Admin Template" src="{{ asset('student_images/' .$student->image) }}" data-action="zoom" class="w-full rounded-md">
                                    <div title="Remove this profile photo?" class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                        <i data-lucide="x" class="w-4 h-4"></i>
                                    </div>
                                </div>
                                <div class="mx-auto cursor-pointer relative mt-5">
                                    <button type="button" class="btn btn-primary w-full">Change Photo</button>
                                    <input type="file" id="image" name="image" class="w-full h-full top-0 left-0 absolute opacity-0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END: Display Information -->
            <!-- BEGIN: Personal Information -->
            <div class="intro-y box mt-5">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Personal Information</h2>
                </div>
                <div class="p-5">
                    <div class="grid grid-cols-12 gap-x-5">
                        <div class="col-span-12 xl:col-span-6">
                            <div>
                                <label for="update-profile-form-6" class="form-label">Name</label>
                                <input id="update-profile-form-6" type="text" name="name" class="form-control" placeholder="Input text" value="{{ $student->name }}" >
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-7" class="form-label">Private Number</label>
                                <input id="update-profile-form-7" type="text" name="private_phone" class="form-control" placeholder="Input text" value="{{ $student->private_phone }}" >
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-8" class="form-label">Gender</label>
                                <select id="update-profile-form-8" name="sex" class="form-select">
                                    <option>Select Gender</option>
                                    <option value="male" @if($student->sex == 'male') selected @endif>Male</option>
                                    <option value="female" @if($student->sex == 'female') selected @endif>Female</option>
                                </select>
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-9" class="form-label">Email</label>
                                <input id="update-profile-form-9" name="email" type="text" class="form-control" placeholder="Input text" value="{{ $student->email }}">
                            </div>

                            <div class="mt-3">
                                <label for="update-profile-form-9" class="form-label">Status</label>
                                {{-- <input id="update-profile-form-9" name="status" type="text" class="form-control" placeholder="Input text" value="{{ $student->status }}"> --}}
                                <select id="update-profile-form-8" name="status" class="form-select">
                                    <option>Select Status</option>
                                    <option value="active" @if($student->status == 'active') selected @endif>Active</option>
                                    <option value="deactive" @if($student->status == 'deactive') selected @endif>Deactive</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-span-12 xl:col-span-6">
                            <div class="mt-3 xl:mt-0">
                                <label for="update-profile-form-10" class="form-label">Father Name</label>
                                <input id="update-profile-form-10" name="father_name" type="text" class="form-control" placeholder="Input text" value="{{ $student->father_name }}">
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-11" class="form-label">Family Number</label>
                                <input id="update-profile-form-11" name="family_phone" type="text" class="form-control" placeholder="Input text" value="{{ $student->family_phone }}">
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-12" class="form-label">Discount</label>
                                <select id="update-profile-form-12" data-search="true" name="discount" class="tom-select w-full">
                                    <option value="">Select Discount</option>
                                    <option value="1" @if($student->discount == 1) selected @endif>Allowed</option>
                                    <option value="0" @if($student->discount == 0) selected @endif>Not Allowed</option>
                                </select>
                            </div>
                            <div class="mt-3">
                                <label for="update-profile-form-13" class="form-label">Birthday</label>
                                <input type="text" name="birthday" class="datepicker form-control  block mx-auto" data-single-mode="true" value="{{ $student->birthday }}">
                            </div>

                            <div class="mt-3">
                                <label for="update-profile-form-13" class="form-label">Reference Phone</label>
                                <input id="update-profile-form-13" type="text" name="ref_phone" class="form-control" placeholder="Input text" value="{{ $student->ref_phone }}">
                            </div>
                        </div>

                    </div>
                    <div class="flex justify-end mt-4">
                        <button type="submit" class="btn btn-primary w-20 mr-auto">Save</button>
                    </form>

                    <form action="{{ route('student.delete') }}" method="get">
                        <input type="hidden" name="id" id="" value="{{ $student->id }}">
                        <button href="" class="text-danger flex items-center">
                            <i data-lucide="trash-2" class="w-4 h-4 mr-1"></i> Delete Account
                        </button>
                    </form>

                    </div>
                </div>
            </div>
            <!-- END: Personal Information -->
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>

    <script>
        $(document).ready(function() {

          var img =  document.getElementById('st_img');
          var fl =  document.getElementById('image');
          fl.onchange = evt => {
            const [file] = fl.files;
            if(file){
                img.src = URL.createObjectURL(file);
            }
          }
        });

        function get_class_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#semester_id').html(response);

                }
            });
        }
        function get_section_courses(section_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/course/') }}",
                data: {
                    s_id: section_id,
                },

                success: function(response) {
                    jQuery('#section_selector_holder').html(response);

                }
            });

        }
        function getSection(semester_id) {

            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },

                success: function(response) {
                    jQuery('#section_id').html(response);

                }
            });
        }

        function get_section_students(class_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/students') }}",
                data: {
                    class_id: class_id,
                },

                success: function(response) {
                    jQuery('#student_selector_holder').html(response);
                }
            });
        }


    </script>
@endsection