@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>
<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>Add User</h4>
                </div>
            </div>
        </div>

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

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

                            <input type="hidden" name="id" value="{{ !empty($user_details->id) ? $user_details->id : '' }}">

                            <input type="hidden" class="form-control username" name="username" value="{{ old('username') }}" autocomplete="off">

                            <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" type="text" value="{{ old('UserName') }}" required>
                                            <label class="isAvl" style="height:0px;display: none; margin-bottom:2px; font-style:italic;"></label>
                                        </div>
                                    </div>

                                    <div class="row form-group">
                                        <label class="control-label col-md-3" for="Name">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="{{ old('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">
                                            <input autocomplete="off" class="form-control Set_OnlyAlpha text-box single-line" id="password" maxlength="30" name="password" type="password" value="{{ old('password') }}" required><i toggle="#password" class="fa-solid fa-eye fa-lg toggle-password"></i>
                                        </div>
                                    </div>
                                    <div class="row form-group password-toggle">
                                        <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') }}" required><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 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" type="email" value="{{ old('EmailID') }}" required>
                                        </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 type="text" 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" name="MobileNo" value="{{ old('MobileNo') }}" minlength="10" maxlength="10" pattern="\d{10}" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);" required>
                                        </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" required>
                                                <option value="">--Select--</option>
                                                @foreach ($roles as $role)
                                                <option value="{{ $role->RoleID }}" {{ old('RoleID') == $role->RoleID ? 'selected' : '' }}>
                                                    {{ $role->RoleName }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row form-group regional_user_div">
                                        <label class="control-label col-md-3" for="StateCode">Regions<span class="red">*</span></label>
                                        <div class="col-md-9">
                                            <select class="form-control clsSt" data-val="true" data-val-required="The StateCode field is required." id="regional_user_id" name="regional_user_id">
                                                <option value="">--Select--</option>
                                                @foreach ($RegionalUser as $row)
                                                <option value="{{ $row->RegionID  }}" {{ old('regional_user_id') == $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">
                                                <img id="ImgPreview" src="{{ asset('assets/images/no-profile.png') }}" style="height:135px;width:130px; border-width: 1px;
                                                    border-color: Black;">
                                            </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 btn_submit mr-2" type="submit">Save</button>
                                <a href="{{ url('Account/ManageUsers') }}" class="btn  btn-outline-primary">Back</a>
                            </div>

                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<style>
    /* #ImgPreview {
            display: none;
            width: 300px;
            height: auto;
        } */

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

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



<!-- <script>
    $('.toggle-password').click(function() {
        $(this).children().toggleClass('mdi-eye-outline mdi-eye-off-outline');
        let input = $(this).prev();
        input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
    });
</script> -->


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

        $('#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();

            if (role_id == 1) {
                $('.regional_user_div').hide();
                $("#regional_user_id").val('');
                $("#regional_user_id").prop('required', false);
            } else if (role_id == 2) {
                $('.regional_user_div').show();
                $("#regional_user_id").prop('required', true);
            } else {
                $('.regional_user_div').hide();
                $("#regional_user_id").val('');
                $("#regional_user_id").prop('required', false);
            }
        });
        $('#RoleID').trigger('change');

        $(".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");
            }
        });
    });
    function myFunction() {
        // const password = document.getElementById('password').value;
        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){
            bootbox.alert('Confirm password must be same as 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;
        }
        
        // var password = $('#password').val();
        // var conpassword = $('#password_confirmation').val();
        // alert(password);
        $('#password').val(CryptoJS.SHA512(password).toString());
        $('#password_confirmation').val(CryptoJS.SHA512(conpassword).toString());
        return true;
    }
</script>
@endsection