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

@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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@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">Profile Village Agent</h4>
                        </div><!-- end card header -->

                        <div class="card-body">
                            <div class="live-preview">
                                <form id="village-agent-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">Village Agent Details</span>
                                        </h3>

                                        <div class="col-md-6 form-group">
                                            <label for="surname" class="form-label">First Name</label>
                                            <input type="text" class="form-control" id="first_name" placeholder="Enter first name " name="first_name" required>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label for="surname" class="form-label">Last Name</label>
                                            <input type="text" class="form-control" id="last_name" placeholder="Enter last name " name="last_name" required>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label for="surname" class="form-label">Email</label>
                                            <input type="text" class="form-control" id="email" placeholder="Enter email " name="email" >
                                        </div>

                                        <div class="col-md-6 form-group">
                                        <label for="businessPhoneNumber" class="form-label">Phone Number</label>
                                            <div class="input-group"><span class="input-group-text" id="inputGroupPrepend">256</span>
                                            <input type="text" class="form-control numbers" id="businessPhoneNumber" name="village_agent_contact" placeholder="Enter the phone number" minlength="11" maxlength="11" required>
                                            </div>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label for="idType" class="form-label">District</label>
                                            <select class="form-control" id="districts" name="district_id" required>
                                                <option></option>
                                                @foreach($districts as $district)
                                                <option value ="{{$district->id}}">{{$district->district}}</option>
                                                @endforeach
                                            </select>
                                        </div>


                                        <div class="col-md-6 form-group" id="subcounties-div" style="display:none;">
                                            <label for="idType" class="form-label">Subcounty</label>
                                            <select class="form-control" id="subcounties" name="subcounty_id" required>
                                                <option></option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 form-group" id="parishes-div" style="display:none;">
                                            <label for="idType" class="form-label">Parish</label>
                                            <select class="form-control" id="parishes" name="parish_id" required>
                                                <option></option>
                                            </select>
                                        </div>

                                        <div class="col-md-6 form-group" id="villages-div" style="display:none;">
                                            <label for="idType" class="form-label">Village</label>
                                            <select class="form-control" id="villages" name="village_id" required>
                                                <option></option>
                                            </select>
                                        </div>



                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Is this number registered on mobile money?</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="village_agent_mobile_money" id="flexRadioDefault1" value="1">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Yes
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="village_agent_mobile_money" id="flexRadioDefault2" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        </div>


                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Is this number registered in your names as above?</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="registered_mobile_money" id="flexRadioDefault1" value="1">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Yes
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="registered_mobile_money" id="flexRadioDefault2" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        </div>


                                        <div class="col-md-6 form-group" id="mobile-money-names" style="display:none;">
                                            <label for="surname" class="form-label">What names is this number registered in?</label>
                                            <input type="text" class="form-control"  placeholder="Enternames is this number registered in" name="other_names_registered">
                                        </div>

                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Do you have a bank account?</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="village_agent_bank_account" id="bank_account_yes" value="1">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Yes
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="village_agent_bank_account" id="bank_account_no" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label for="surname" class="form-label">National Identification number</label>
                                            <input type="text" class="form-control" id="nin" placeholder="Enter national identification number" name="national_identification_number">
                                        </div>

                                        <!-- Bank account details -->
                                        <div class=" row mt-3" id="bank-details-fields" style="display: none;">
                                        <div class="col-md-6 form-group">
                                            <label for="idType" class="form-label">Banks</label>
                                            <select class="form-control" id="banks" name="bank_id" >
                                                <option></option>
                                                @foreach($banks as $bank)
                                                <option value ="{{$bank->id}}">{{$bank->bank}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                            <div class="col-md-6 form-group">
                                                <label for="cardNumber" class="form-label">Bank Account Number</label>
                                                <input type="text" class="form-control" name="bank_account_number"  placeholder="Enter bank account number" >
                                            </div>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label for="idType" class="form-label">Education level</label>
                                            <select class="form-control" id="education-level" name="education_level_id" required>
                                                <option></option>
                                                @foreach($education_levels as $level)
                                                <option value ="{{$level->id}}">{{$level->education_level}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Select gender</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="gender" id="flexRadioDefault1" value="male">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Male
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="gender" id="flexRadioDefault2" value="female">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    Female
                                                </label>
                                            </div>
                                        </div>

                                        

                                        <div class="col-md-6 form-group">
                                            <label for="dateofBirth" class="form-label">Year of Birth</label>
                                            <input class="form-control" type="text" placeholder="Enter Date of Birth" name="year_of_birth"required>
                                        </div>

                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Are you a person with disabilty?</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="village_agent_pwd_status" id="flexRadioDefault1" value="1">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Yes
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="village_agent_pwd_status" id="flexRadioDefault2" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-6 form-group">
                                        <label for="ninNumber" class="form-label">Are you a refugee?</label>
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="village_agent_refugee_status" id="flexRadioDefault1" value="1">
                                                <label class="form-check-label" for="flexRadioDefault1">
                                                    Yes
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="village_agent_refugee_status" id="flexRadioDefault2" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        </div>
    
                                    </div>
                                    
                                    <div class="col-12 mt-5 text-end">
                                        <button class="btn btn-primary button-prevent-multiple-submits" id="Submit-Form" type="submit">Submit form</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end col -->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
</div>
@endsection

@push('scripts')
<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 src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


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

    });

    /////////////////// 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, " ");
        });
    });
    


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


    


    $('#banks').select2({

        'placeholder': 'Select bank',

    });

    
    $('#education-level').select2({

        'placeholder': 'Select education level',

    });

    $('#districts').select2({

        'placeholder': 'Select a distict',

    });


    $('#subcounties').select2({

        'placeholder': 'Select a subcounty',

    });

    $('#parishes').select2({

        'placeholder': 'Select a parish',

    });

    $('#villages').select2({

        'placeholder': 'Select a village',

    });

    $('input[type=radio][name=village_agent_bank_account]').change(function() {
       
        if (this.value == "1") {
            $("#bank-details-fields").show();
        }
        else{
            $("#bank-details-fields").hide();
        }
    });


    $('input[type=radio][name=registered_mobile_money]').change(function() {
       
       if (this.value == "0") {
           $("#mobile-money-names").show();
       }
       else{
           $("#mobile-money-names").hide();
       }
   });


    ///////////////// JQUERY FORM VALIDATION AND SUBMIT /////////////////////

        
    $("#village-agent-form").validate({
        ignore: null,   
        rules: {
            bank_id: {
                required:{
                    depends: function(element) {
                        return $('input[type=radio][name=village_agent_bank_account]:checked').val() == "1";
                    }
                }
            },

            bank_account_number: {
                required:{
                    depends: function(element) {
                        return $('input[type=radio][name=village_agent_bank_account]:checked').val() == "1";
                    }
                }
            },

            village_agent_bank_account: {
                required:true,
            },

            village_agent_mobile_money: {
                required:true,
            },

            registered_mobile_money: {
                required:true,
            },
            
        },
        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-village-agent',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend:function(){
                $('#Submit-Form').text('Processing...');
                },
                success: function(response) {
                    console.log(response);
                    
                    Swal.fire({
                        title: 'Success',
                        text: 'Village Agent profiled successfully. ',
                        icon: 'success',
                        toast:'true',
                        showConfirmButton:false,
                        position:'top-end',
                        timer:2000

                    });
                
                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    $('#village-agent-form')[0].reset();
                    $('#Submit-Form').text('Submit');
                },
                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
                        
                        });
                    }
                    else if(response.status == 404){
                    }
                    else if(response.status == 500){
                        Swal.fire({
                            title: 'Error',
                            text: 'An Unexpected error occured, Please contact support',
                            icon: 'error',
                            toast:'true',
                            showConfirmButton:false,
                            position:'top-end',
                            timer:5000
                            
                        });
                        $('.button-prevent-multiple-submits').attr('disabled', false);
                        $('#Submit-Form').text('Submit');
                    }
                    else{
                        Swal.fire({
                        title: 'Error',
                        text: 'Unexpected error. Please contact support',
                        icon: 'error',
                        toast:'true',
                        showConfirmButton:false,
                        position:'top-end',
                        timer:10000
                        
                        });
                    }
                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    $('#Submit-Form').text('Submit');
                }
            });
        }
    });


    $('#districts').change(function() {
        var id = $(this).val();

        $.ajax({
            url: '/subcounties-by-district/' + id,
            type: 'get',
            dataType: 'json',
            success: function(response) {
                $("#subcounties-div").show();
                $("#subcounties").empty();
                console.log(response);
                var len = 0;
                if (response.items != null) {
                    len = response.items.length;
                }

                if (len > 0) {
                    first_option_line = '<option value ="">Select a subcounty</option>'
                    $("#subcounties").append(first_option_line);
                    for (var i = 0; i < len; i++) {
                        var id = response.items[i].id;
                        var name = response.items[i].text;

                        var option = "<option value='" + id + "'>" + name + "</option>";

                        $("#subcounties").append(option);
                    }
                }
            }
        })
    });

   

    $('#subcounties').change(function() {
        var id = $(this).val();

        $.ajax({
            url: '/parishes-by-subcounty/' + id,
            type: 'get',
            dataType: 'json',
            success: function(response) {
                $("#parishes-div").show();
                $("#parishes").empty();
                console.log(response);
                var len = 0;
                if (response.items != null) {
                    len = response.items.length;
                }

                if (len > 0) {
                    first_option_line = '<option value ="">Select a parish</option>'
                    $("#parishes").append(first_option_line);
                    for (var i = 0; i < len; i++) {
                        var id = response.items[i].id;
                        var name = response.items[i].text;

                        var option = "<option value='" + id + "'>" + name + "</option>";

                        $("#parishes").append(option);
                    }
                }
            }
        })
    });


    $('#parishes').change(function() {
        var id = $(this).val();

        $.ajax({
            url: '/villages-by-parish/' + id,
            type: 'get',
            dataType: 'json',
            success: function(response) {
                $("#villages-div").show();
                $("#villages").empty();
                console.log(response);
                var len = 0;
                if (response.items != null) {
                    len = response.items.length;
                }

                if (len > 0) {
                    first_option_line = '<option value ="">Select a village</option>'
                    $("#villages").append(first_option_line);
                    for (var i = 0; i < len; i++) {
                        var id = response.items[i].id;
                        var name = response.items[i].text;

                        var option = "<option value='" + id + "'>" + name + "</option>";

                        $("#villages").append(option);
                    }
                }
            }
        })
    });

});

</script>

@endpush