@extends('company-admin-dashboard')

@section('title', $data['title'])
@section('dashboard-content')
<style>
    .profilePreview{
        box-shadow: rgb(32 32 32 / 24%) 0px 3px 8px;
        background-size: cover;
        background-position: center;
    }
</style>
    <div class="page-content" style="padding: 25px calc(24px / 2) 60px calc(24px / 2); background-color: #f7f7f9;">
        <div class="container-fluid">
            <!-- Card Container for User Table -->
            <div class="card">
                <div class="card-header bg-white d-flex justify-content-between align-items-center"
                    style="padding: 10px 27px 10px 27px !important;">
                    <div class="d-flex align-items-center">
                         <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                        &nbsp; &nbsp;
                        <h5 class="mb-0"><b>User Management</b></h5>
                    </div>
                    @if (in_array('create', $data['userPermissions']))
                        <div class="header-buttons d-flex align-items-center" style="gap: 10px;">
                            <button class="btn-custom" id="openUserOffcanvas" onclick="OpenUserOffcanvas()">
                                <i class="fas fa-plus font-size-16 align-middle me-2"></i> Add User
                            </button>
                        </div>
                    @endif
                </div>
                <div class="card-body" style="padding: 20px 0;">
                    @if (in_array('list', $data['userPermissions']))
                        <div class="table-responsive table-nowrap custom-table">
                            <table id="usertable" class="table table-bordered table-responsive" style="width: 100%; ">
                                <thead>
                                    <th style="width: 80px;">Id</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone Number</th>
                                    <th>Type</th>
                                    <th style="width: 160px;">Status</th>
                                    <th style="width: 200px;">Subscription Status</th>
                                    <th>Action</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Offcanvas for Add/Edit User -->
            <div class="modal fade" tabindex="-1" id="offcanvasUser" aria-labelledby="offcanvasScrollingLabel"
                data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <span class="d-flex align-items-center" style="width: 100%;">
                                <div class="d-flex align-items-center">
                                    <img class="favicon-logo" src="{{ getCompanyFavicon() }}"  alt="Company Logo"  width="40px">
                                </div>
                                <h5 id="userLabel" style="margin-left: 10px;margin-bottom: 0;"><b>Add User</b></h5>
                            </span>
                            <button type="button" class="btn-close text-reset" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="user-master" method="post" action="{{ route('users.save') }}"
                                class="needs-validation" enctype="multipart/form-data">
                                @csrf

                                <input type="hidden" name="user_id" id="user_id" value="0">
                                <input type="hidden" id="old_image_avatar" name="old_image_avatar" value="" />
                                {{-- <input type="hidden" id="old_image_sign" name="old_image_sign" value="" /> --}}
                                <div class="row">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-12 mb-4">
                                                {{-- <label for="profile_image">Image</label> --}}
                                                <div id="profilePreview" class="d-flex align-items-start gap-4">
                                                    {{-- <svg onclick="$('#profile_image').click()"
                                            class="svg-icon profile-edit-Icon userimage" style=""
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M834.3 705.7c0 82.2-66.8 149-149 149H325.9c-82.2 0-149-66.8-149-149V346.4c0-82.2 66.8-149 149-149h129.8v-42.7H325.9c-105.7 0-191.7 86-191.7 191.7v359.3c0 105.7 86 191.7 191.7 191.7h359.3c105.7 0 191.7-86 191.7-191.7V575.9h-42.7v129.8z">
                                            </path>
                                            <path
                                                d="M889.7 163.4c-22.9-22.9-53-34.4-83.1-34.4s-60.1 11.5-83.1 34.4L312 574.9c-16.9 16.9-27.9 38.8-31.2 62.5l-19 132.8c-1.6 11.4 7.3 21.3 18.4 21.3 0.9 0 1.8-0.1 2.7-0.2l132.8-19c23.7-3.4 45.6-14.3 62.5-31.2l411.5-411.5c45.9-45.9 45.9-120.3 0-166.2zM362 585.3L710.3 237 816 342.8 467.8 691.1 362 585.3zM409.7 730l-101.1 14.4L323 643.3c1.4-9.5 4.8-18.7 9.9-26.7L436.3 720c-8 5.2-17.1 8.7-26.6 10z m449.8-430.7l-13.3 13.3-105.7-105.8 13.3-13.3c14.1-14.1 32.9-21.9 52.9-21.9s38.8 7.8 52.9 21.9c29.1 29.2 29.1 76.7-0.1 105.8z">
                                            </path>
                                        </svg> --}}
                                                    <img src="{{ getCompanyLogo() }}" 
                                                        class="profilePreview" id="pre" alt="Your Image"
                                                        style="height: 100px;width: 100px;cursor: pointer;border-radius: 10px;">
                                                    <input type="file" class="form-control d-none" name="profile_image"
                                                        id="profile_image" onchange="previeProfile(this,'#profilePreview')">
                                                    <div class="align-self-center">
                                                        <a onclick="$('#profile_image').click()" class="btn-custom"> Upload
                                                            New Photo</a>
                                                        <div class="fs-6 mt-3 text-muted">Allowed JPG, JPEG, WEBP or PNG.
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            {{-- <div class="col-md-6 mb-3">
                                    <label for="sign_image">Sign-Image</label>
                                    <div id="sign_Preview" class="mx-auto position-relative">
                                        <svg onclick="$('#sign_image').click()" class="svg-icon profile-edit-Icon userimage"
                                            style="" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M834.3 705.7c0 82.2-66.8 149-149 149H325.9c-82.2 0-149-66.8-149-149V346.4c0-82.2 66.8-149 149-149h129.8v-42.7H325.9c-105.7 0-191.7 86-191.7 191.7v359.3c0 105.7 86 191.7 191.7 191.7h359.3c105.7 0 191.7-86 191.7-191.7V575.9h-42.7v129.8z">
                                            </path>
                                            <path
                                                d="M889.7 163.4c-22.9-22.9-53-34.4-83.1-34.4s-60.1 11.5-83.1 34.4L312 574.9c-16.9 16.9-27.9 38.8-31.2 62.5l-19 132.8c-1.6 11.4 7.3 21.3 18.4 21.3 0.9 0 1.8-0.1 2.7-0.2l132.8-19c23.7-3.4 45.6-14.3 62.5-31.2l411.5-411.5c45.9-45.9 45.9-120.3 0-166.2zM362 585.3L710.3 237 816 342.8 467.8 691.1 362 585.3zM409.7 730l-101.1 14.4L323 643.3c1.4-9.5 4.8-18.7 9.9-26.7L436.3 720c-8 5.2-17.1 8.7-26.6 10z m449.8-430.7l-13.3 13.3-105.7-105.8 13.3-13.3c14.1-14.1 32.9-21.9 52.9-21.9s38.8 7.8 52.9 21.9c29.1 29.2 29.1 76.7-0.1 105.8z">
                                            </path>
                                        </svg>
                                        <img src="{{ asset('assets/images/logo/A_logo.png') }}" class="sign_Preview"
                                            id="pre" alt="Your Image" onclick="$('#sign_image').click()"
                                            style="height: 100px;width: 100px;cursor: pointer;border-radius: 10px;">
                                        <input type="file" class="form-control d-none" name="sign_image" id="sign_image"
                                            onchange="previeSign(this,'#sign_Preview')">
                                    </div>
                                </div> --}}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control user_fname" name="user_fname"
                                                id="user_fname" required value="{{ old('user_name') }}"
                                                placeholder="Enter first name" autofocus>
                                            <label for="user_fname">FirstName<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control user_lname" name="user_lname"
                                                id="user_lname" required value="{{ old('users_lname') }}"
                                                placeholder="Enter last name">
                                            <label for="user_lname">LastName<font color="red"> *</font></label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control user_email" name="user_email"
                                                id="user_email" required value="{{ old('user_email') }}"
                                                placeholder="Enter email">
                                            <label for="user_email">Email<font color="red"> *</font></label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="number" class="form-control user_number" name="user_number"
                                                id="user_number" required value="{{ old('user_number') }}"
                                                placeholder="Enter phone number" oninput="limitInputLength(this)">
                                            <label for="user_number">PhoneNumber<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group has-value">
                                            <input type="text" class="form-control"
                                                value="{{ auth()->user()->company->name }}" readonly placeholder=" " />
                                            <label>User Company</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="user_type_group">
                                            <select class="form-select" name="user_type" id="user_type" required>
                                            </select>
                                            <label>User Type<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group float-label-group has-value" id="div_from_date">
                                            <input type="text" class="form-control" placeholder="DD-MM-YYYY"
                                                data-date-format="yyyy-mm-dd" data-date-container='#div_from_date'
                                                data-provide="datepicker" data-date-autoclose="true"
                                                id="user_joining_date" name="user_joining_date" autocomplete="off">
                                            <label for="user_joining_date">Joining Date</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group has-value">
                                            <select name="userstatus" id="userstatus" class="form-select">
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                                <option value="2">Pending</option>
                                            </select>
                                            <label>Status<font color="red"> *</font></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control addressline1" name="addressline1"
                                                id="addressline1" value="{{ old('addressline1') }}"
                                                placeholder="Enter address line 1">
                                            <label for="addressline1">Address line 1</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="text" class="form-control addressline2" name="addressline2"
                                                id="addressline2" value="{{ old('addressline2') }}"
                                                placeholder="Enter address line 2">
                                            <label for="addressline2">Address line 2</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group">
                                            <input type="number" class="form-control" id="user_pincode"
                                                name="user_pincode" placeholder="Enter pincode" value=""
                                                oninput="limitPincodeInputLength(this)">
                                            <label for="user_pincode">Pincode</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="country_group">
                                            <select class="form-select country" name="country" id="country">
                                            </select>
                                            <label>Country</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="state_group">
                                            <select class="form-control state" name="state" id="state">
                                            </select>
                                            <label>State</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="float-label-group" id="city_group">
                                            <select class="form-select city" name="city" id="city">
                                            </select>
                                            <label>City</label>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="">
                            <div class="modal-footer">
                                <button type="reset" class="btn-custom-secondary" id="newuserreset"
                                    onclick="newuserReset()">Reset</button>
                                <button type="submit" class="btn-custom" id="saveuser">
                                    <span id="user_loader" class="bx bx-loader bx-spin font-size-22 align-middle me-2"
                                        role="status" aria-hidden="true" style="display:none;"></span>
                                    <span id="user_btnText">Save</span>
                                </button>
                            </div>
                        </div>
                        </form>

                    </div>
                </div>
            </div>
        @endsection('dashboard-content')
        @section('custom-scripts')
            <script>
                $('#user_joining_date').datepicker({
                    format: 'dd-mm-yyyy',
                    autoclose: true
                });

                var getUserTypes = '{{ route('user.getusertypes') }}';
                var EditUsers = '{{ route('users-edit') }}';
                var UserDataTable = '{{ route('users.ajax') }}';
                var UserCountry = '{{ route('user.searchcountry') }}';
                var userstate = '{{ route('user.searchstate') }}';
                var usercity = '{{ route('user.searchcity') }}';
                var csrfToken = $("[name=_token").val();
                var saveUserUrl = '{{ route('users.save') }}';

                function updateFloatLabel(selectId, groupId) {
                    const $group = $('#' + groupId);
                    const $select = $('#' + selectId);
                    if ($select.val() && $select.val() !== '') {
                        $group.addClass('has-value');
                    } else {
                        $group.removeClass('has-value');
                    }
                }

                $('#userstatus').select2({
                    placeholder: 'search Status',
                    dropdownParent: $("#offcanvasUser .modal-body")
                });

                $("#user_type").select2({
                    ajax: {
                        url: getUserTypes,
                        dataType: 'json',
                        delay: 0,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page,
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            return {
                                results: data.results,
                                pagination: {
                                    more: (params.page * 30) < data.total_count
                                }
                            };
                        },
                        cache: false
                    },
                    placeholder: 'please select',
                    dropdownParent: $("#offcanvasUser .modal-body"),
                }).on('select2:select select2:clear change', function() {
                    updateFloatLabel('user_type', 'user_type_group');
                }).on('select2:open', function() {
                    $('#user_type_group').addClass('has-value');
                });
                window.companyLogoUrl = "{{ getCompanyLogo() }}";
                function OpenUserOffcanvas() {
                    $("#userLabel").html('Add user');
                    $('#user_id').val('');

                    if ($("#user-master").length) {
                        $("#user-master")[0].reset();
                    }
                    $("#user_type").val(null).trigger('change');
                    $('#country').val(null).trigger('change');
                    $('#state').val(null).trigger('change');
                    $('#city').val(null).trigger('change');
                    $('#user_type').prop('readonly', false);
                    $('#user_type').next('.select2').css('pointer-events', 'auto');

                    $('.profilePreview').attr('src', window.companyLogoUrl);
                    $('.sign_Preview').attr('src', window.companyLogoUrl);

                    $('#offcanvasUser').modal('show');
                    $("#offcanvasUser .modal-body").scrollTop(0);
                    $('#user-master').removeClass('was-validated');
                    $("#user_btnText").html("Save");
                    $("#saveuser").prop('disabled', false);
                    $("#newuserreset").prop('disabled', false);
                }

                function newuserReset() {
                    $('#user_id').val('');
                    $('#user_fname').val('');
                    $("#user_lname").val('');
                    $("#user_email").val('');
                    $("#user_number").val('');
                    $("#user_type").val(null).trigger('change');
                    $("#user_joining_date").val('');
                    $("#userstatus").val('');
                    $("#addressline1").val('');
                    $("#addressline2").val('');
                    $("#user_pincode").val('');
                    $('.country').val(null).trigger('change');
                    $('.state').val(null).trigger('change');
                    $('.city').val(null).trigger('change');

                    $('.profilePreview').attr('src', window.companyLogoUrl);
                }

                function previeProfile(input, previewSelector) {
                    const reader = new FileReader();
                    reader.onload = function() {
                        const output = document.querySelector(previewSelector + ' img');
                        if (output) {
                            output.src = reader.result;
                        }
                    };
                    if (input.files && input.files[0]) {
                        reader.readAsDataURL(input.files[0]);
                    } else {
                        console.error('No file selected.');
                    }
                }

                // function previeSign(input, ) {
                //     const reader = new FileReader()previewSelector;
                //     reader.onload = function () {
                //         const output = document.querySelector(previewSelector + ' img');
                //         if (output) {
                //             output.src = reader.result;
                //         }
                //     };
                //     if (input.files && input.files[0]) {
                //         reader.readAsDataURL(input.files[0]);
                //     } else {
                //         console.error('No file selected.');
                //     }
                // }

                function editUser(id, makeReadOnly = '') {
                    $("#user_btnText").html("Save");
                    $("#saveuser").prop('disabled', false);
                    $("#newuserreset").prop('disabled', false);

                    $('#offcanvasUser').modal('hide');
                    $('#userLabel').html('Edit User');
                    document.getElementById('profile_image').value = '';
                    document.getElementById('profile_image').src = '';
                    // document.getElementById('sign_image').value = '';
                    // document.getElementById('sign_image').src = '';
                    $('#user-master').removeClass('was-validated');

                    $.ajax({
                        type: 'get',
                        url: EditUsers + '?id=' + id,
                        success: function(resultData) {
                            if (resultData['status'] == 1) {
                                $('#user_id').val(resultData['data']['id']);
                                $('#user_fname').val(resultData['data']['first_name']);
                                $('#user_lname').val(resultData['data']['last_name']);
                                $('#user_email').val(resultData['data']['email']);
                                $('#user_number').val(resultData['data']['phone_number']);
                                let joiningDate = resultData['data']['joining_date'];
                                let formattedDate = moment(joiningDate, 'YYYY-MM-DD').format('DD-MM-YYYY');
                                $('#user_joining_date').val(formattedDate);
                                $('#user_joining_date').on('hide', function() {
                                    if (!$(this).val()) {
                                        $(this).val(formattedDate);
                                    }
                                });

                                $('#userstatus').val(resultData['data']['status']).trigger('change');
                                $('#addressline1').val(resultData['data']['address_line1']);
                                $('#addressline2').val(resultData['data']['address_line2']);
                                $('#user_pincode').val(resultData['data']['pincode']);

                                $('#user_type').prop('readonly', true);
                                $('#user_type').next('.select2').css('pointer-events', 'none');
                                var selectedtypeID = resultData['data']['type'];
                                var selectedtypeText = resultData['data']['type_name'];
                                var newuserType = new Option(selectedtypeText, selectedtypeID, true, true);
                                $('#user_type').append(newuserType).trigger('change');

                                if (resultData['data']['countryname'] != null) {
                                    $("#country").empty().trigger('change');
                                    var newOption = new Option(resultData['data']['countryname'], resultData['data'][
                                        'country_id'
                                    ], false, false);
                                    $('#country').append(newOption).trigger('change');
                                }
                                if (resultData['data']['statename'] != null) {
                                    $("#state").empty().trigger('change');
                                    var newOption = new Option(resultData['data']['statename'], resultData['data'][
                                        'state_id'
                                    ], false, false);
                                    $('#state').append(newOption).trigger('change');
                                }
                                if (resultData['data']['cityname'] != null) {
                                    $("#city").empty().trigger('change');
                                    var newOption = new Option(resultData['data']['cityname'], resultData['data'][
                                        'city_id'
                                    ], false, false);
                                    $('#city').append(newOption).trigger('change');
                                }

                                if (resultData['data']['avatar']) {
                                    var path = resultData['data']['avatar'];
                                    $('.profilePreview').attr('src', path);
                                    $('#old_image_avatar').val(resultData['data']['avatar']);
                                } else {
                                   $('.profilePreview').attr('src', window.companyLogoUrl);
                                }

                                // if (resultData['data']['sign_image']) {
                                //     var path = "{{ asset('assets/images/user_sign_image/') }}/" + resultData['data']['sign_image'];
                                //     $('.sign_Preview').attr('src', path);
                                //     $('#old_image_sign').val(resultData['data']['sign_image']);
                                // } else {
                                //     $('.sign_Preview').attr('src', "{{ asset('assets/images/logo/company-logo.png') }}");
                                // }

                                $('#offcanvasUser').modal('show');
                                $("#offcanvasUser .modal-body").scrollTop(0);
                            } else {
                                flasher['error'](resultData['msg'], {
                                    timeout: 2500
                                });
                            }
                        }
                    });
                }

                var usertable = $('#usertable').DataTable({
                    // responsive: true,
                    orderCellsTop: true,
                    serverSide: true,
                    processing: true,
                    pagingType: "full_numbers",
                    "ajax": {
                        "url": UserDataTable,
                        "type": "POST",
                        "data": {
                            "_token": csrfToken
                        }
                    },
                    "aoColumns": [{
                            "mData": "id"
                        },
                        {
                            "mData": "name"
                        },
                        {
                            "mData": "email"
                        },
                        {
                            "mData": "phone_number"
                        },
                        {
                            "mData": "type",
                            orderable: false
                        },
                        {
                            "mData": "status"
                        },
                        {
                            "mData": "subscription_status"
                        },
                        {
                            "mData": "action",
                            orderable: false,
                            searchable: false
                        }
                    ],
                    language: {
                        search: "",
                        searchPlaceholder: "Search name and email",
                        paginate: {
                            first: '<i class="bx bx-skip-previous"></i>',
                            previous: '<i class="bx bx-chevron-left"></i>',
                            next: '<i class="bx bx-chevron-right"></i>',
                            last: '<i class="bx bx-skip-next"></i>'
                        }
                    }
                });

                var a = document.querySelector("#usertable thead"),
                    n = a.querySelector("tr").cloneNode(true);
                a.appendChild(n);

                let searchRowTh = a.querySelectorAll("tr:nth-child(2) th");
                searchRowTh.forEach(th => {
                    th.classList.remove("sorting", "sorting_asc", "sorting_desc");
                    th.removeAttribute("aria-sort");
                });

                searchRowTh.forEach((e, t) => {
                    let skipColumns = [0, 7];

                    if (skipColumns.includes(t)) {
                        e.innerHTML = "";
                        return;
                    }
                    var text = e.textContent;
                    var input = document.createElement("input");
                    input.type = "text";
                    input.className = "form-control";
                    input.placeholder = "Search " + text;

                    e.innerHTML = "";
                    e.appendChild(input);

                    input.addEventListener("keyup", function() {
                        if (usertable.column(t).search() !== this.value) {
                            usertable.column(t).search(this.value).draw();
                        }
                    });

                    input.addEventListener("change", function() {
                        if (usertable.column(t).search() !== this.value) {
                            usertable.column(t).search(this.value).draw();
                        }
                    });
                });

                function reloadUser() {
                    usertable.ajax.reload(null, false);
                }

                // Handle form submission with AJAX
                $('#user-master').on('submit', function(e) {
                    e.preventDefault();

                    // Show loading spinner
                    $('#user_loader').show();
                    $('#saveuser').prop('disabled', true);
                    $('#newuserreset').prop('disabled', true);

                    // Create FormData object to handle file uploads
                    var formData = new FormData(this);

                    $.ajax({
                        url: saveUserUrl,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            // Hide loading spinner
                            $('#user_loader').hide();
                            $('#saveuser').prop('disabled', false);
                            $('#newuserreset').prop('disabled', false);

                            if (response.status == 1) {
                                // Show success message
                                flasher['success'](response.msg, {
                                    timeout: 2500
                                });

                                // Close the modal
                                $('#offcanvasUser').modal('hide');

                                // Reload the data table
                                reloadUser();
                            } else {
                                // Show error message
                                flasher['error'](response.msg, {
                                    timeout: 2500
                                });
                            }
                        },
                        error: function(xhr) {
                            // Hide loading spinner
                            $('#user_loader').hide();
                            $('#saveuser').prop('disabled', false);
                            $('#newuserreset').prop('disabled', false);

                            // Show error message
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                // Handle validation errors
                                var errors = xhr.responseJSON.errors;
                                var errorMessage = '';

                                for (var key in errors) {
                                    errorMessage += errors[key][0] + '<br>';
                                }

                                flasher['error'](errorMessage, {
                                    timeout: 2500
                                });
                            } else {
                                flasher['error'](
                                    'An error occurred while processing your request.', {
                                        timeout: 2500
                                    });
                            }
                        }
                    });
                });

                $('#country').select2({
                    ajax: {
                        url: UserCountry,
                        dataType: 'json',
                        delay: 0,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page,
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            var results = data.results.map(function(country) {
                                return {
                                    id: country.id,
                                    text: country.text
                                };
                            });
                            return {
                                results: results,
                                pagination: {
                                    more: (params.page * 30) < data.total_count
                                }
                            };
                        },
                        cache: false
                    },
                    placeholder: 'please select',
                    dropdownParent: $("#offcanvasUser .modal-body"),
                }).on('change', function() {
                    updateFloatLabel('country', 'country_group');
                    $('#state').val(null).trigger('change').prop('disabled', !$(this).val());
                    $('#city').val(null).trigger('change').prop('disabled', true);
                }).on('select2:open', function() {
                    $('#country_group').addClass('has-value');
                });

                $('#state').select2({
                    ajax: {
                        url: userstate,
                        dataType: 'json',
                        delay: 0,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page,
                                "country_id": function() {
                                    return $('#country').val();
                                }
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            var results = data.results.map(function(state) {
                                return {
                                    id: state.id,
                                    text: state.text
                                };
                            });
                            return {
                                results: results,
                                pagination: {
                                    more: (params.page * 30) < data.total_count
                                }
                            };
                        },
                        cache: false
                    },
                    placeholder: 'please select',
                    dropdownParent: $("#offcanvasUser .modal-body"),
                }).on('change', function() {
                    updateFloatLabel('state', 'state_group');
                    $('#city').val(null).trigger('change').prop('disabled', !$(this).val());
                }).on('select2:open', function() {
                    $('#state_group').addClass('has-value');
                });

                $('#city').select2({
                    ajax: {
                        url: usercity,
                        dataType: 'json',
                        delay: 0,
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page,
                                "country_id": function() {
                                    return $('#country').val();
                                },
                                "state_id": function() {
                                    return $('#state').val();
                                }
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            var results = data.results.map(function(state) {
                                return {
                                    id: state.id,
                                    text: state.text
                                };
                            });
                            return {
                                results: results,
                                pagination: {
                                    more: (params.page * 30) < data.total_count
                                }
                            };
                        },
                        cache: false
                    },
                    placeholder: 'please select',
                    dropdownParent: $("#offcanvasUser .modal-body"),
                }).on('select2:select select2:clear change', function() {
                    updateFloatLabel('city', 'city_group');
                }).on('select2:open', function() {
                    $('#city_group').addClass('has-value');
                });

                $('#state').prop('disabled', true);
                $('#city').prop('disabled', true);
                $('#profile-pic').on('click',
                    function(e) {
                        e.stopPropagation();
                        $('#dropdown-menu').toggle();
                    });
            </script>
        @endsection