@extends('admin.layouts.app')

@section('content')
<div class="pagetitle">
    <!-- <h1>Add User</h1> -->
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Users</li>
        </ol>
    </nav>
</div><!-- End Page Title -->
@can('users.create')
<section class="section">
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">New User</h5>

                    <!-- General Form Elements -->
                    <form class="row g-3" role="form" name="frm-user-create" id="frm-user-create" action="{{ route(sprintf('%s.store', $module['resourceful'])) }}" method="post" enctype="multipart/form-data">
                        @csrf

                        <div class="col-md-6">
                            <label for="first_name" class="col-sm-2 col-form-label">First Name<span class="red-mark">*</span></label>

                            <input type="text" placeholder="Please enter first name" name="first_name" id="first_name" class="form-control" value="{{ old('first_name') }}">
                            @if($errors->has('first_name'))
                            <div class="error">{{ $errors->first('first_name') }}</div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <label for="last_name" class="col-sm-2 col-form-label">Last Name<span class="red-mark">*</span></label>

                            <input type="text" placeholder="Please enter last name" name="last_name" id="last_name" class="form-control" value="{{ old('last_name') }}">
                            @if($errors->has('last_name'))
                            <div class="error">{{ $errors->first('last_name') }}</div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <label for="inputEmail" class="col-sm-2 col-form-label">Email<span class="red-mark">*</span></label>

                            <input type="email" placeholder="Please enter email" name="email" id="email" class="form-control" value="{{ old('email') }}">
                            @if($errors->has('email'))
                            <div class="error">{{ $errors->first('email') }}</div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <label for="inputPassword" class="col-sm-2 col-form-label">Phone<span class="red-mark">*</span></label>

                            <input type="text" placeholder="Please enter phone" name="phone" id="phone" class="form-control" value="{{ old('phone') }}">
                            @if($errors->has('phone'))
                            <div class="error">{{ $errors->first('phone') }}</div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <label for="inputPassword" class="col-sm-2 col-form-label">Password<span class="red-mark">*</span></label>

                            <input type="password" placeholder="Please enter password" name="password" id="password" class="form-control">
                            @if($errors->has('password'))
                            <div class="error">{{ $errors->first('password') }}</div>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <label for="inputPassword" class="col-sm-4 col-form-label">Confirm Password <span class="red-mark">*</span></label>

                            <input type="password" placeholder="Please re-enter password" name="password_confirmation" id="password_confirmation" class="form-control">
                            @if($errors->has('password_confirmation'))
                            <div class="error">{{ $errors->first('password_confirmation') }}</div>
                            @endif
                        </div>                

                        <div class="col-md-6">
                            <label for="role" class="col-sm-2 col-form-label">Role<span class="red-mark">*</span></label>

                            <select class="form-control" name="role" id="role">
                                <option value="">---Select Role---</option>
                                @if($roles->count() > 0)
                                    @foreach($roles as $u_role)
                                        <option value="{{ $u_role->name }}">{{ $u_role->name }}</option>                  
                                    @endforeach
                                @endif
                            </select>

                            @if($errors->has('role'))
                            <div class="error">{{ $errors->first('role') }}</div>
                            @endif
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <a class="btn btn-default" href="{{ route('admin-users.index') }}">Back</a>
                        </div>
                    </form>
                    <!-- End General Form Elements -->
                </div>
            </div>
        </div>
    </div>
</section>
@endcan

<style type="text/css">
    .error {
        color: red;
    }

    .red-mark {
        color: red;
    }

</style>
@endsection

@push('scripts_footer') 
<script>        
    jQuery.validator.addMethod("passwordFormatCheck", function(value, element) {
        return this.optional(element) || /^(?=.*\d)(?=.*[A-Z])(?=.*\W).*$/i.test(value);
    },'Password must contain one capital letter,one numerical and one special character');

    blockPage=function(unblock){
        var unblock = unblock || false;   
        
        if( unblock ){
            mApp.unblockPage();
        }else{
            mApp.blockPage({
                overlayColor: '#000000',
                type: 'loader',
                state: 'success',
                message: 'Please wait...'
            });
        }
    }

    ajaxSubmitPostUser=function(form){
        jQuery(form).ajaxSubmit({
            dataType: 'json',
            beforeSubmit: function(xhr){
                //
                blockPage();
            },
            success: function(res){
                //
                //unblockPage();  

                //showMessage(res);

                if( res.status == 'success' ){                                      
                    window.setTimeout(function(){
                        window.location = res.location
                    }, 3000);
                }
            },
            error: function(error){     
                unblockPage();   

                // validation error    
                if (error.status == 422) {
                    jQuery('#frm-user-create').find("label[for]").find('em').remove();
                    jQuery.each(error.responseJSON.errors, function(k, v){   
                        var em = jQuery('<em>', {class:"error"}).append(
                            v[0]
                        );

                        jQuery('#frm-user-create').find("label[for='"+k+"']").append(em);
                    })
                }                  
            }
        });

        return false;
    }


    validatePostUserForm=function(){
        jQuery('#frm-user-create').validate({
            submitHandler: function(form) {                 

                // form.submit();
                ajaxSubmitPostUser(form);
            },

            errorElement: 'span',
            focusInvalid: true,

            errorPlacement: function(error, element) {        

                var target = element.prop('name');    
                var label  = element.parent();                      

                //error.appendTo( label.find("label[for='"+target+"']") ); 
                error.appendTo(element.parent().after());         
            },
            ignore:'',
            rules: {                   
                first_name:{                
                    required: true,
                    maxlength: 100
                },
                last_name:{                
                    required: true,
                    maxlength: 100
                },
                email:{                
                    required: true,
                    maxlength: 255
                },
                phone:{                
                    required: true,
                    maxlength: 50
                }, 
                password: {
                    required: true,
                    passwordFormatCheck: true,
                    minlength: 8,
                    maxlength: 255
                }, 
                password_confirmation: {
                    minlength: 5,
                    equalTo: "#password"
                },
                role: "required",                                                                                      
            },

            messages: {
                first_name: {
                    required: "Please enter first name",
                    maxlength: "First name not more than 100 characters"
                },
                last_name: {
                    required: "Please enter lasr name",
                    maxlength: "Last name not more than 100 characters"
                },
                email: {
                    required: "Please enter valid email",
                    maxlength: "Email not more than 255 characters"
                },
                phone: {
                    required: "Please enter phone number",
                    maxlength: "Phone number not more than 50 characters"
                },
                password: {
                    required: "Please enter password",
                    maxlength: "password not more than 255 characters",
                    minlength: "password not less than 8 characters"
                },
                password_confirmation: {
                    required: "Please re-enter password",
                    maxlength: "password not more than 255 characters",
                    minlength: "password not less than 8 characters"
                },
                role: "Please select any role",
            }
        });
    }

    jQuery(document).ready(function() {
        
        validatePostUserForm();        
    });
</script>
@endpush