@extends('layouts.app')

@push('css')
<style>
    .iti {
        display:block !important;
    }
</style>
@endpush

@php
    if(isset($user))
    {
        $id             = $user->id;
        $name           = $user->name;
        $email          = $user->email;
        $phone_no       = $user->phone_no;
        $role_id        = $user->role_id;
    }
    else
    {
        $name             = old('name');
        $email            = old('email');
        $phone_no         = old('user_phone_no');
        $role_id          = old('role_id');
    }

@endphp

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Users</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Manage Users</a></li>
                        <li class="breadcrumb-item active">Edit User</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Edit User</h3>
                        </div>
                        <!-- /.card-header -->
                        {!! Form::open(['name'=>'edituserfrm', 'id'=>'edituserfrm', 'route' =>['users.update',$id], 'method' => 'put', 'files' => true]) !!}
                            {!! Form::hidden('user_phone_no') !!}
                            <!-- Includes message here -->
                            @include('admin.includes.message')
                            <div class="card-body">
                                <div class="form-group">
                                    {!! Form::label('name', 'Name *', ['for' => 'name']) !!}
                                    {!! Form::text('name',$name,['class'=>'form-control','placeholder'=>'Enter Full Name','autofocus'=>true]) !!}
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-name" class="text-danger"></span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    {!! Form::label('email', 'Email *', ['for' => 'email']) !!}
                                    {!! Form::email('email',$value = $email,$attributes = ['class'=>'form-control','placeholder'=>'Enter Email Address']) !!}
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-password" class="text-danger"></span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    {!! Form::label('password', 'Password *', ['for' => 'password']) !!}
                                    {!! Form::password('password',['class'=>'form-control','placeholder'=>'Enter Password']) !!}
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-password" class="text-danger"></span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    {!! Form::label('password_confirmation', 'Confirm Password *', ['for' => 'password_confirmation']) !!}
                                    {!! Form::password('password_confirmation',['class'=>'form-control','placeholder'=>'Re enter password']) !!}
                                    @error('password_confirmation')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-password_confirmation" class="text-danger"></span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    {!! Form::label('role_id', 'Role *') !!}
                                    {!! Form::select('role_id', $roles, $role_id, ['class'=>'form-control','placeholder' => 'Select Role']) !!}
                                    @error('role_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-role_id" class="text-danger"></span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    {!! Form::label('phone_no', 'Phone Number *') !!}
                                    {!! Form::text('phone_no',$phone_no,['class'=>'form-control']) !!}
                                    @error('phone_no')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @else
                                        <span id="error-phone_no" class="text-danger"></span>
                                    @enderror
                                    <span id="phonenonote" class="cls-phone-no-note" style="display: none;">(Note: Please enter phone number starts with <span id="phonenostartdigit"></span>)</span>
                                    <span id="phonenonoteus" class="cls-phone-no-note" style="display:block;">(Note: Please enter phone number starts with 201)</span>
                                </div>


                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                {!! Form::submit('Update',['class'=>'btn btn-primary']) !!}
                                <a href="{{ url('users') }}" class="btn btn-default">Cancel</a>
                            </div>
                        {!! Form::close() !!}

                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('script')
<script type="text/javascript">
    $(document).ready(function() {
        var phone_no      = document.querySelector("#phone_no");

        var phone_no_user = window.intlTelInput(phone_no, {
            separateDialCode: true,
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
                if (selectedCountryData.dialCode == "1") {
                    if(selectedCountryData.iso2 != 'us'){
                        $("#phonenostartdigit").html(selectedCountryData.areaCodes[0]);
                        $("#phonenonote").show();
                        $("#phonenonoteus").hide();
                    }else{
                        $("#phonenonoteus").show();
                        $("#phonenonoteus").html("(Note: Please enter phone number starts with 201)");
                        $("#phonenonote").hide();
                    }
                }
                else{
                    $("#phonenostartdigit").html("");
                    $("#phonenonote").hide();
                    $("#phonenonoteus").hide();
                }
                return "e.g. " + selectedCountryPlaceholder;
            },
            // var input = document.querySelector("#org_user_phone_no_verify"),
        });

        phone_no.addEventListener("countrychange", function() {
            $('#phone_no').val('');
        });  

        $("#phone_no").keypress(function (e) {   
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
            }
        });

        $.validator.addMethod("PASSWORD", function (value, element) {
            return this.optional(element) || /^(?!.*[\s])(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])/.test(value);
        },"Must contain at least 1 capital letter, 1 small letter, 1 special character and 1 number.");

        $.validator.addMethod('validateUserPhone', function () {
            if(phone_no_user.isValidNumber()) {
                return true;
            }else{
                return false;
            }
        },"Please Enter valid mobile number.");

        $('#edituserfrm').validate({
            rules: {
                name: {
                    required:true,
                },
                email: {
                    required:true,
                    email:true,
                },
                password: {
                    minlength:6,
                    PASSWORD:true,
                },
                password_confirmation: {
                    required: function(element){
                        return $('#password').val()!='';
                    },
                    minlength:6,
                    PASSWORD:true,
                    equalTo: "#password",
                },
                role_id: {
                    required:true,
                },
                phone_no: {
                    required:true,
                    validateUserPhone:true,
                }
            },
            errorPlacement: function (error, element) {
                if(element.attr("name")=="phone_no") {
                    error.appendTo(element.parent().parent().find('span.text-danger'));
                } else {
                    error.appendTo(element.parent().find('span.text-danger'));
                }
            },
            submitHandler: function(form) {
                var user_mobile_no = $('#phone_no').val(); 
                var user_mobile_no = user_mobile_no.replace(/\D/g, '');
                var getCode = phone_no_user.getSelectedCountryData()["dialCode"];
                $('input[name="user_phone_no"]').val('+'+getCode+'-'+user_mobile_no);
                return true;
            }
                
        });
    });

    
</script>
@endpush