@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        .toggle-password {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #1f8811;
        }
    </style>
    <style>
        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            /* Decreased width */
            height: 20px;
            /* Decreased height */
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #dc3545;
            /* Default background color when off */
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            /* Decreased height */
            width: 14px;
            /* Decreased width */
            left: 3px;
            bottom: 3px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: green;
            /* Background color when on */
        }

        input:focus+.slider {
            box-shadow: 0 0 1px green;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(18px);
            /* Adjusted transform value */
            -ms-transform: translateX(18px);
            transform: translateX(18px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 20px;
            /* Adjusted radius */
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">

                    <div class="page-header-title">
                        <div class="d-inline">
                            <h4>Update user</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Page-header end -->

        <!-- Page-body start -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card bg-light">
                        <div class="card-block">
                            <div class="mT-30">
                                @include('common.error')
                                {{-- @php $user = \Auth::user(); @endphp --}}
                                <script type="text/javascript" src="{{ asset('assets/js/crypto-js.min.js') }}"></script>
                                <form method="POST" id="passwordForm" enctype="multipart/form-data"
                                    autocomplete="off">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $user->id }}" id="user_id">

                                    <div class="row mt-4">
                                        <div class="col-md-6 px-4">
                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="UserName">User-ID<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control clsUserName txt_OnlyAlpha text-box single-line"
                                                        data-val="true" data-val-required="The UserName field is required."
                                                        id="UserName" maxlength="30" name="UserName" readonly
                                                        type="text" value="{{ $user->username }}">

                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="Name">User Name<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control txt_OnlyAlphaSpace text-box single-line"
                                                        data-val="true" data-val-required="The Name field is required."
                                                        id="Name" maxlength="30" name="Name" type="text"
                                                        value="{{ $user->name }}" required>
                                                </div>
                                            </div>

                                            <div class="row form-group password-toggle">
                                                <label class="control-label col-md-3" for="Password">Password<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9 password-toggle">
                                                    <input autocomplete="off"
                                                        class="form-control Set_OnlyAlpha text-box single-line"
                                                        id="password" maxlength="30" name="password" type="password"
                                                        value="{{ old('password') }}"><i toggle="#password"
                                                        class="fa-solid fa-eye fa-lg toggle-password"></i>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <label class="control-label col-md-3 pr-0" for="Password">Confirm
                                                    Password<span class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input class="form-control Set_OnlyAlpha" id="password_confirmation"
                                                        name="password_confirmation" type="password" autocomplete="off"
                                                        value="{{ old('password_confirmation') }}"><i
                                                        toggle="#password_confirmation"
                                                        class="fa-solid fa-eye fa-lg toggle-password"></i>
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="EmailID">Email-ID<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input type="email" autocomplete="off"
                                                        class="form-control txt_IsEmailIDs text-box single-line"
                                                        data-val="true" data-val-required="The EmailID field is required."
                                                        id="EmailID" maxlength="30" name="EmailID"
                                                        value="{{ $user->email }}">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="MobileNo">MobileNo.<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <input autocomplete="off"
                                                        class="form-control txt_OnlyNumeric txt_Mobilescls text-box single-line"
                                                        data-val="true"
                                                        data-val-required="The MobileNo field is required." id="MobileNo"
                                                        maxlength="11" name="MobileNo" type="text"
                                                        value="{{ $user->MobileNo }}" minlength="10" maxlength="10"
                                                        pattern="\d{10}"
                                                        oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);">
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="RoleID">Role<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <select class="form-control" data-val="true"
                                                        data-val-number="The field RoleID must be a number."
                                                        data-val-required="The RoleID field is required." id="RoleID"
                                                        name="RoleID">
                                                        <option value="">--Select--</option>
                                                        @foreach ($roles as $role)
                                                            <option value="{{ $role->RoleID }}"
                                                                @if ($role->RoleID == $user->RoleID) selected="selected" @endif>
                                                                {{ $role->RoleName }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <label class="control-label col-md-3" for="isActive">Status</label>
                                                <div class="col-md-9">
                                                    <label class="switch">
                                                        <input type="checkbox" name="is_active" class="form-control"
                                                            {{ $user->is_active == 1 ? 'checked' : '' }}>
                                                        <span class="slider round"></span>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="row form-group regional_user_div">
                                                <label class="control-label col-md-3" for="RegionalUsers">Regions<span
                                                        class="red">*</span></label>
                                                <div class="col-md-9">
                                                    <select class="form-control clsSt" data-val="true"
                                                        data-val-required="The regional user field is required."
                                                        id="regional_user_id" name="regional_user_id">
                                                        <option value="">--Select--</option>
                                                        @foreach ($RegionalUser as $row)
                                                            <option value="{{ $row->RegionID }}"
                                                                {{ $user->RegionID == $row->RegionID ? 'selected' : '' }}>
                                                                {{ $row->RegionName }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 px-4">
                                            <div class="row form-group border pt-3">
                                                <div class="col-md-5 col-sm-12  pb-3">
                                                    <div id="divImgPreview">
                                                        @if ($user->profile_image != '')
                                                            <img src="{{ url('storage/profile_images/' . $user->profile_image) }}"
                                                                style="height:135px;width:130px;" id="ImgPreview">
                                                        @else
                                                            <img src="{{ asset('assets/images/no-profile.png') }}"
                                                                style="height:135px;width:130px;" id="ImgPreview">
                                                        @endif

                                                        {{-- <img src="{{ asset('storage/profile_images/' . $user->profile_image) }}" /> --}}
                                                    </div>
                                                </div>

                                                <div class="col-md-7 col-sm-12 pb-3">
                                                    <div class="custom-file">
                                                        <label class="custom-file-label" for="customFile">Choose
                                                            file</label>
                                                        <input type="file" name="profile_image" id="image-input"
                                                            class="form-control"
                                                            accept="image/png, image/jpeg, image/jpg">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row form-group border">
                                                <div class="col-md-12" style="height:30px; line-height:30px; color:red;">
                                                    Password Instructions-
                                                </div>
                                                <p>
                                                </p>
                                                <ul>
                                                    <li>
                                                        At least one Upper Case character
                                                    </li>
                                                    <li>
                                                        At least one Lower Case character
                                                    </li>
                                                    <li>
                                                        At least one Numeric character
                                                    </li>
                                                    <li>
                                                        At least one Special character
                                                    </li>
                                                    <li>
                                                        Password must be between 8 to 16 digit.
                                                    </li>
                                                </ul>
                                                <p></p>
                                            </div>

                                            {{-- <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label>
                                                        <input checked="checked" class="" htmlattributes="{ }"
                                                            id="IsActive" name="IsActive" type="checkbox"
                                                            value="true" autocomplete="off"><input name="IsActive"
                                                            type="hidden" value="false" autocomplete="off">
                                                        <span style="position: relative;bottom: 5px;">
                                                            IsActive
                                                        </span>
                                                    </label>
                                                </div>
                                            </div> --}}


                                        </div>
                                    </div>

                                    <div class="border-top pt-3">
                                        <button class="btn  btn-primary  mr-2 btnSubmit" type="button">Save</button>
                                        <a href="{{ url('Account/ManageUsers') }}" class="btn  btn-outline-primary">Back</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-body end -->
    </div>


    <style>
        .delete-btn img {
            width: 15px;
        }

        .delete-btn {
            background: transparent;
            border: 0 !important;
            outline: none !important;
            cursor: pointer;
        }
    </style>

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

            $("#RoleID").css({
                "pointer-events": "none",
                "touch-action": "none",
                "background": "#e9ecef"
            });

            $(".toggle-password").click(function() {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }
            });

            $('#image-input').change(function() {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#ImgPreview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            });

            $('#RoleID').on('change', function(e) {
                var role_id = $(this).val();
                // $("#regional_user_id").val('');

                if (role_id == 1) {
                    $('.regional_user_div').hide();

                    $("#regional_user_id").prop('required', false);
                } else if (role_id == 2) {
                    $('.regional_user_div').show();

                    $("#regional_user_id").prop('required', true);
                }
            });

            $(".btnSubmit").on('click', function(){
                myFunction();
            });



            $('#RoleID').trigger('change');
        });



        function myFunction() {
            var password = $('#password').val();
            var conpassword = $('#password_confirmation').val();
            // const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
            const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/;


            if (password !== '' || conpassword !== '') {
                var user_id = $("#user_id").val();

                if (password !== conpassword) {
                    bootbox.alert('Confirm password must be the same as the password');
                    return false;
                }

                if (!regex.test(password)) {
                    bootbox.alert('Password must be 8-16 characters long, include at least one uppercase letter, one lowercase letter, one numeric character and one special character.');
                    return false;
                }

                $.ajax({
                    type: 'GET',
                    url: "/MatchOldPassword",
                    data: {
                        user_id: user_id,
                        password: CryptoJS.SHA512(password).toString()
                    },
                    success: function(data) {
                        if (data == 1) {
                            bootbox.alert('Password cannot be the same as the old password');
                            $('#password').val('');
                            $('#password_confirmation').val('');
                            return false;
                        } else {
                            $('#password').val(CryptoJS.SHA512(password).toString());
                            $('#password_confirmation').val(CryptoJS.SHA512(conpassword).toString());
                            $("#passwordForm").submit();
                        }
                    }
                });

                return false;
            } else {
                $("#passwordForm").submit();
            }
        }
    </script>
@endsection