@extends('layouts.app')

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

@php
    
    $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">Add 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">Add User</h3>
                        </div>
                        <!-- /.card-header -->
                        {!! Form::open(['name'=>'adduserfrm', 'id'=>'adduserfrm', 'route' => 'users.store', 'method' => 'post', 'files' => true]) !!}
                            {!! Form::hidden('user_phone_no') !!}
                            <div class="card-body">
                                <!-- Includes message here -->
                                @include('admin.includes.message')
                                
                                <div class="form-group">
                                    {!! Form::label('name', 'Name *', ['for' => 'name']) !!}
                                    {!! Form::text('name',$name,['class'=>'form-control','placeholder'=>'Enter Full Name','autofocus'=>true]) !!}
                                    @if($errors->has('name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('name') }}</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']) !!}
                                    @if($errors->has('email'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email') }}</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']) !!}
                                    @if($errors->has('password'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('password') }}</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']) !!}
                                    @if($errors->has('password_confirmation'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('password_confirmation') }}</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']) !!}
                                    @if($errors->has('role_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('role_id') }}</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']) !!}
                                    @if($errors->has('user_phone_no'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('user_phone_no') }}</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('Submit',['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,
            formatOnDisplay: false,
            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.");

        $('#adduserfrm').validate({
            rules: {
                name: {
                    required:true,
                },
                email: {
                    required:true,
                    email:true,
                },
                password: {
                    required:true,
                    minlength:6,
                    PASSWORD:true,
                },
                password_confirmation: {
                    required:true,
                    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