@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add Teacher</title>

<style>
    .input {
        color: #697a8d;
    }

    #loader {
        text-align: center;
        /* Align the loader to the center */
        margin-left: 15px;
        /* Adjust this value to manage space between loader and button */
        width: auto;
        display: inline-block;
    }

    #loader img {
        width: 30px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: #697a8d !important;
    }

    #subjectid {
        display: inline-block !important;
        width: auto !important;
        margin-left: 5px;
        border-color: #697a8d;
    }

    .select2-selection {
        border-color: #dae0e7 !important;
    }

    /* Styles for the Select2 dropdown when focused or hovered */
    .select2-container--focus .select2-selection,
    .select2-selection:hover {
        border-color: #696cff !important;
    }

    /* Styles for the Select2 dropdown when active (clicked) */
    .select2-container--open .select2-selection {
        border-color: #696cff !important;
    }

    .select2-selection--single .select2-selection__rendered {
        color: #697a8d !important;
    }
</style>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

@include('datepicker')
@section('main-content')
    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New Teacher</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Teacher Details</h5>
                            <!-- <small class="text-muted float-end">Merged input group</small> -->
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url('add-new-teacher') }}" enctype="multipart/form-data">
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">First Name</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="fname" id="fname" placeholder="John"
                                            class="form-control input form-control-line" minlength="3" maxlength="30"
                                            onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Last Name</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="lname" id="lname" placeholder="Last Name"
                                            class="form-control input form-control-line" minlength="3" maxlength="30"
                                            onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="teacher_type" class="form-label">Select Role</label>
                                    <div class="input-group input-group-merge">
                                        <span id="basic-icon-default-teacher_type" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <!-- Dropdown for selecting teacher_type -->
                                        <select name="teacher_type" id="teacher_type"
                                            class="form-select input form-control-line">
                                            <option value="2" selected>
                                                Teacher
                                            </option>
                                            <option value="5">
                                                Coordinator
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Email</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bx bx-envelope"></i></span>
                                        <input type="email" placeholder="john.doe@gmail.com"
                                            class="form-control input form-control-line" name="email" id="email"
                                            pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
                                            title="Please Enter Valid Email : example@mail.com" autocomplete="off">
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-phone">Phone No</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-phone2" class="input-group-text"><i
                                                class="bx bx-phone"></i></span>
                                        <input type="text" placeholder="Ex: 65879XXXXX" name="phone"
                                            onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                            id="phone" class="form-control input form-control-line" minlength="10"
                                            maxlength="10" pattern="[0-9]{1}[0-9]{9}"
                                            title="Please Enter Valid 10 digits Phone Number" autocomplete="off">
                                        @error('phone')
                                            <span class="text-danger row">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Date Of Birth</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class='bx bx-calendar'></i></span>
                                        <input type="text" class="form-control input form-control-line bg-white"
                                            id="date_of_birth" placeholder="Select date of birth" readonly
                                            autocomplete="off">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Gender</label>
                                    <div class="input-group input-group-merge">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <!-- Dropdown for selecting gender -->
                                        <select name="gender" id="gender"
                                            class="form-select input form-control-line">
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Image</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-education" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="file" class="form-control input form-control-line" id="image"
                                            accept="image/jpg, image/jpeg, image/png">
                                    </div>
                                    <div class="form-text">( <strong>Max size: 2MB</strong> )</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Education</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-education" class="input-group-text"><i
                                                class='bx bxs-graduation'></i></span>
                                        <select id="education_type" class="form-control input form-control-line w-25">
                                            <option value="0" selected disabled hidden>Choose Education Type</option>
                                            <option value="1">Diploma</option>
                                            <option value="2">Bachelor's</option>
                                            <option value="3">Master's</option>
                                            <option value="4">P.H.D</option>
                                        </select>
                                        <input type="text" id="course_name" placeholder="Stream Name"
                                            class="form-control input form-control-line w-25" minlength="3"
                                            maxlength="50" onkeydown="return /[a-zA-Z\s.]/i.test(event.key)"
                                            autocomplete="off">
                                        <input type="text" id="course_specialization"
                                            placeholder="Specialization/Honours (Optional)"
                                            class="form-control input form-control-line w-25" maxlength="50"
                                            onkeydown="return /[a-zA-Z\s.]/i.test(event.key)" autocomplete="off">
                                    </div>
                                    <div class="form-text">Add only recently done course</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Proof Of Education /
                                        Certifications</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-education" class="input-group-text"><i
                                                class='bx bx-book-reader'></i></span>
                                        <input type="file" class="form-control input form-control-line"
                                            id="education_proof" accept="application/pdf">
                                    </div>
                                    <div class="form-text">Upload only single pdf file ( <strong>Max size: 2MB</strong> )
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Total Experience</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-education" class="input-group-text"><i
                                                class='bx bx-clipboard'></i></span>
                                        <input type="text" id="experience_years" placeholder="Years"
                                            class="form-control input form-control-line w-25"
                                            onkeydown="allowNumberOnly(event)" maxlength="2" autocomplete="off">
                                        <input type="text" id="experience_months" placeholder="Months"
                                            class="form-control input form-control-line w-25"
                                            onkeydown="allowNumberOnly(event)" maxlength="2" autocomplete="off">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Proof Of
                                        Experience</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-education" class="input-group-text"><i
                                                class='bx bx-book-content'></i></span>
                                        <input type="file" class="form-control input form-control-line"
                                            id="experience_proof" accept="application/pdf">
                                    </div>
                                    <div class="form-text">Upload only single pdf file ( <strong>Max size: 2MB</strong> )
                                    </div>
                                </div>
                                {{-- <div class="mb-3">
              <label class="form-label" for="basic-icon-default-fullname">Class</label>
                <div class="input-group">
                  <span id="basic-icon-default-education" class="input-group-text"><i class='bx bx-book-alt'></i></span>
                  <select name="class_name" id="class_name" class="form-select input form-control-line">
                    <option value="" selected disabled>Select Class</option>
                    <option value="Play Group">Play Group</option>
                    <option value="Nursery">Nursery</option>
                    <option value="Junior KG">Junior KG/option>
                    <option value="Senior KG">Senior KG</option>
                    @foreach ($other_class_names as $class_name)
                      <option value="{{$class_name}}">{{$class_name}}</option>
                    @endforeach
                  </select>
                </div>
               
              </div> --}}
                                <div>
                                    <div class="form-group loaderbtn_div">
                                        <button type="button" class="btn btn-success text-white" onclick="getuser()"
                                            id="save_btn">Save</button>
                                        <div class="loaderDiv" id="loader" style="display: none;">
                                            <!-- Your loader HTML or spinner goes here -->
                                            <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                        </div>
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        jQuery(function($) {
            let maxi = new Date(),
                mini = new Date();
            maxi.setFullYear(maxi.getFullYear() - 18);
            mini.setFullYear(mini.getFullYear() - 70);
            $("#date_of_birth").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: maxi,
                minDate: mini,
                maxDate: maxi,
                changeMonth: true,
                changeYear: true,
                yearRange: "c-52:c",
            }).on('click', function() {
                $(this).datepicker('show');
            });
        });

        jQuery(document).ready(function($) {
            $('#subjectid').select2({
                placeholder: 'Select Subjects',
                // Additional configurations for Select2
            });
        });

        function allowNumberOnly(evt) {
            var theEvent = evt || window.event;
            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
                // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if (!regex.test(key) && evt.keyCode != 8) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault) theEvent.preventDefault();
            }
        }

        function getuser() {
            $('.text-danger').remove();
            $("#save_btn").prop("disabled", true);
            $('#loader').show();
            let formData = new FormData();
            const email = ($('#email').val()).trim();
            const fname = ($('#fname').val()).trim();
            const lname = ($('#lname').val()).trim();
            const phone = ($('#phone').val()).trim();
            const gender = ($('#gender').val()).trim();
            const teacher_type = ($('#teacher_type').val());
            const dob = ($("#date_of_birth").val()).trim();
            const education_type = $("#education_type").val();
            const image = $("#image").prop('files')[0];
            const course_name = ($("#course_name").val()).trim();
            const course_specialization = ($("#course_specialization").val()).trim();
            const experience_years = ($("#experience_years").val()).trim();
            const experience_months = ($("#experience_months").val()).trim();
            const education_proof = $('#education_proof').prop('files')[0];
            const experience_proof = $('#experience_proof').prop('files')[0];
            const role = teacher_type;

            formData.append('fname', fname);
            formData.append('lname', lname);
            formData.append('email', email);
            formData.append('phone', phone);
            formData.append('gender', gender);
            // formData.append('class_name', class_name);
            // new fields added
            formData.append('date_of_birth', dob);
            formData.append('education_type', education_type);
            formData.append('course_name', course_name);
            formData.append('course_specialization', course_specialization);
            formData.append('image', image ? image : "");
            formData.append('education_proof', education_proof ? education_proof : "");
            formData.append('experience_years', experience_years);
            formData.append('experience_months', experience_months);
            formData.append('experience_proof', experience_proof ? experience_proof : "");
            formData.append('role', role);

            $.ajax({
                type: "post",
                url: "{{ route('teachers.store') }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    if ($.isEmptyObject(data.error) && $.isEmptyObject(data.errorexp)) {
                        window.location.href = data.success;
                    } else {
                        // printErrorMsg(data.error);
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error[0] + '</span>');
                            }
                        });

                        $.each(data.errorexp, function(field_name, error) {
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error + '</span>');
                            }
                        });

                    }
                    $("#save_btn").prop("disabled", false);

                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $("#save_btn").prop("disabled", false);

                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $("#save_btn").prop("disabled", false);

                }

            })
        }

        $("#experience_months").on("keyup", function(e) {
            const month_check = $("#experience_months").val();
            if (month_check > 12) {
                $('#experience_months').closest('div').after(
                    `<span class="text-strong text-danger">Month should be less than or equal to 12</span>`);
            } else {
                $(".text-danger").remove();
            }
        });
    </script>
@endsection