@extends('admin.master')
@section('content')
    <div>
        <!-- widget grid -->
        <section id="widget-grid" class="">
            <!-- row -->
            <div class="row">
                <!-- NEW WIDGET START -->
                <article class="col-12">
                    <!-- Widget ID (each widget will need unique ID)-->
                    <div class="jarviswidget jarviswidget-color-darken no-padding" id="wid-id-0" data-widget-editbutton="false">
                        <header>
                            <div class="widget-header">
                                <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                                <h2>Create CDRL User</h2>
                            </div>

                            <div class="widget-toolbar">
                                <!-- add: non-hidden - to disable auto hide -->
                            </div>
                        </header>
                        <div>
                            <!-- widget edit box -->
                            <div class="jarviswidget-editbox">
                                <!-- This area used as dropdown edit box -->
                            </div>                            <!-- end widget edit box -->

                            <!-- widget content -->
                            <div class="widget-body p-0">
                                <div class="jumbotron">
                                    <!-- <h1 class="display-5">Edit User</h1> -->
                                    <hr class="my-4">
                                    <form class="needs-validation" novalidate method="post" action="create">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="first_name">First Name</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="first_name_addon">
                                                        <i class="far fa-user"></i>
                                                    </span>
                                                    </div>
                                                <input id="first_name"
                                                       type="text"
                                                       aria-describedby="first_name_addon"
                                                       class="form-control @error('first_name')is-invalid @enderror"
                                                       name="user[first_name]"
                                                       value="{{ old("user.first_name") }}"
                                                       autocomplete="first_name"
                                                       required
                                                       autofocus>
                                                @error('first_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                <div class="invalid-feedback">
                                                    First Name is required
                                                </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="last_name">Last Name</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="last_name_addon">
                                                        <i class="far fa-user"></i>
                                                    </span>
                                                    </div>
                                                <input id="last_name"
                                                       type="text"
                                                       aria-describedby="last_name_addon"
                                                       class="form-control @error('first_name')is-invalid @enderror"
                                                       name="user[last_name]"
                                                       value="{{ old('user.last_name') }}"
                                                       autocomplete="last_name"
                                                       required
                                                       autofocus>
                                                @error('last_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                <div class="invalid-feedback">
                                                    Last Name is required
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="email">Email</label>
                                                <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="email_addon">
                                                        <i class="fas fa-envelope-square"></i>
                                                    </span>
                                                </div>
                                                <input  value="{{ old('user.email') }}"
                                                       aria-describedby="email_addon"
                                                       type="email"
                                                       autocomplete="off"
                                                       id="email"
                                                       class="form-control @error('email')is-invalid @enderror"
                                                       name="user[email]"
                                                       autofocus
                                                       required
                                                       placeholder="Email">
                                                @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                <div class="invalid-feedback">
                                                    Plsease provide a vaild email address.
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="password">Password</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="password_addon">
                                                        <i class="fas fa-key"></i>
                                                    </span>
                                                    </div>
                                                <input
                                                    id="password"
                                                    type="password"
                                                    aria-describedby="password_addon"
                                                    class="form-control @error('password') is-invalid @enderror"
                                                    name="user[password]"
                                                    pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$'
                                                    required
                                                    autocomplete="Password">
                                                @error('password')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                <span class="invalid-feedback" role="alert">
                                                    The password must contain minimum eight characters, at least one uppercase letter,
                                                    one lowercase letter, one number and one special character.
                                                </span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="password_confirmation">Retype Password</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="retype_password_addon">
                                                        <i class="fas fa-key"></i>
                                                    </span>
                                                    </div>
                                                <input id="password_confirmation"
                                                       aria-describedby="retype_password_addon"
                                                       type="password"
                                                       class="form-control"
                                                       name="user[password_confirmation]"
                                                       required
                                                       autocomplete="new-password">
                                                <span class="invalid-feedback" role="alert">
                                                    The password don't match.
                                                </span>
                                            </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="home_phone">Home Phone</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="home_phone_addon">
                                                      <i class="fas fa-phone"></i>
                                                    </span>
                                                    </div>
                                                <input value="{{ old('user.home_phone') }}"
                                                       aria-describedby="home_phone_addon"
                                                       type="tel"
                                                       autocomplete="home_phone"
                                                       class="form-control"
                                                       name="user[home_phone]"
                                                       id="home_phone"
                                                       placeholder="Home Phone">
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="mobile_phone">Mobile Phone</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="mobile_phone_addon">
                                                     <i class="fas fa-mobile-alt"></i>
                                                    </span>
                                                    </div>
                                                <input value ="{{ old('user.mobile_phone') }}"
                                                       type="tel"
                                                       aria-describedby="mobile_phone_addon"
                                                       autocomplete="mobile_phone"
                                                       class="form-control"
                                                       name="user[mobile_phone]"
                                                       id="mobile_phone"
                                                       placeholder="Mobile Phone">
                                            </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="address_first_line">First Line of Address</label>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="address_first_line_addon">
                                                     <i class="fas fa-home"></i>
                                                    </span>
                                                </div>
                                            <input value ="{{ old('user.first_line_of_address') }}"
                                                   type="text"
                                                   aria-describedby="address_first_line_addon"
                                                   class="form-control"
                                                   id="address_first_line"
                                                   name="user[first_line_of_address]"
                                                   placeholder="First Line of Address">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="address_second_line">Second Line of Address</label>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="address_second_line_addon">
                                                     <i class="fas fa-home"></i>
                                                    </span>
                                                </div>
                                            <input value ="{{ old('user.second_line_of_address') }}"
                                                   type="text"
                                                   aria-describedby="address_second_line_addon"
                                                   class="form-control"
                                                   name="user[second_line_of_address]"
                                                   id="address_second_line"
                                                   placeholder="Second Line of Address">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="city">City/Town</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="city_addon">
                                                     <i class="fas fa-city"></i>
                                                    </span>
                                                    </div>
                                                <input  value ="{{ old('user.city') }}"
                                                    aria-describedby="city_addon"
                                                    type="text"
                                                    name=user[city]
                                                    class="form-control"
                                                    id="city">
                                                </div>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="country">Country</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="country_addon">
                                                     <i class="fas fa-flag"></i>
                                                    </span>
                                                    </div>
                                                <select class="form-control"
                                                        id="country"
                                                        name="user[country]"
                                                        aria-describedby="country_addon">
                                                    @foreach ( $countries as $country)
                                                        <option > {{ $country->name }} </option>
                                                    @endforeach
                                                </select>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-2">
                                                <label for="post_code">Post Code</label>
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text"
                                                          id="post_code_addon">
                                                    <i class="fas fa-mail-bulk"></i>
                                                    </span>
                                                <input value ="{{ old('user.post_code') }}"
                                                       aria-describedby="post_code_addon"
                                                       type="text"
                                                       name="user[post_code]"
                                                       class="form-control"
                                                       id="post_code">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <h6>Roles and Permissions</h6>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <label>Roles</label>
                                                </div>
                                            </div>
                                            @foreach( $roles as $role )
                                                <div class="form-check form-check-inline col-sm-2">
                                                    <input class="form-check-input checkbox_roles"
                                                           type="checkbox"
                                                           name = "roles[]"
                                                           id="role{{$role->id}}"
                                                           value="{{$role->name}}">
                                                    <label class="form-check-label"
                                                           for="role{{$role->id}}">
                                                        {{$role->name}}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <label>Permissions</label>
                                                </div>
                                            </div>
                                            @foreach( $permissions as $permission)
                                                <div class="form-check form-check-inline col-sm-2">
                                                    <input class="form-check-input checkbox_permissions"
                                                           type="checkbox"
                                                           name = "permissions[]"
                                                           id="permission{{$permission->id}}"
                                                           value="{{$permission->name}}">
                                                    <label class="form-check-label"
                                                           for="permission{{$permission->id}}">
                                                        {{$permission->name}}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button  type="submit" class="btn btn-primary">Create</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>
    </div>
@endsection
@section('scripts')
    <script>
        $( document ).ready(function() {
            $('#admin-menu, #cdrl-users-menu').addClass('active');
            //Validation logic
            (function() {
                'use strict';
                window.addEventListener('load', function() {
                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                    var forms = document.getElementsByClassName('needs-validation');
                    // Loop over them and prevent submission
                    var validation = Array.prototype.filter.call(forms, function(form) {
                        form.addEventListener('submit', function(event) {
                            if (form.checkValidity() === false) {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                            form.classList.add('was-validated');
                        }, false);
                    });
                }, false);
            })();

            //Set country's user in select input.
            $("#country").val("{{old('user.country')}}");

            //Password match logic.
            var password = document.getElementById("password");
            var password_confirmation = document.getElementById("password_confirmation");
            function validatePassword() {
                if (password.value != password_confirmation .value) {
                    password_confirmation.setCustomValidity("Passwords Don't Match");
                } else {
                    password_confirmation.setCustomValidity('');
                }
            }
            password.onchange = validatePassword;
            password_confirmation.onkeyup = validatePassword;

            //Roles and permission logic
            var roles = @json( $roles );
            $('.checkbox_roles').change(function () {
                rolesChecked = [];
                $('input[name="permissions[]"]').each(function () {
                    this.checked = false;
                    this.disabled = false;
                });
                $("input[name='roles[]']:checked").each(function () {
                    var role_checked_name = $(this).val();
                    roles.forEach(function (role, index) {
                        if (role.name === role_checked_name) {
                            $.each(role.permissions, function (i, val) {
                                $(".checkbox_permissions:input[value='" + val.name + "']")
                                    .prop('checked', true).prop('disabled', true);
                            });
                        }
                    });
                });
            });
            $(".needs-validation").submit(function() {
                $("input").removeAttr("disabled");
            });
        });
    </script>
@stop
@section ('css')
@stop