@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.edit_user')." ".$user->email}}
@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>


                    <li class="tab">
                        <a class="display-flex align-items-center" id="change_password-tab" href="#change_password">
                            <i class="material-icons mr-2">lock_outline</i><span>{{__('messages.change_password')}}</span>
                        </a>
                    </li>

                    <li class="tab">
                        <a class="display-flex align-items-center" id="device-tab" href="#device">
                            <i class="material-icons mr-2">smartphone</i><span>{{__('messages.device')}}</span>
                        </a>
                    </li>
                </ul>
                <div class="divider mb-3"></div>
{{--        ======================== Account tab ======================--}}
{{--        ======================== Account tab ======================--}}
{{--        ======================== Account tab ======================--}}
{{--        ======================== Account tab ======================--}}
                <div class="row">

                    <div class="col s12" id="account">
                        <!-- users edit media object start -->
                        <form id="accountForm" action="{{route('user.update',$user)}}" method="POST" >
                            @csrf
                            <input  type="hidden" name="tab" value="account">


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

                            <div class="row">
                                <div class="col s12 m6">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input disabled id="email" name="email" type="text" class="validate" value="{{$user->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 ($user->role_id == $role->id) 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 ($user->state == \App\UserState::active) selected @endif value="{{\App\UserState::active}}" class="validate">{{\App\UserState::get_name(\App\UserState::active)}}</option>
                                                <option @if ($user->state == \App\UserState::deactive) selected @endif value="{{\App\UserState::deactive}}" class="validate">{{\App\UserState::get_name(\App\UserState::deactive)}}</option>
                                                <option @if ($user->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 ($user->state == \App\UserState::deleted) selected @endif value="{{\App\UserState::deleted}}" class="validate">{{\App\UserState::get_name(\App\UserState::deleted)}}</option>
                                                <option @if ($user->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" required name="username" type="text" class="validate" value="{{$user->username}}" data-error=".error_username"  >
                                            <label for="username">{{__('messages.username')}}</label>
                                            <small class="error_username"></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="{{$user->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>


{{--        ======================== Password tab ======================--}}
{{--        ======================== Password tab ======================--}}
{{--        ======================== Password tab ======================--}}
{{--        ======================== Password tab ======================--}}
                <div class="row">

                    <div class="col s12" id="change_password">
                        <!-- users edit media object start -->
                        <form id="passwordForm" action="{{route('user.updatepass',$user)}}" method="POST" >
                            @csrf

                            <input  type="hidden" name="tab" value="change_password">
                            <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="" data-error=".error_password" >
                                            <label for="password">{{__('messages.new_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="" data-error=".error_verify_password" >
                                            <label for="verify_password">{{__('messages.verify_password')}}</label>
                                            <small class="error_verify_password"></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>


 {{--        ======================== UserDevice tab ======================--}}
 {{--        ======================== UserDevice tab ======================--}}
 {{--        ======================== UserDevice tab ======================--}}
 {{--        ======================== UserDevice tab ======================--}}

                <div class="row">

                    <div class="col s12" id="device">
                        <!-- users edit media object start -->
                        <form id="DeviceForm" action="{{route('user.update_other',$user)}}" method="POST" >
                            @csrf
                            <input  type="hidden" name="tab" value="device">



                            <div class="row">

                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="os_version" name="os_version" type="text"  value="{{$user->os_version}}" data-error=".error_os_version"  >
                                            <label for="os_version">{{__('messages.os_version')}}</label>
                                            <small class="error_os_version"></small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <select name="device" >

                                                <option @if ($user->device == \App\DeviceTypes::other) selected @endif value="{{\App\DeviceTypes::other}}" class="validate">{{\App\DeviceTypes::get_name(\App\DeviceTypes::other)}}</option>
                                                <option @if ($user->device == \App\DeviceTypes::android) selected @endif value="{{\App\DeviceTypes::android}}" class="validate">{{\App\DeviceTypes::get_name(\App\DeviceTypes::android)}}</option>
                                                <option @if ($user->device == \App\DeviceTypes::ios) selected @endif value="{{\App\DeviceTypes::ios}}" class="validate">{{\App\DeviceTypes::get_name(\App\DeviceTypes::ios)}}</option>
                                            </select>
                                            <label>{{__('messages.device')}}</label>
                                        </div>
                                    </div>
                                </div>



                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="device_model" name="device_model" type="text"  value="{{$user->device_model}}" data-error=".error_device_model"  >
                                            <label for="device_model">{{__('messages.device_model')}}</label>
                                            <small class="error_device_model"></small>
                                        </div>
                                    </div>
                                </div>





                            </div>


                            <div class="row">

                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="device_brand" name="device_brand" type="text"  value="{{$user->device_brand}}" data-error=".error_device_brand"  >
                                            <label for="device_brand">{{__('messages.device_brand')}}</label>
                                            <small class="error_device_brand"></small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="token" name="token" type="text"  value="{{$user->token}}" data-error=".error_token"  >
                                            <label for="token">{{__('messages.token')}}</label>
                                            <small class="error_token"></small>
                                        </div>
                                    </div>
                                </div>

                                <div class="col s12 m4">
                                    <div class="row">
                                        <div class="col s12 input-field">
                                            <input id="imei" name="imei" type="text"  value="{{$user->imei}}" data-error=".error_imei"  >
                                            <label for="device_imei">{{__('messages.imei')}}</label>
                                            <small class="error_imei"></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
                },

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


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




        $("#passwordForm").validate({
            rules: {

                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: {

                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>







    {{--    =================== DatePicker  ===================--}}
    {{--    =================== DatePicker  ===================--}}
    {{--    =================== DatePicker  ===================--}}



    <script type="text/javascript">
        $(document).ready(function () {

            $("#expire_ban").datepicker({
                format: "yyyy-mm-dd",
                showClearBtn: true,
            });
        });


        $(document).ready(function () {

            $("#birthday").datepicker({
                format: "yyyy-mm-dd",
                showClearBtn: true,
            });
        });


        $(document).ready(function () {

            $("#online_date").datepicker({
                format: "yyyy-mm-dd",
                showClearBtn: true,
            });
        });


    </script>
@endsection