@extends('master.index')

@php


    use Illuminate\Support\Facades\Route;

    $params = Request::all();
    $permission_class_name = "User";
    $current_route = Route::currentRouteName();


@endphp

@section('header')

@endsection


@section('title')
{{__('messages.create_user')}}
@endsection


@section('content')
    <div class="section users-edit">
        <div class="card">
            <div class="card-content">
                <!-- <div class="card-body"> -->
                <ul class="tabs mb-2 row">
                    <li class="tab">
                        <a class="display-flex align-items-center active" id="account-tab" href="#account">
                            <i class="material-icons mr-1">person_outline</i><span>{{__('messages.account')}}</span>
                        </a>
                    </li>
                </ul>
                <div class="divider mb-3"></div>
                <div class="row">

                    <div class="col s12" id="account">
                        <form id="accountForm" action="{{route('user.store')}}" method="POST" >
                        @csrf

                        <!-- users edit account form start -->

                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="email" name="email" type="text" class="validate" value="{{old('email')}}" data-error=".error_email">
                                            <label for="email">{{__('messages.email')}}</label>
                                            <small class="error_email"></small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <select name="role" required>
                                                <option value="" class="validate">{{__('messages.select_item')}}</option>
                                                @foreach($roles as $role)
                                                    <option @if (old('role') == $role->name) selected @endif value="{{$role->name}}">{{$role->display_name}}</option>
                                                @endforeach
                                            </select>
                                            <label>{{__('messages.role')}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <select id="user_state" name="state" onchange="user_state_change()" required>
                                                <option @if (old('state') == \App\UserState::active) selected @endif value="{{\App\UserState::active}}" class="validate">{{\App\UserState::get_name(\App\UserState::active)}}</option>
                                                <option @if (old('state') == \App\UserState::deactive) selected @endif value="{{\App\UserState::deactive}}" class="validate">{{\App\UserState::get_name(\App\UserState::deactive)}}</option>
                                                <option @if (old('state') == \App\UserState::deactive_expire) selected @endif value="{{\App\UserState::deactive_expire}}" class="validate">{{\App\UserState::get_name(\App\UserState::deactive_expire)}}</option>
                                                <option @if (old('state') == \App\UserState::deleted) selected @endif value="{{\App\UserState::deleted}}" class="validate">{{\App\UserState::get_name(\App\UserState::deleted)}}</option>
                                                <option @if (old('state') == \App\UserState::not_registered) selected @endif value="{{\App\UserState::not_registered}}" class="validate">{{\App\UserState::get_name(\App\UserState::not_registered)}}</option>

                                            </select>
                                            <label>{{__('messages.user_state')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="username" name="username" required type="text" class="validate" value="{{old('username')}}" data-error=".error_username" >
                                            <label for="username">{{__('messages.username')}}</label>
                                            <small class="error_username"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="password" name="password" type="password" class="validate" value="{{old('password')}}" data-error=".error_password" >
                                            <label for="password">{{__('messages.password')}}</label>
                                            <small class="error_password"></small>

                                            <div style="margin-top: 10px;" id="message">
                                                <div><b>{{__('messages.password_rules')}}</b></div>
                                                <div  id="letter" class="password_message_invalid">{{__('messages.password_require_lowercase')}}</div>
                                                <div  id="capital"  class="password_message_invalid">{{__('messages.password_require_uppercase')}}</div>
                                                <div  id="number"  class="password_message_invalid">{{__('messages.password_require_number')}}</div>
                                                <div  id="length"  class="password_message_invalid">{{__('messages.password_require_min')}}</div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="verify_password" name="verify_password" type="password" class="validate" value="{{old('verify_password')}}" data-error=".error_verify_password" >
                                            <label for="verify_password">{{__('messages.verify_password')}}</label>
                                            <small class="error_verify_password"></small>
                                        </div>
                                    </div>
                                </div>


                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="api_key" name="api_key"  type="text" class="validate" value="{{old('api_key')}}" data-error=".error_api_key" >
                                            <label for="api_key">Api Key</label>
                                            <small class="error_api_key"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="row">

                                <div class="col s12 display-flex justify-content-end mt-3">
                                    <button type="submit" class="btn indigo">
                                        {{__('messages.save')}}</button>
                                    <button type="button" class="btn btn-light">{{__('messages.cancel')}}</button>
                                </div>
                            </div>
                        </form>
                        <!-- users edit account form ends -->
                    </div>

                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
@endsection






@section('scripts')












{{--    =================== password validation ===================--}}
{{--    =================== password validation ===================--}}
{{--    =================== password validation ===================--}}
{{--    =================== password validation ===================--}}
{{--    =================== password validation ===================--}}
{{--    =================== password validation ===================--}}
    <script>
        var PasswordInput = document.getElementById("password");
        var letter = document.getElementById("letter");
        var capital = document.getElementById("capital");
        var number = document.getElementById("number");
        var length = document.getElementById("length");

        // When the user clicks on the password field, show the message box
        PasswordInput.onfocus = function() {
            document.getElementById("message").style.display = "block";
        }

        // When the user clicks outside of the password field, hide the message box
        PasswordInput.onblur = function() {
            document.getElementById("message").style.display = "none";
        }

        // When the user starts to type something inside the password field
        PasswordInput.onkeyup = function() {


            // password_message_validate lowercase letters
            var lowerCaseLetters = /[a-z]/g;
            if(PasswordInput.value.match(lowerCaseLetters)) {

                letter.classList.remove("password_message_invalid");
                letter.classList.add("password_message_valid");
            } else {
                letter.classList.remove("password_message_valid");
                letter.classList.add("password_message_invalid");
            }

            // password_message_validate capital letters
            var upperCaseLetters = /[A-Z]/g;
            if(PasswordInput.value.match(upperCaseLetters)) {
                capital.classList.remove("password_message_invalid");
                capital.classList.add("password_message_valid");
            } else {
                capital.classList.remove("password_message_valid");
                capital.classList.add("password_message_invalid");
            }

            // password_message_validate numbers
            var numbers = /[0-9]/g;
            if(PasswordInput.value.match(numbers)) {
                number.classList.remove("password_message_invalid");
                number.classList.add("password_message_valid");
            } else {
                number.classList.remove("password_message_valid");
                number.classList.add("password_message_invalid");
            }

            // password_message_validate length
            if(PasswordInput.value.length >= 8) {
                length.classList.remove("password_message_invalid");
                length.classList.add("password_message_valid");
            } else {
                length.classList.remove("password_message_valid");
                length.classList.add("password_message_invalid");
            }
        }
    </script>
    <script type="text/javascript">

        $('select[required]').css({
            position: 'absolute',
            display: 'inline',
            height: 0,
            padding: 0,
            border: '1px solid rgba(255,255,255,0)',
            width: 0
        });


        var value = $("#password").val();

        $.validator.addMethod("checklower", function(value) {
            return /[a-z]/.test(value);
        });
        $.validator.addMethod("checkupper", function(value) {
            return /[A-Z]/.test(value);
        });
        $.validator.addMethod("checkdigit", function(value) {
            return /[0-9]/.test(value);
        });

        // $.validator.addMethod("pwcheck", function(value) {
        //     return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
        // });

        $("#accountForm").validate({
            rules: {
                email: {
                    required: true,
                    email:true
                },

                password: {
                    required: true,
                    checklower: true,
                    checkupper: true,
                    checkdigit: true,
                    //pwcheck: true,
                    minlength: 8,
                    maxlength: 30
                },
                verify_password: {
                    required: true,
                    equalTo: "#password"
                },

            },
            //For custom messages
            messages: {
                email:{
                    required: "{{__('messages.error_email_empty')}}",
                    minlength: "{{__('messages.error_email')}}"
                },

                password:{
                    required: "{{__('messages.error_password')}}",
                    minlength: "{{__('messages.error_password')}}",
                    checklower: "{{__('messages.error_password')}}",
                    checkupper: "{{__('messages.error_password')}}",
                    checkdigit: "{{__('messages.error_password')}}",
                },
                verify_password:{
                    required: "",
                    equalTo: "{{__('messages.error_verify_password')}}",
                },

            },
            errorElement : 'div',
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            }
        });


        $('#password').on('change', function() {
            $('#accountForm').valid();  // trigger validation test
        });

    </script>



    {{--    =================== password validation ===================--}}
    {{--    =================== password validation ===================--}}
    {{--    =================== password validation ===================--}}
    {{--    =================== password validation ===================--}}
    {{--    =================== password validation ===================--}}
    {{--    =================== password validation ===================--}}







@endsection