@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Profile</title>
@include('datepicker')
<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>
@section('main-content')
    
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->

        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-2 mb-2"><span>My Profile</span></h4>
            <h5 class="fw-bold">
                @if (isset($class))
                    {{ 'Class Assigned : ' . $class->class }}
                @else
                    {{ 'Class not assigned yet.' }}
                @endif
            </h5>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <h5 class="card-header">Profile Details</h5>
                        <!-- Account -->
                        <form enctype="multipart/form-data" class="form-horizontal form-material mx-2">
                            @csrf
                            <div class="card-body">
                                <div class="d-flex align-items-start align-items-sm-center gap-4">
                                    <div class="d-none">
                                        @if (!$user[0]->profile_photo_path)
                                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}"
                                                class="d-block rounded" height="100" width="100" id="notSetImg">
                                        @else
                                            <img src="{{ $user[0]->profile_photo_path }}" alt="user"
                                                class="d-block rounded" height="100" width="100" id="uploadedAvatar">
                                        @endif
                                        <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" class="d-none rounded"
                                            height="100" width="100" id="showAvatar">
                                        <div class="button-wrapper">
                                            <label for="uploadmyFile" class="btn btn-primary me-2 mb-4" tabindex="0">
                                                <span class="d-none d-sm-block">Upload new photo</span>
                                                <i class="bx bx-upload d-block d-sm-none"></i>
                                                <input type="file" id="upload" name="image"
                                                    class="account-file-input uploaded_img" hidden
                                                    accept="image/png, image/jpeg" />
                                                <input type="file" id="uploadmyFile" name="image"
                                                    class="account-file-input uploaded_img" hidden
                                                    accept="image/png, image/jpeg" />
                                            </label>
                                            <button type="button"
                                                class="btn btn-outline-secondary account-image-reset mb-4"
                                                id="user_img_reset">
                                                Reset
                                            </button>
                                            <!-- <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p> -->
                                        </div>
                                    </div>

                                    <div>
                                        @if (!$user[0]->profile_photo_path)
                                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}"
                                                class="d-block rounded" height="100" width="100">
                                        @else
                                            <img src="{{ $user[0]->profile_photo_path }}" alt="user"
                                                class="d-block rounded" height="100" width="100">
                                        @endif
                                        <label for="uploadmyFile" class="btn btn-primary mt-3 me-2 mb-4" tabindex="0">
                                            <span class="d-none d-sm-block">Upload new photo</span>
                                            <i class="bx bx-upload d-block d-sm-none"></i>
                                            <input type="file" id="uploadmyFile" name="image"
                                                class="account-file-input uploaded_img" hidden
                                                accept="image/png, image/jpeg, image/jpg" />
                                        </label>
                                        <a href="javaScript:void(0);" onclick="openingModal(1)" id="prvImg1"
                                            class="d-none">Preview Image</a>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-0" />
                            <div class="card-body">
                                <!-- <form id="formAccountSettings" method="POST" onsubmit="return false"> -->
                                <div class="row">
                                    <input value="{{ $user[0]->id }}" id="user_id" hidden />
                                    <div class="mb-3 col-md-6">
                                        <label for="firstName" class="form-label">First Name</label>
                                        <div class="input-group">
                                            <input class="form-control" type="text" id="fname" name="fname"
                                                value="{{ $user[0]->first_name }}" placeholder="John" autofocus required
                                                onkeydown="return /[a-z]/i.test(event.key)" autocomplete="off"
                                                minlength="3" maxlength="30" />
                                        </div>
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="lastName" class="form-label">Last Name</label>
                                        <div class="input-group">
                                            <input class="form-control" type="text" name="lname" id="lname"
                                                value="{{ $user[0]->last_name }}" placeholder="Last Name" required
                                                onkeydown="return /[a-z]/i.test(event.key)" autocomplete="off"
                                                minlength="3" maxlength="30" />
                                        </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 col-md-6">
                                                        <label for="organization" class="form-label">Organization</label>
                                                        <input type="text" class="form-control" id="organization" name="organization" value="ThemeSelection" />
                                                        </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="Enter new phone number" 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">
                                            <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">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="Course Name"
                                                class="form-control input form-control-line w-25" minlength="3"
                                                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"
                                                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>
                                            <a class="form-control input form-control-line"
                                                href="{{ isset($user[0]->educationdetails) ? 'assets/education_proof/' . $user[0]->educationdetails->save_pdf : 'javascript:void(0)' }}"
                                                target="_blank"
                                                style="background-color: #eceef1;">{{ isset($user[0]->educationdetails) ? 'ed_' . $user[0]->educationdetails->save_pdf : '' }}</a>
                                        </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" readonly
                                                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" readonly
                                                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="{{ $user[0]->experiencedetails->save_pdf }}" target="_blank"
                                                    style="background-color: #eceef1;">{{ 'ex_' . $user[0]->experiencedetails->save_pdf }}</a>
                                            @else
                                                <a class="form-control input form-control-line" id="upload_exp_proof"
                                                    href="javascript: void(0)" style="background-color: #eceef1;"></a>
                                            @endif
                                        </div>
                                    </div>
                                    <!--
                                                        <div class="mb-3 col-md-6">
                                                            <label for="address" class="form-label">Address</label>
                                                            <input type="text" class="form-control" id="address" name="address" placeholder="Address" />
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label for="state" class="form-label">State</label>
                                                            <input class="form-control" type="text" id="state" name="state" placeholder="California" />
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label for="zipCode" class="form-label">Zip Code</label>
                                                            <input
                                                                type="text"
                                                                class="form-control"
                                                                id="zipCode"
                                                                name="zipCode"
                                                                placeholder="231465"
                                                                maxlength="6"
                                                            />
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label class="form-label" for="country">Country</label>
                                                            <select id="country" class="select2 form-select">
                                                                <option value="">Select</option>
                                                                <option value="Australia">Australia</option>
                                                                <option value="Bangladesh">Bangladesh</option>
                                                                <option value="Belarus">Belarus</option>
                                                                <option value="Brazil">Brazil</option>
                                                                <option value="Canada">Canada</option>
                                                                <option value="China">China</option>
                                                                <option value="France">France</option>
                                                                <option value="Germany">Germany</option>
                                                                <option value="India">India</option>
                                                                <option value="Indonesia">Indonesia</option>
                                                                <option value="Israel">Israel</option>
                                                                <option value="Italy">Italy</option>
                                                                <option value="Japan">Japan</option>
                                                                <option value="Korea">Korea, Republic of</option>
                                                                <option value="Mexico">Mexico</option>
                                                                <option value="Philippines">Philippines</option>
                                                                <option value="Russia">Russian Federation</option>
                                                                <option value="South Africa">South Africa</option>
                                                                <option value="Thailand">Thailand</option>
                                                                <option value="Turkey">Turkey</option>
                                                                <option value="Ukraine">Ukraine</option>
                                                                <option value="United Arab Emirates">United Arab Emirates</option>
                                                                <option value="United Kingdom">United Kingdom</option>
                                                                <option value="United States">United States</option>
                                                            </select>
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label for="language" class="form-label">Language</label>
                                                            <select id="language" class="select2 form-select">
                                                                <option value="">Select Language</option>
                                                                <option value="en">English</option>
                                                                <option value="fr">French</option>
                                                                <option value="de">German</option>
                                                                <option value="pt">Portuguese</option>
                                                            </select>
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label for="timeZones" class="form-label">Timezone</label>
                                                            <select id="timeZones" class="select2 form-select">
                                                                <option value="">Select Timezone</option>
                                                                <option value="-12">(GMT-12:00) International Date Line West</option>
                                                                <option value="-11">(GMT-11:00) Midway Island, Samoa</option>
                                                                <option value="-10">(GMT-10:00) Hawaii</option>
                                                                <option value="-9">(GMT-09:00) Alaska</option>
                                                                <option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
                                                                <option value="-8">(GMT-08:00) Tijuana, Baja California</option>
                                                                <option value="-7">(GMT-07:00) Arizona</option>
                                                                <option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
                                                                <option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
                                                                <option value="-6">(GMT-06:00) Central America</option>
                                                                <option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
                                                                <option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
                                                                <option value="-6">(GMT-06:00) Saskatchewan</option>
                                                                <option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
                                                                <option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
                                                                <option value="-5">(GMT-05:00) Indiana (East)</option>
                                                                <option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
                                                                <option value="-4">(GMT-04:00) Caracas, La Paz</option>
                                                            </select>
                                                            </div>
                                                            <div class="mb-3 col-md-6">
                                                            <label for="currency" class="form-label">Currency</label>
                                                            <select id="currency" class="select2 form-select">
                                                                <option value="">Select Currency</option>
                                                                <option value="usd">USD</option>
                                                                <option value="euro">Euro</option>
                                                                <option value="pound">Pound</option>
                                                                <option value="bitcoin">Bitcoin</option>
                                                            </select>
                                                    </div> -->
                                </div>
                                <div class="mt-2">
                                    <button type="button" class="btn btn-primary me-2"
                                        onclick="savechanges('{{ $user[0]->id }}')" id="save_changes">Save
                                        changes</button>
                                    {{-- <a href="admin-dashboard" class="btn btn-outline-secondary">Cancel</a> --}}
                                </div>
                            </div>
                        </form>
                        <!-- /Account -->
                    </div>
                    {{-- <div class="card">
                <h5 class="card-header">Delete Account</h5>
                    <div class="card-body">
                        <div class="mb-3 col-12 mb-0">
                        <div class="alert alert-warning">
                            <h6 class="alert-heading fw-bold mb-1">Are you sure you want to delete your account?</h6>
                            <p class="mb-0">Once you delete your account, there is no going back. Please be certain.</p>
                        </div>
                        </div>
                        <form id="formAccountDeactivation" onsubmit="return false">
                        <div class="form-check mb-3">
                            <input
                            class="form-check-input"
                            type="checkbox"
                            name="accountActivation"
                            id="accountActivation"
                            />
                            <label class="form-check-label" for="accountActivation"
                            >I confirm my account deactivation</label
                            >
                        </div>
                        <button type="submit" class="btn btn-danger deactivate-account">Deactivate Account</button>
                        </form>
                    </div>
                </div> --}}
                </div>
            </div>
        </div>
        <!-- / Content -->

        <!-- Footer -->
        {{-- <footer class="content-footer footer bg-footer-theme">
        <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
            <div class="mb-2 mb-md-0">
                ©
                <script>
                document.write(new Date().getFullYear());
                </script>
                , made with ❤️ by
                <a href="https://megamindcreations.com" target="_blank" class="footer-link fw-bolder">Megamind Creations</a>
            </div>
        </div>
    </footer> --}}
        <!-- / Footer -->

        <div class="content-backdrop fade"></div>
        <div id="myModal" class="modal" style="padding-top: 50px;">

            <!-- Modal content -->
            <div class="modal-content" style="width: 40%;">
                <div><span class="close text-end">&times;</span></div>
                <h4 class="text-center" id="change_heading">Image Uploaded</h4>
                <input type="hidden" id="leave_id" />
                <div class="text-center mb-5">
                    <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" id="aadhar_card_pic" height="470"
                        width="100%" />
                </div>
            </div>
        </div>
    </div>
    <!-- Content wrapper -->
    <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",
            });
        });

        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();
            }
        }

        let reset_img = false;
        $("#uploadmyFile").on("change", (e) => {
            e.stopPropagation();
            fileInput = document.getElementById('uploadmyFile');
            file = fileInput.files[0];

            const sizeInMB = file.size / (1024 * 1024).toFixed(2);

            if (sizeInMB > 5) {
                file.value = null;
                file.value = '';
                $("#prvImg1").addClass('d-none');
                alert("Image should be less than 5 MB.");
                return;
            }
            $("#prvImg1").removeClass('d-none');
        });

        function openingModal(pass_val) {
            var modal = document.getElementById("myModal");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            modal.style.display = "block";
            let fileInput, file;

            if (pass_val === 1) {
                fileInput = document.getElementById('uploadmyFile');
            } else {
                return;
            }

            file = fileInput.files[0];
            const imgElement = document.getElementById('aadhar_card_pic');

            if (file) {
                const fileURL = URL.createObjectURL(file);
                imgElement.src = fileURL;
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        function savechanges(id) {
            $('.text-danger').remove();
            $('#save_changes').prop("disabled", true);
            // Show loader while the request is being processed
            $('#loader').show();
            let formData = new FormData();
            const uploaded_img = $('#uploadmyFile').prop('files')[0];
            let sizeInMB = 0;
            if (uploaded_img) {
                sizeInMB = uploaded_img.size / (1024 * 1024).toFixed(2);

            }
            const user_id = $('#user_id').val();
            // const email = $('#email').val();
            const fname = ($('#fname').val()).trim();
            const lname = ($('#lname').val()).trim();
            // const phone = $('#phone').val();
            const gender = $('#gender').val();
            // const education = $('#education').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();

            formData.append('fname', fname);
            formData.append('lname', lname);
            // formData.append('email', email)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            formData.append('gender', gender);
            formData.append('date_of_birth', dob);
            formData.append('education_type', education_type);
            formData.append('id', id);
            formData.append('course_name', course_name);
            formData.append('course_specialization', course_specialization);
            // formData.append('experience_years', experience_years);
            // formData.append('experience_months', experience_months);
            if (uploaded_img && sizeInMB <= 5) {
                formData.append('user_img', uploaded_img);
            }
            if (reset_img) {
                formData.append('reset_img', "yes");
            } else {
                formData.append('reset_img', "no");
            }

            $.ajax({
                type: "post",
                url: "/update-teacher-profile",
                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 (data["status"] == "success") {
                        $('#save_changes').after(
                            `<div class="alert alert-success w-25 mt-2" role="alert">Your profile updated successfully.</div>`
                        );
                        window.location.reload();
                    } else {
                        $.each(data.errors, 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>');
                            }
                        });
                        if (data.errors["user_img"]) {
                            $("#save_changes").closest('div').before('<span class="text-strong text-danger">' +
                                data.errors["user_img"] + '</span>');
                        }
                        if (data.errors) {
                            $("#save_changes").closest('div').before(
                                '<span class="text-strong text-danger"> Some required fields are missing. </span>'
                            );
                        }
                    }
                    $('#save_changes').prop("disabled", false);
                },
                error: function() {
                    $('#loader').hide();
                    $('#save_changes').prop("disabled", false);
                },
                complete: function() {
                    $('#loader').hide();
                    $('#save_changes').prop("disabled", false);
                }
            });
        }
    </script>
@endsection