@extends('layouts.admin', ['title' => 'Add Milk Collection Centre'])

@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">
<link rel="stylesheet" href="{{ asset('/assets/libs/nouislider/nouislider.min.css') }} ">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.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">Milk Collection Centre Form</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <div class="live-preview">
                            <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                <span class="badge badge-soft-primary">Milk Collection Centre Details</span>
                            </h3>

                            <form method="POST" id="farmer-group-form">
                                <div class="row gy-4">
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="basiInput" class="form-label">Name of Milk Collection Centre</label>
                                            <input type="text" class="form-control" id="milk-collection-centre" name="milk_collection_centre">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    
                                    <!--end col-->
                                 
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="new_group" class="form-label">Is this a new or old milk collection centre?</label>
                                            <div class="row">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="new_milk_collection_centre" value="1">
                                                        <label class="form-check-label" for="new_group">
                                                            New
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="new_milk_collection_centre" value="0">
                                                        <label class="form-check-label" for="new_group">
                                                            old
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div class="form-label">
                                            <label for="enterprise_id">Registration Status</label>
                                            <select name="registration_status" id="registration-status">
                                                <option></option>             
                                                <option value="Registered">Registered</option>
                                                <option value="In progress">In progress</option>
                                                <option value="Not registered">Not registered</option>
                                                                                      
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    <div class="col-xxl-3 col-md-6" id="registration-number" style="display:none;">
                                        <div class="form-label">
                                            <label for="registration_numbers">Registration Number</label>
                                            <input type="text" class="form-control" name="registration_number" >
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="basiInput" class="form-label">Contact Person First Name</label>
                                            <input type="text" class="form-control" id="first-name" name="contact_person_first_name">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="basiInput" class="form-label">Contact Person Last Name</label>
                                            <input type="text" class="form-control" id="last-name" name="contact_person_last_name">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="group_bank_account" class="form-label"> Bank Account</label>
                                            <div class="row">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="milk_collection_centre_bank_account"  value="1">
                                                        <label class="form-check-label" for="group_bank_account">
                                                            Yes
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="milk_collection_centre_bank_account" value="0">
                                                        <label class="form-check-label" for="group_bank_account">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6 bank-details-fields"  style="display: none;">
                                        <div>
                                            <label for="financial_institution_id" class="form-label">Financial Institution</label>
                                            <select class="form-control" id="institutions" name="financial_institution_id" >
                                                <option></option>
                                                <optgroup label="Banks">
                                                    @foreach($banks as $bank)
                                                        <option value="{{$bank->id}}">{{$bank->financial_institution}}</option>
                                                    @endforeach
                                                </optgroup>
                                                <optgroup label="Saccos">
                                                    @foreach($saccos as $sacco)
                                                        <option value="{{$sacco->id}}">{{$sacco->financial_institution}}</option>
                                                    @endforeach
                                                </optgroup>
                                                    
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6 bank-details-fields"  style="display: none;">
                                        <div>
                                            <label for="account_number" class="form-label">Account Number</label>
                                            <input type="text" class="form-control" id="account_number" name="account_number">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6 form-group bank-details-fields"  style="display: none;">
                                            <label for="surname" class="form-label">Name of Account</label>
                                            <input type="text" class="form-control" id="account-name" placeholder="Enter name of the accoutn " name="account_name">
                                        </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="value_addition_activity_id" class="form-label">Value Addition Activities</label>
                                            <select name="value_addition_activity_id" id="value-addition-activities">
                                                <option></option>
                                                @foreach($value_addition_activities as $activity)
                                                    <option value="{{$activity->id}}">{{$activity->value_addition_activity}}</option>
                                                @endforeach                                        
                                            </select>
                                        </div>
                                    </div>

                                    
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="equipment_id" class="form-label">What Equipment do you own?</label>
                                            <select name="equipment_id" id="equipment-id">
                                                <option></option>
                                                @foreach($equipment as $item)
                                                    <option value="{{$item->id}}">{{$item->equipment}}</option>
                                                @endforeach                                        
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="time-of-milk-delivery" class="form-label">Time of milk delivery</label>
                                            <input type="text" class="form-control" id="time-of-milk-delivery" name="time_of_milk_delivery">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="time-of-milk-collection" class="form-label">Time of milk collection</label>
                                            <input type="text" class="form-control" id="time-of-milk-collection" name="time_of_milk_collection">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="frequency_of_member_payment" class="form-label">How often are members paid?</label>
                                            <select name="frequency_of_member_payment" id="frequency-of-member-payment">
                                                <option></option>                       
                                                <option value="Daily">Daily</option>
                                                <option value="Weekly">Wekly</option>
                                                <option value="Monthly">Monthly</option>
                                                <option value="Quarterly">Quarterly</option> 
                                                <option value="Yearly">Yearly</option>                                      
                                            </select>
                                        </div>
                                    </div>


                                </div>

                        
                                    <!--end col-->

                                    <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                        <span class="badge badge-soft-primary">Location Information</span>
                                    </h3>


                                    <div class="row gy-4">
                                        <div class="col-xxl-3 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-xxl-3 col-md-6form-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-xxl-3 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-xxl-3 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>

                                <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>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->

        </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 src="{{ asset('/assets/libs/nouislider/nouislider.min.js') }}"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></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, " ");
        });
    });
    
    ///////////////// DATE TIME PICKER INITIALISATION  ////////////////////////////

    $('#time-of-milk-delivery').timepicker({});

    $('#time-of-milk-collection').timepicker({});

    /////////////////// SELECT 2 INITIALISATION /////////////////////////////////////////////////
    $('#group-position').select2({

        'placeholder': 'Select position of group representative',

    });

    $('#districts').select2({

        'placeholder': 'Select district',

    });

    $('#subcounties').select2({

        'placeholder': 'Select a subcounty',

    });

    $('#parishes').select2({

        'placeholder': 'Select a parish',

    });

    $('#villages').select2({

        'placeholder': 'Select a village',

    });

    $('#institutions').select2({

        'placeholder': 'Select a financial institution',

    });

    $('#loan-institutions').select2({

        'placeholder': 'Select a financial institution',

    });

    $('#registration-status').select2({

        'placeholder': 'Select group registration status',

    });

    $('#equipment-id').select2({

        'placeholder': 'Select equipment owned',

    });

    $('#value-addition-activities').select2({

        'placeholder': 'Select value addition activities',

    });

    $('#frequency-of-member-payment').select2({

        'placeholder': 'Select frequency of payment of members',

    });

    $('#cooperatives').select2({

        'placeholder': 'Select a co-operative',

    });

    $('#enterprises').select2({

        'placeholder': 'Select an eneterprise',

    });

    $('#type-of-equipment-ownership').select2({

        'placeholder': 'Select a type of ownership',

    });

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

      
    });

    $('input[type=radio][name=is_member_of_dairy_cooperative]').change(function() {
       
       if (this.value == "1") {

           $("#cooperative-fields").show();
       }
       else{
           $("#cooperative-fields").hide();
       }
     
    });

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

    $('#registration-status').change(function() {
       
       if (this.value == "Registered") {
           $("#registration-number").show();
       }
       else{
           $("#registration-number").hide();
       }
     
    });

    

    $('input[type=radio][name=have_a_market_map]').change(function() {
       
       if (this.value == "1") {
           $("#market-map").show();
       }
       else{
           $("#market-map").hide();
       }
     
    });

    $('input[type=radio][name=have_modern_dairy_equipment]').change(function() {
       
       if (this.value == "1") {
           $("#dairy-equipment-ownership").show();
       }
       else{
           $("#dairy-equipment-ownership").hide();
       }
     
    });

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

    });

    $('input[type=radio][name=have_a_business_plan]').change(function() {
       
       if (this.value == "1") {
           $("#business-plan-divs").show();
       }
       else{
           $("#business-plan-divs").hide();
       }

    });

    
    $('input[type=radio][name=involved_in_vsla_services]').change(function() {
       
       if (this.value == "1") {
           $("#vsla-service-description").show();
       }
       else{
           $("#vsla-service-description").hide();
       }

    });

    

    


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

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

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

            group_bank_account: {
                required:true,
            },

            group_representative_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-farmer-group',
                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: 'Farmer group profiled successfully. ',
                        icon: 'success',
                        toast:'true',
                        showConfirmButton:false,
                        position:'top-end',
                        timer:2000

                    });
                
                    $('.button-prevent-multiple-submits').attr('disabled', false);
                    $('#farmer-group-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