<script>
    $(document).ready(function (){
        $('#access-list').select2();
        $('#product-list').select2();
        $('#mini-cover-list').select2();
        $('#branch-list').select2();


        /**Selecting User Access Type**/
        $('#access-list').on('change', function () {
            var access = $(this).val();
            if (access != "") {
                $('#access-label').removeClass('error');
            } else {
                $('#access-label').addClass('error');
            }
        });
        /**Selecting User Branch**/
        $('#branch-list').on('change', function () {
            var branch = $(this).val();
            if (branch != "") {
                $('#branch-label').removeClass('error');
            } else {
                $('#branch-label').addClass('error');
            }
        });


        /**Entering the First name of user**/
        $('#f-name').on('input paste', function () {
            var fName = $(this).val();
            if (fName != "") {
                $('#first-name-label').removeClass('error');
            } else {
                $('#first-name-label').addClass('error');
            }
        });
        /**Entering the Last name of user**/
        $('#l-name').on('input paste', function () {
            var lName = $(this).val();
            if (lName != "") {
                $('#other-name-label').removeClass('error');
            } else {
                $('#other-name-label').addClass('error');
            }
        });
        /**Entering the username of user**/
        $('#username-name').on('input paste', function () {
            var username = $(this).val();
            if (username != "") {
                $('#username-label').removeClass('error');
            } else {
                $('#username-label').addClass('error');
            }
        });
        /**Entering the Phone Number of user**/
        $('#phone-name').on('input paste', function () {
            var phone = $(this).val();
            if (phone != "") {
                $('#phone-label').removeClass('error');
            } else {
                $('#phone-label').addClass('error');
            }
        });
        /**Entering Password of user**/
        $('#password-name').on('input paste', function () {
            var password = $(this).val();
            if (password != "") {
                $('#password-label').removeClass('error');
            } else {
                $('#password-label').addClass('error');
            }
        });

        /**Change Password Options**/
        $('#no-change').on('click', function (){
            $('#allow-change-password').hide();
        });
        $('#yes-change').on('click', function (){
            $('#allow-change-password').show();
        });

        $('#password-name').keyup(function () {
            $('#strengthMessage').html(checkStrength($('#password-name').val()));
        });
        function checkStrength(password) {
            var strength = 0;
            if (password.length < 6) {
                $('#strengthMessage').removeClass();
                $('#strengthMessage').addClass('Short');
                return 'Password Too Short';

            }
            if (password.length > 7) strength += 1;
            // If password contains both lower and uppercase characters, increase strength value.
            if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1;
            // If it has numbers and characters, increase strength value.
            if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1;
            // If it has one special character, increase strength value.
            if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
            // If it has two special characters, increase strength value.
            if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;
            // Calculated strength value, we can return messages
            // If value is less than 2
            if (strength < 2) {

                $('#strengthMessage').removeClass();
                $('#strengthMessage').addClass('Weak');
                return 'Password is Weak';
            } else if (strength == 2) {

                $('#strengthMessage').removeClass();
                $('#strengthMessage').addClass('Good');
                return 'Password is Good';
            } else {
                $('#strengthMessage').removeClass();
                $('#strengthMessage').addClass('Strong');
                return 'Password Very Strong';
            }
        }
    });
</script>
<style>
    .Short {
        width: 100%;
        height: 3px;
        color: #dc3545;
        font-weight: bold;
        font-size: 15px;
    }
    .Weak {
        width: 100%;
        height: 3px;
        color: #ffc107;
        font-weight: bold;
        font-size: 15px;
    }
    .Good {
        height: 3px;
        color: #d39e00;
        font-weight: bold;
        font-size: 15px;
    }
    .Strong {
        width: 100%;
        height: 3px;
        color: #3ee025;
        font-weight: bold;
        font-size: 15px;
    }
    .notSame {
        width: 100%;
        height: 3px;
        color: #dc1c0f;
        font-weight: bold;
        font-size: 15px;
    }
</style>

{!! Form::open(['route'=>['user.storeUpdateUserAccountDetails', 'id'=>$id], 'method'=>'POST', 'id'=>'update-user-account-details']) !!}
<div class="error" style="text-align: center;"><b>On this Window, You can Update User Account Details</b></div><br>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<div  style="text-align: center;">
    Update Details for: {!! $user->firstName." ".$user->lastName !!}
