@extends('layouts.admin', ['title' => 'Add User'])

@push('stylesheets')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@endpush

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">Add New Officer</h4>
                        </div>

                        <div class="card-body">
                            <div class="live-preview">
                                <form id="add-user-form" enctype="multipart/formdata">
                                    <div class="row mt-3 g-3">
                                        <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                            <span class="badge badge-soft-primary">Officer Details</span>
                                        </h3>
                            <div class="row gy-4">


                                <div class="form-group col-12 col-lg-6">
                                    <div>
                                        <label for="basiInput" class="form-label">First Name</label>
                                        <input type="text" class="form-control" id="basiInput" name="first_name" placeholder="Enter First Name" autocomplete="off" required>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class=" form-group col-12 col-lg-6">
                                    <div>
                                        <label for="labelInput" class="form-label">Last Name</label>
                                        <input type="text" class="form-control" id="labelInput"  name ="last_name" placeholder="Enter Last Name"  autocomplete="off" required>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="form-group col-12 col-lg-6">
                                    <div>
                                        <label for="placeholderInput" class="form-label">Other Name</label>
                                        <input type="text" class="form-control" id="placeholderInput" name="other_name"   autocomplete="off" placeholder="Enter Other Name">
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="form-group col-12 col-lg-6">
                                <div>
                                        <label for="placeholderInput" class="form-label">Staff Number</label>
                                        <input type="text" class="form-control" id="placeholderInput" name="staff_number"   autocomplete="off" placeholder="Enter staff number" required>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="form-group col-12 col-lg-6">
                                    <div>
                                        <label for="readonlyPlaintext" class="form-label">Email Address</label>
                                        <input type="email" class="form-control" id="readonlyPlaintext"  name="email"  autocomplete="off"  placeholder="Enter Email Address" required>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="form-group col-12 col-lg-6">
                                    <div>
                                        <label for="cleave-phone" class="form-label">Phone Number</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text">+256</div>
                                            </div>
                                            <input type="text" class="form-control numbers" id="cleave-phone" name="phone_number"   autocomplete="off" placeholder="xxx xxx xxx" maxlength="11" required>
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->

                                <div class="form-group col-12 col-lg-6">
                                    <h6 class="fw-semibold">District </h6>
                                    <select id ="district_id" name="district_id">
                                        <option></option>
                                        @foreach($districts as $district)
                                        <option value="{{$district->id}}">{{$district->district}}</option>
                                        @endforeach
                                    </select>
                                </div>



                                <div class="form-gorup col-12 col-lg-6">
                                    <div>
                                        <label for="iconInput" class="form-label">Physical Address</label>
                                        <input type="text" class="form-control" id="placeholderInput" name="address"  autocomplete="off" placeholder="Enter Physical Address">
                                    </div>
                                </div>
                                <!--end col-->

                                <!--end col-->
                                <div class="form-group col-12 col-lg-6">
                                    <h6 class="fw-semibold">Role</h6>
                                    <select id ="role_id" name="role" required>
                                        <option></option>
                                        @foreach($roles as $role)
                                        <option value="{{$role->id}}">{{$role->role}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <button type ="submit" id="Add-User" class="btn btn-outline-primary btn-border button-prevent-multiple-submits">Create user</button>
                        </div>
                    </div>
                    </form>
                    </div>
                        </div>
                    </div>
                </div> <!-- end col -->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
</div>
@endsection

@push('scripts')

<!--select2 cdn-->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/additional-methods.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>

$(document).ready(function() {

    ///////////////////////////AJAX CSRF SET UP //////////////////////////////////////////////
    $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    ///////////////////////SELECT 2 INITIALISATION ///////////////////////////////////////

    $('#role_id').select2({
        'placeholder': 'Select a role'
    });

    $('#district_id').select2({

        'placeholder': 'Select district'
    });




    /////////////////// INPUT KEY//////////////////////////////////////////////////
    $('input.numbers').keyup(function(event) {
        if(event.which >= 37 && event.which <= 40) return;
        $(this).val(function(index, value) {
            return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, " ");
        });
    });


    $("#add-user-form").validate({
        ignore: null,
        rules: {

        },
        messages: {

        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        // Called when the element is invalid:
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },

        // Called when the element is valid:
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },

        submitHandler: function(form) {

            $('.button-prevent-multiple-submits').attr('disabled', true); // Disable button on clicking submit
                var formData = new FormData(form);

                $.ajax({
                url: '/add-officer',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend:function(){
                $('#Add-User').text('Processing...');
                },
                success: function(response) {

                    Swal.fire({
                        title: 'Success',
                        text: 'User created successfully',
                        icon: 'success',
                        toast:'true',
                        showConfirmButton:false,
                        position:'top-end',
                        timer:5000

                    }).then(function() {
                        window.location = "/view-officers";
                    });

                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    $('#Add-User').text('Create User');
                },
                error: function(response){


                    console.log(response);
                    if(response.status == 422){
                        var firstKey = Object.keys(response.responseJSON.errors)[0];
                        Swal.fire({
                        title: 'Error',
                        text: response.responseJSON.errors[firstKey][0],
                        icon: 'error',
                        toast:'true',
                        showConfirmButton:false,
                        position:'top-end',
                        timer:10000

                        });
                    }
                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    $('#Add-User').text('Create User');
                }
            });
        }
    });

});



</script>

@endpush