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

@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') }} ">

@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">Farmer Group Details 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">Group Details</span>
                            </h3>

                            <form method="POST" id="farmer-group-form">
                                <div class="row gy-4">
                                    <div class="col-xxl-3 col-md-6">
                                        <div class="form-group">
                                            <label for="basiInput" class="form-label">Farmer Group</label>
                                            <input type="text" class="form-control" id="farmer_group" name="farmer_group" required>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div class="form-group">
                                            <label for="establishment_year" class="form-label">Year of Establishment</label>
                                            <input type="text" class="form-control" id="establishment_year" name="establishment_year" required >
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6 d-none">
                                        <div>
                                            <label for="email_address" class="form-label">Email Address</label>
                                            <input type="email" class="form-control" id="email_address" name="email_address">
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="new_group" class="form-label">Is this a new or old group?</label>
                                            <div class="row form-group">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="new_group" id="new_group" 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_group" id="new_group" 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 form-group">
                                            <label for="registration_status">Registration Status</label>
                                            <select name="registration_status" id="registration-status" required>
                                                <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 form-group">
                                            <label for="registration_numbers">Registration Number</label>
                                            <input type="text" class="form-control" id="registration_number" name="registration_number">
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <!--end col-->




                                    <!--end col-->

                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="received_other_ngo_support" class="form-label">Any support received from other NGOs</label>
                                            <div class="row form-group">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="received_other_ngo_support" id="received_other_ngo_support" value="1">
                                                        <label class="form-check-label" for="received_other_ngo_suppor">
                                                            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="received_other_ngo_support" id="received_other_ngo_support" value="0">
                                                        <label class="form-check-label" for="received_other_ngo_suppor">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6" id="supporting_ngo_ids" style="display:none;">
                                        <div class="form-label">
                                            <label for="supporting-ngos">Supporting NGos</label>
                                            <select name="supporting_ngos_ids[]" id="supporting-ngos" multiple>
                                                <option></option>
                                                @foreach($supporting_ngos as $ngo)
                                                    <option value="{{$ngo->id}}">{{$ngo->non_government_organisation}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="participation_of_collective_marketing" class="form-label">Participation of Collective Marketing?</label>
                                            <div class="row form-group">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2 ">
                                                        <input class="form-check-input" type="radio" name="participation_of_collective_marketing" id="participation_of_collective_marketing" value="1">
                                                        <label class="form-check-label" for="participation_of_collective_marketing">
                                                            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="participation_of_collective_marketing" id="participation_of_collective_marketing" value="0">
                                                        <label class="form-check-label" for="participation_of_collective_marketing">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="is_member_of_dairy_cooperative" class="form-label">Is the group a memeber of any Dairy Coperative?</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="is_member_of_dairy_cooperative" id="is_member_of_dairy_cooperative" value="1">
                                                        <label class="form-check-label" for="is_member_of_dairy_cooperative">
                                                            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="is_member_of_dairy_cooperative" id="is_member_of_dairy_cooperative" value="0">
                                                        <label class="form-check-label" for="is_member_of_dairy_cooperative">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6" id="cooperative-fields" style="display:none;">
                                        <div class="form-group">
                                            <label for="cooperative_id" class="form-label">Cooperative</label>
                                            <select name="cooperative_id" id="cooperatives">
                                                <option></option>
                                                @foreach($cooperatives as $cooperative)
                                                    <option value="{{$cooperative->id}}">{{$cooperative->cooperative}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="have_a_storage_facility" class="form-label">Has the group ever received support from Mastercard Foundation?</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="received_mastercard_support"  value="1">
                                                        <label class="form-check-label" for="have_a_storage_facility">
                                                            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="received_mastercard_support" value="0">
                                                        <label class="form-check-label" for="have_a_storage_facility">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6" id="mastercard-support" style="display:none;">
                                        <div class="form-group">
                                            <label for="mastercard-support" class="form-label">Mastercard interventions</label>
                                            <select name="mastercard_programs" id="mastercard-interventions">
                                                <option></option>
                                                @foreach($programs as $program)
                                                    <option value="{{$program->id}}">{{$program->mastercard_program}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="have_a_market_map" class="form-label">Does the group have a Market Map</label>
                                            <div class="row form-group">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2 ">
                                                        <input class="form-check-input" type="radio" name="have_a_market_map" id="have_a_market_map" value="1">
                                                        <label class="form-check-label" for="have_a_market_map">
                                                            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="have_a_market_map" id="have_a_market_map" value="0">
                                                        <label class="form-check-label" for="have_a_market_map">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xxl-3 col-md-6" id="market-map" style="display:none;">
                                        <div class="form-label">
                                            <label for="last_updated_market_map">Last Updated Market Map</label>
                                            <input type="date" class="form-control" id="last_updated_market_map" placeholder="date of last the market map update" name="last_updated_market_map">
                                        </div>
                                    </div>

                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="have_a_storage_facility" class="form-label">Have a Storage Facility</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="have_a_storage_facility" id="have_a_storage_facility" value="1">
                                                        <label class="form-check-label" for="have_a_storage_facility">
                                                            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="have_a_storage_facility" id="have_a_storage_facility" value="0">
                                                        <label class="form-check-label" for="have_a_storage_facility">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="have_modern_dairy_equipment" class="form-label">Have Modern Dairy Equipment</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="have_modern_dairy_equipment" id="have_modern_dairy_equipment" value="1">
                                                        <label class="form-check-label" for="have_modern_dairy_equipment">
                                                            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="have_modern_dairy_equipment" id="have_modern_dairy_equipment" value="0">
                                                        <label class="form-check-label" for="have_modern_dairy_equipment">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6" id="dairy-equipment-ownership" style="display:none;">
                                        <div class="form-group">
                                            <label for="cooperative_id" class="form-label">Type of ownership of modern dairy equipment</label>
                                            <select name="type_of_dairy_equipment_ownership" id="type-of-equipment-ownership">
                                                <option></option>
                                                <option value="Owned">Owned</option>
                                                <option value="Rented">Rented</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <label for="is_group_involved_in_selling_related_dairy_pproducts" class="form-label">Does the group have a constitution or law?</label>
                                        <div class="row form-group">
                                            <div class="col-12 col-lg-6">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="have_constitution_or_law"value="1">
                                                    <label class="form-check-label" >
                                                        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="have_constitution_or_law" value="0" >
                                                    <label class="form-check-label" >
                                                        No
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <label for="is_group_involved_in_selling_related_dairy_pproducts" class="form-label">Is Group Involved in Selling Related Dairy Products</label>
                                        <div class="row form-group">
                                            <div class="col-12 col-lg-6">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="radio" name="is_group_involved_in_selling_related_dairy_products" value="1" >
                                                    <label class="form-check-label" for="is_group_involved_in_selling_related_dairy_pproducts">
                                                        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="is_group_involved_in_selling_related_dairy_products" value="0">
                                                    <label class="form-check-label" for="is_group_involved_in_selling_related_dairy_pproducts">
                                                        No
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->
                                    <div class="col-xxl-3 col-md-6">
                                        <div>
                                            <label for="does_group_keep_records" class="form-label">Does Group Keep Records</label>
                                            <div class="row form-group">
                                                <div class="col-12 col-lg-6">
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="does_group_keep_records" value="1">
                                                        <label class="form-check-label" >
                                                            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="does_group_keep_records" value="0" >
                                                        <label class="form-check-label" >
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    <div class="col-xxl-3 col-md-6" id="records-description-fields" style="display:none;">
                                        <div class="form-label">
                                            <label for="records_description">Records Description</label>
                                            <input type="text" class="form-control" id="records_description" name="record_description">
                                        </div>
                                    </div>
                                    <!--end col-->


                                    <!--end col-->

                                    <div class="col-xxl-3 col-md-6">
                                        <div class="form-label">
                                            <label for="have_a_business_plan">Have a Business Plan</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="have_a_business_plan" value="1">
                                                        <label class="form-check-label" >
                                                            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="have_a_business_plan" value="0">
                                                        <label class="form-check-label" >
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    <div class="col-xxl-3 col-md-6" id="business-plan-divs" style="display:none;">
                                        <div class="form-label">
                                            <label for="last_updated_business_plan">Last Updated Business Plan</label>
                                            <input type="date" class="form-control" name="last_updated_business_plan" id="last_updated_business_plan" placeholder="Date">
                                        </div>
                                    </div>
                                    <!--end col-->



                                    <div class="col-xxl-3 col-md-6">
                                        <div class="form-label">
                                            <label for="enterprise_id">Main Enterprise</label>
                                            <select name="enterprise_id" id="enterprises">
                                                <option></option>
                                                @foreach($enterprises as $enterprise)
                                                    <option value="{{$enterprise->id}}">{{$enterprise->enterprise}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    {{--<div class="col-xxl-3 col-md-6">
                                        <div class="form-label">
                                            <label for="enterprise_id">Other Enterprises</label>
                                            <select name="enterprises[]" id="other-enterprises" multiple>
                                                <option></option>
                                                @foreach($enterprises as $enterprise)
                                                    <option value="{{$enterprise->id}}">{{$enterprise->enterprise}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>--}}



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


                                    <div class="row gy-4">

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="group_bank_account" class="form-label">Group 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="group_bank_account" id="group_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="group_bank_account" id="group_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 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 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">
                                            <div class="form-label">
                                                <label for="involved_in_vsla_services">Has the group received a loan in the last year?</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="loan_received_in_last_year" value="1" >
                                                            <label class="form-check-label" for="loan_received_in_last_year">
                                                                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="loan_received_in_last_year" value="0">
                                                            <label class="form-check-label" for="loan_received_in_last_year">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 loan-fields" style="display:none;">
                                            <div>
                                                <label for="financial_institution_id" class="form-label">Financial Institution</label>
                                                <select class="form-control" id="loan-institutions" name="loan_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>

                                        <div class="col-xxl-3 col-md-6">
                                            <div class="form-label">
                                                <label for="involved_in_vsla_services">Is the group involved  in VSLA Services</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="involved_in_vsla_services" value="1" >
                                                            <label class="form-check-label" for="involved_in_vsla_services">
                                                                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="involved_in_vsla_services" value="0">
                                                            <label class="form-check-label" for="involved_in_vsla_services">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->

                                        {{--<div class="col-xxl-3 col-md-6" id="vsla-service-description" style="display:none;">
                                            <div class="form-label">
                                                <label for="vsla_services_description">VSLA Services Description</label>
                                                <textarea  class="form-control" name="vsla_services_description" placeholder="Enterthe vsla services"></textarea>
                                            </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" >
                                                <option></option>
                                            </select>
                                        </div>
                                    </div>



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


                                    <div class="row gy-4">
                                        <div class=" col-xxl-3 col-md-6 form-group">
                                            <label for="address" class="form-label">Group Representative First Name</label>
                                            <input type="text" class="form-control" id="=" name="group_representative_first_name" placeholder="Enter First Name" required>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="address" class="form-label">Group Representative Last Name</label>
                                            <input type="text" class="form-control" id="=" name="group_representative_last_name" placeholder="Enter Last Name" required>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="idType" class="form-label">Position of group representative</label>
                                            <select class="form-control" id="group-position" name="group_position_id" required>
                                                <option></option>
                                                @foreach($positions as $position)
                                                <option value ="{{$position->id}}">{{$position->position}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xxl-3 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="group_representative_contact" placeholder="Enter the phone number" minlength="11" maxlength="11" >
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 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="group_representative_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="group_representative_mobile_money" id="flexRadioDefault2" value="0">
                                                <label class="form-check-label" for="flexRadioDefault2">
                                                    No
                                                </label>
                                            </div>
                                        <!--end col-->
                                        </div>
                                    </div>


                                </div>
                                <!--end row-->

                                <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>
$(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  ////////////////////////////

    flatpickr("#date_of_birth", {});

    /////////////////// 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',

    });


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

        'placeholder': 'Select group registration status',

    });


    $('#cooperatives').select2({

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

    });

    $('#enterprises').select2({

        'placeholder': 'Select an enterprise',

    });

    $('#mastercard-interventions').select2({

        'placeholder': 'Select a mastercard intervention',

    });

    $('#other-enterprises').select2({

        'placeholder': 'Select other enterprises',

    });

    $('#supporting-ngos').select2({

        'placeholder': 'Select supporting NGOs',

    });

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

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

    });

    $('input[type=radio][name=group_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();
       }

    });

    $('input[type=radio][name=received_mastercard_support]').change(function() {

       if (this.value == "1") {
           $("#mastercard-support").show();
       }
       else{
           $("#mastercard-support").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();
       }

    });*/


    $('input[type=radio][name=received_other_ngo_support]').change(function() {

       if (this.value == "1") {
           $("#supporting_ngo_ids").show();
       }
       else{
           $("#supporting_ngo_ids").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";
                    }
                }
            },
            received_other_ngo_support: {
                required:true,
            },
            supporting_ngos_ids: {
                required: true
            },

            participation_of_collective_marketing: {
                required:true,
            },

            is_member_of_dairy_cooperative: {
                required:true,
            },

            have_a_storage_facility: {
                required:true,
            },

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

            registration_number: {
                required:{
                    depends: function(element) {
                        return $('#registration-status').val() == "Registered";
                    }
                }
            },

            have_constitution_or_law: {
                required:true
            },


            have_a_market_map: {
                required:true,
            },

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

            have_modern_dairy_equipment:{
                required:true,
            },

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

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

            does_group_keep_records: {
                required:true,
            },

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

            new_group: {
                required:true,
            },

            group_representative_mobile_money: {
                required:true,
            },

            have_constitution_or_law: {
                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