</div><br>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('access', 'Select Access Level',['id'=>'access-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        <select name="access" id="access-list" style="width: 210px">
            @if($user->accessType($user->access) != null)
                <option value="{{$user->access}}">{!! $user->accessType($user->access)  !!}</option>
            @endif
                <option value="">--Select Another Access Level--</option>
                <option value="1">System Admin</option>
                <option value="2">Chief Financial Officer(CFO)</option>
                <option value="3">Accounts</option>
                <option value="8">General User</option>
                <option value="14">Quoter(Quotations)</option>
                <option value="8">Prospecting</option>
                <option value="8">Reports</option>
                <option value="3">Stock Manager</option>
                <option value="1">IT Manager</option>
        </select>
    </div>
</div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('branch', 'Select Branch',['id'=>'branch-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        <select name="branch" id="branch-list" style="width: 210px">
            @if($user->branchDetails != null)
                <option value="{{$user->branch}}">{!! $user->branchDetails->name  !!}</option>
            @endif
            <option value="">--Select Another Branch--</option>
            @foreach($branches as $list)
                <option value="{{$list->id}}">{!! $list->name !!}</option>
            @endforeach
        </select>
    </div>
</div>
<div class="guestDetails_inputDividerNone"></div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('f-name', 'Enter First Name',['id'=>'first-name-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        {!! Form::text('f-name', $user->firstName ?? '', ['autocomplete'=>'off','id'=>'f-name', 'class'=>'input-text-height', 'size'=>'35', 'placeholder'=>'Enter User\'s First Name']) !!}
    </div>
</div>
{{--<div class="guestDetails_inputDividerNone"></div>--}}
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('l-name', 'Enter Other Name(s)',['id'=>'other-name-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        {!! Form::text('l-name', $user->lastName ?? '', ['autocomplete'=>'off','id'=>'l-name', 'class'=>'input-text-height', 'size'=>'35', 'placeholder'=>'Enter User\'s Other Name(s)']) !!}
    </div>
</div>
<div class="guestDetails_inputDividerNone"></div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('user-name', 'Enter Username',['id'=>'username-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        {!! Form::text('username', $user->email ?? '', ['autocomplete'=>'off','id'=>'username-name', 'class'=>'input-text-height', 'size'=>'35', 'placeholder'=>'Enter Username']) !!}
    </div>
</div>
{{--<div class="guestDetails_inputDividerNone"></div>--}}
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('phone', 'Enter Phone Number',['id'=>'phone-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        {!! Form::text('phone', $user->phone ?? '', ['autocomplete'=>'off','id'=>'phone-name', 'class'=>'input-text-height', 'size'=>'35', 'placeholder'=>'Enter User\'s Phone Number']) !!}
    </div>
</div>
<div class="guestDetails_inputDividerNone"></div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        {!! Form::label('change-password', 'Do you wish to Change User Password?',['id'=>'change-label'])!!}
        <span class="error">*</span>
    </div>
    <div class="guestDetails_input">
        No <span style="font-size: 20px">&#9755;</span>
        {!! Form::radio('change', 'no',true, ['id'=>'no-change', 'style'=>'cursor:pointer']) !!}
        <span style="margin-left: 50px"></span>Yes <span style="font-size: 20px;">&#9755;</span>
        {!! Form::radio('change', 'yes',false, ['id'=>'yes-change', 'style'=>'cursor:pointer']) !!}
    </div>
</div>
<div class="guestDetails_inputDividerNone"></div>
<div class="guestDetails_input" style="display: none" id="allow-change-password">
    <div class="guestDetails_inputLabel">
        {!! Form::label('password', 'Enter Password',['id'=>'password-label','class'=>'error'])!!}
        <span class="error">*</span>
        <span id="strengthMessage"></span>
    </div>
    <div class="guestDetails_input">
        {!! Form::password('password', ['autocomplete'=>'off','id'=>'password-name', 'class'=>'input-text-height', 'size'=>'79', 'placeholder'=>'Enter User\'s Password']) !!}
    </div>
</div>



{!! Form::close() !!}
