@extends('layouts.admin')
<title>{{ config('app.name', 'Laravel') }} | Admin | Edit Teacher</title>
<style>
    .input {
        color: black
    }

    #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>
<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="col-md-6 alert alert-danger print-error-msg" style="display:none">
        <ul></ul>
    </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> Edit 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('update-user') }}" enctype="multipart/form-data">
                                <input type="hidden" name="user_id" id="user_id" value="{{ $user[0]['id'] }}">
                                <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-firstname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="fname" id="fname"
                                            value="{{ $user[0]['first_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 class="form-label" for="basic-icon-default-fullname">Last Name</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-lastname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="text" name="lname" id="lname"
                                            value="{{ $user[0]['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 class="form-label" for="basic-icon-default-email">Email</h6></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bx bx-envelope"></i></span>
                                        <input class="form-control input form-control-line" value="{{ $user[0]['email'] }}"
                                            readonly autocomplete="off">
                                        {{-- <input type="email" class="form-control input form-control-line" placeholder="Enter new email id" name="email" id="email" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"> --}}
                                    </div>
                                    {{-- <div class="form-text">You can use letters, numbers & periods</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" value="{{ $user[0]['phone'] }}"
                                            class="form-control input form-control-line" readonly autocomplete="off">
                                        {{-- <input type="text" name="phone" id="phone" placeholder="Ex: 98456XXXXX" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" 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"> --}}
                                    </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" value="{{ dateformatter($user[0]['dob']) }}" 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" {{ $user[0]['gender'] == 'Male' ? 'selected' : '' }}>
                                                Male
                                            </option>
                                            <option value="Female" {{ $user[0]['gender'] == 'Female' ? 'selected' : '' }}>
                                                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-book-reader'></i></span>
                                        <a class="form-control input form-control-line"
                                            href="{{ isset($user[0]->profile_photo_path) ? url($user[0]->profile_photo_path) : 'javascript:void(0)' }}"
                                            target="_blank" style="background-color: #eceef1;">
                                            {{ isset($user[0]->profile_photo_path) ? \Illuminate\Support\Str::limit($user[0]->profile_photo_path, 50) : '' }}
                                        </a>
                                        <input type="file" class="form-control input form-control-line" id="image"
                                            accept="image/jpg, image/jpeg, image/png">
                                        <button id="basic-icon-default-education"
                                            class="input-group-text remove_img d-none" type="button">remove</button>
                                    </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">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="1"
                                                {{ isset($user[0]->educationdetails) ? ($user[0]->educationdetails->education_type == 1 ? 'selected' : '') : '' }}>
                                                Diploma</option>
                                            <option value="2"
                                                {{ isset($user[0]->educationdetails) ? ($user[0]->educationdetails->education_type == 2 ? 'selected' : '') : '' }}>
                                                Bachelor's</option>
                                            <option value="3"
                                                {{ isset($user[0]->educationdetails) ? ($user[0]->educationdetails->education_type == 3 ? 'selected' : '') : '' }}>
                                                Master's</option>
                                            <option value="4"
                                                {{ isset($user[0]->educationdetails) ? ($user[0]->educationdetails->education_type == 4 ? 'selected' : '') : '' }}>
                                                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"
                                            value="{{ isset($user[0]->educationdetails) ? $user[0]->educationdetails->name : '' }}"
                                            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"
                                            value="{{ isset($user[0]->educationdetails) ? $user[0]->educationdetails->specialization : '' }}"
                                            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>
                                        @if (isset($user[0]->educationdetails->save_pdf))
                                            <a class="form-control input form-control-line" id="upload_exp_proof"
                                                href="{{ url( $user[0]->educationdetails->save_pdf) }}"
                                                target="_blank"
                                                style="background-color: #eceef1;">{{ \Illuminate\Support\Str::limit('ex_' . $user[0]->educationdetails->save_pdf, 50) }}</a>
                                        @else
                                            <a class="form-control input form-control-line" id="upload_exp_proof"
                                                href="javascript: void(0)" style="background-color: #eceef1;"></a>
                                        @endif
                                        <input type="file" class="form-control input form-control-line"
                                            id="education_proof" accept="application/pdf">
                                        <button id="basic-icon-default-education"
                                            class="input-group-text remove_ed_proof d-none" type="button">remove</button>
                                    </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"
                                            value="{{ isset($user[0]->experiencedetails->years) ? $user[0]->experiencedetails->years : '' }}"
                                            onkeydown="allowNumberOnly(event)" maxlength="2" autocomplete="off">
                                        <input type="text" id="experience_months" placeholder="Months"
                                            class="form-control input form-control-line w-25"
                                            value="{{ isset($user[0]->experiencedetails->months) ? $user[0]->experiencedetails->months : '' }}"
                                            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>
                                        @if (isset($user[0]->experiencedetails->save_pdf))
                                            <a class="form-control input form-control-line" id="upload_exp_proof"
                                                href="{{ url($user[0]->experiencedetails->save_pdf) }}"
                                                target="_blank"
                                                style="background-color: #eceef1;">{{ \Illuminate\Support\Str::limit('ex_' . $user[0]->experiencedetails->save_pdf, 50) }}</a>
                                        @else
                                            <a class="form-control input form-control-line" id="upload_exp_proof"
                                                href="javascript: void(0)" style="background-color: #eceef1;"></a>
                                        @endif
                                        <input type="file" class="form-control input form-control-line"
                                            id="experience_proof" accept="application/pdf">
                                        <button id="basic-icon-default-education"
                                            class="input-group-text remove_exp_proof d-none"
                                            type="button">remove</button>
                                    </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">Remove Experience</label>
                                    <div>
                                        <input name="rem_exp" type="radio" id="remove_exp1" value="yes"
                                            style="margin-right: 0.10%;cursor: pointer;">
                                        <label for="remove_exp1" class="w-25" style="cursor: pointer;"> Yes</label>
                                        <input name="rem_exp" type="radio" id="remove_exp2" value="no"
                                            style="margin-right: 0.10%;cursor: pointer;" checked>
                                        <label for="remove_exp2" class="w-25" style="cursor: pointer;"> No</label>
                                    </div>
                                </div>
                                <div class="form-group loaderbtn_div">
                                    <button type="button" class="btn btn-success text-white" onclick="getuser()"
                                        id="update_btn">Update</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>
    <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();
            }
        }

        $("#remove_exp1").on("change", function() {
            $("#remove_exp2").prop("checked", false);
            $("#experience_years").val("");
            $("#experience_years").prop("readonly", true);
            $("#experience_months").val("");
            $("#experience_months").prop("readonly", true);
            $("#upload_exp_proof").attr("href", "javascript: void(0)");
            $("#upload_exp_proof").text("");
            $("#upload_exp_proof").removeAttr("target");
            $('#experience_proof').val(null);
            $('#experience_proof').addClass("d-none");
            $('.remove_exp_proof').addClass("d-none");
        });

        $("#remove_exp2").on("change", function() {
            $('#experience_proof').removeClass("d-none");
            $("#experience_years").prop("readonly", false);
            $("#experience_months").prop("readonly", false);

            $("#remove_exp1").prop("checked", false);
            $("#experience_years").val(
                '{{ isset($user[0]->experiencedetails->years) ? $user[0]->experiencedetails->years : '' }}');
            $("#experience_months").val(
                '{{ isset($user[0]->experiencedetails->months) ? $user[0]->experiencedetails->months : '' }}');

            if ("{{ isset($user[0]->experiencedetails) }}")
                $("#upload_exp_proof").attr("href",
                    "{{ isset($user[0]->experiencedetails) ? $user[0]->experiencedetails->save_pdf : '' }}"
                );
            else
                $("#upload_exp_proof").attr("href", "javascript: void(0)");
            $("#upload_exp_proof").text(
                "{{ isset($user[0]->experiencedetails) ? 'ex_' . $user[0]->experiencedetails->save_pdf : '' }}"
            );
            $("#upload_exp_proof").attr("target", "_blank");
        });

        $("#image").on("change", function() {
            if ($('#image').prop('files').length > 0) {
                $('.remove_img').removeClass("d-none");
            }
        });

        $(".remove_img").on("click", function() {
            $('#image').val(null);
            $('.remove_img').addClass("d-none");
        });

        $("#education_proof").on("change", function() {
            if ($('#education_proof').prop('files').length > 0) {
                $('.remove_ed_proof').removeClass("d-none");
            }
        });

        $('.remove_ed_proof').on("click", function() {
            $('#education_proof').val(null);
            $('.remove_ed_proof').addClass("d-none");
        });

        $("#experience_proof").on("change", function() {
            if ($('#experience_proof').prop('files').length > 0) {
                $('.remove_exp_proof').removeClass("d-none");
            }
        });

        $('.remove_exp_proof').on("click", function() {
            $('#experience_proof').val(null);
            $('.remove_exp_proof').addClass("d-none");
        });
    </script>
    <script>
        // $( document ).ready(function() {
        function getuser() {
            $("#update_btn").prop("disabled", true);
            $('.text-danger').remove();
            // Show loader while the request is being processed
            $('#loader').show();
            let formData = new FormData();
            const user_id = $('#user_id').val();
            // const email = ($('#email').val()).trim();
            const fname = ($('#fname').val()).trim();
            const lname = ($('#lname').val()).trim();
            // const phone = ($('#phone').val()).trim();
            const gender = $('#gender').val();
            // const education = $('#education').val();
            // const class_name = ($('#class_name').val()).trim();
            // const subjectIds = $('#subjectid').val();
            const dob = ($("#date_of_birth").val()).trim();
            const education_type = $("#education_type").val();
            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 image = $('#image').prop('files')[0];
            const education_proof = $('#education_proof').prop('files')[0];
            const experience_proof = $('#experience_proof').prop('files')[0];
            let experience_exclude = "";

            if ($("#remove_exp1").prop("checked")) {
                experience_exclude = "yes";
            } else {
                experience_exclude = "no";
            }

            formData.append('_method', 'put')
            formData.append('user_id', user_id);
            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_exclude', experience_exclude);
            formData.append('experience_proof', experience_proof ? experience_proof : "");

            var updateUrl = "{{ route('teachers.update', ':userId') }}".replace(':userId', user_id);
            $.ajax({
                type: "post",
                url: updateUrl,
                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 + '</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>');
                            }
                        });
                    }
                    $("#update_btn").prop("disabled", false);

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

                }

            })
        }
    </script>
@endsection