@extends('adminlte::page')

@section('title', 'Create User')

@push('css')
    <style>
        .iti{
            display: block !important;
        }
        .error {
            color: red;
            font-weight: 400 !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('vendor/datepicker/datepicker.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Create User</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item active">Create User</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="col-md-12">
        <!-- jquery validation -->
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">Add A New Admin Or Manager</small></h3>
          </div>
          <!-- /.card-header -->
          <!-- form start -->
          <form method="POST" id="register_form" action="{{ route('admin.users.store') }}">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label for="first-name">First Name</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" class="form-control @error('first_name') is-invalid @enderror" id="first-name" placeholder="Enter First Name" >
                    @error('first_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="last-name">Last Name</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" class="form-control @error('last_name') is-invalid @enderror" id="last-name" placeholder="Enter Last Name" >
                    @error('last_name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="email-address">Email address</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" id="email-address" placeholder="Enter email" >
                    @error('email')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="phone_no">Phone No</label>
                    <input id="phone_no" class="form-control" type="text" name="phone_no" value="{{ old('phone_no') }}" required maxlength="10" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" autocomplete="phone_no" placeholder="{{ __('Phone No') }}" >
                    <input type="hidden" name="country_code" value="{{ old('country_code') }}">
                    @error('phone_no')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="birth_date">Birth Date</label>
                    <input id="birth_date" class="form-control datepicker" type="text" name="birth_date" value="{{ old('birth_date') }}" required placeholder="{{ __('Birth Date') }}" >
                    @error('birth_date')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password" placeholder="Password" >
                    @error('password')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <!-- <div class="form-group">
                    <label for="age">Age</label>
                    <select name="age" id="" class="form-control" @error('age') is-invalid @enderror>

                        <option value="2" {{ old('age') == 2 ? 'selected' : '' }}>18 - 24</option>
                        <option value="3" {{ old('age') == 3 ? 'selected' : '' }}>25 - 34</option>
                        <option value="4" {{ old('age') == 4 ? 'selected' : '' }}>34 - 44</option>
                        <option value="1" {{ old('age') == 1 ? 'selected' : '' }}>45 +</option>
                        <option value="0" {{ old('age') == 0 ? 'selected' : '' }}>Not Prefer To Say</option>
                    </select>
                    @error('age')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div> -->
                <div class="form-group">
                    <label for="region_id">Region</label>
                    <select name="region_id" id="" class="form-control" @error('region_id') is-invalid @enderror>
                        @foreach($regions as $region)
                            @if($region->id != 1)
                                <option value="{{ $region->id }}">{{ $region->name }}</option>
                            @endif
                        @endforeach
                    </select>
                    @error('region_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group ">
                    <label for="user-type">User Type</label>
                        <select name="role" id="" class="form-control" @error('role') is-invalid @enderror>
                            <option value="">select role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    @error('role')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <input type="hidden" name="type" value="2">
                <div class="form-group mb-0">
                    <label for="user-type">Gender</label>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input" type="radio" id="male" name="gender" value="0"  {{ old('gender') == 0 ? 'checked' : 'checked' }}>
                                <label for="male" class="custom-control-label">M</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="f-male" name="gender" value="1" {{ old('gender') == 1 ? 'checked' : '' }}>
                                <label for="f-male" class="custom-control-label">F</label>
                            </div>
                            <div class="custom-control custom-radio d-inline ml-2">
                                <input class="custom-control-input" type="radio" id="other-male" name="gender" value="2" {{ old('gender') == 2 ? 'checked' : '' }}>
                                <label for="other-male" class="custom-control-label">Other</label>
                            </div>
                        </div>
                    </div>
                    @error('type')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <!-- /.card -->
        </div>
</section>
@push('js')
    <script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('vendor/datepicker/datepicker.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js" integrity="sha512-L3moecKIMM1UtlzYZdiGlge2+bugLObEFLOFscaltlJ82y0my6mTUugiz6fQiSc5MaS7Ce0idFJzabEAl43XHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js" integrity="sha512-LFWtoG1tvcDc6wZLVmditfb3DDPT+qd1NN/KJPQFgo//p5jvYiwcJsm4YjxDvao/JfT1xOzFJqzXOZkhLPpUvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@section('js')
<script>
    // Show - Hide Password

    $(document).ready(function() {


        var input = document.querySelector("#phone_no");
        window.iti = window.intlTelInput(input, {
            formatOnDisplay : false,
            separateDialCode: true,
        });

        @if(old('phone_no'))
            iti.setNumber("+{{old('country_code')}}{{old('phone_no')}}");
        @endif

        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
            startDate: moment().subtract(80, 'years').format('y-M-D'),
            endDate: moment().subtract(18, 'years').format('y-M-D'),
            autoclose: true
        })

        $.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("checkphone", function(value) {
            $("input[name='country_code']").val(window.iti.getSelectedCountryData().dialCode);
            return window.iti.isValidNumber();
        }, "Please Enter Proper Phone No");


        jQuery.validator.addMethod("lettersonly", function(value, element) {
                    return this.optional(element) || /^[a-z\s]+$/i.test(value);
                }, "Only alphabetical characters");

        $("#register_form").validate({
            rules : {
                errorClass : 'text-danger',
                errorElement: "span",
                onkeyup: true,
                password: {
                    minlength: 8,
                    required: true,
                    //pwcheck: true,
                    checklower: true,
                    checkupper: true,
                    checkdigit: true
                },
                first_name : {
                    lettersonly : true
                },
                last_name : {
                    lettersonly : true
                },
                phone_no:{
                    checkphone:true
                }
            },
            messages: {
                password: {
                    checklower: "Need at least 1 lowercase alphabet",
                    checkupper: "Need at least 1 uppercase alphabet",
                    checkdigit: "Need at least 1 digit"
                },
                password_confirmation: {
                    required: "Confirm password needs to be match"
                }
            },
            errorPlacement: function(error, element) {
                if($(element).attr("id") == 'phone_no') {
                    return $(error).appendTo( $("#phone_no").parents(".form-group"));
                }
                error.appendTo( element.parent() );
            },
        });
    });
</script>
@endsection
@endsection