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

@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">Participant Details Form</h4>
                            </div><!-- end card header -->
                            <div class="card-body">
                                <div class="live-preview"></div>
                                <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                    <span class="badge badge-soft-primary">Participant Details</span>
                                </h3>

                                <form method="POST" id="participant-form">
                                    <div class="row gy-4">

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

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

                                        <div class="col-xxl-3 col-md-6 form-group d-none">
                                            <label for="surname" class="form-label">Other Names</label>
                                            <input type="text" class="form-control" id="other-name"
                                                   placeholder="Enter other name " name="other_name">
                                        </div>


                                        @if($farmer_group_id == null)
                                            <div class="col-xxl-3 col-md-6 form-group">
                                                <label for="idType" class="form-label">Farmer Group</label>
                                                <select class="form-control" id="farmer-group" name="farmer_group_id"
                                                        required>
                                                    <option></option>
                                                    @foreach($farmer_groups as $group)
                                                        <option value="{{$group->id}}">{{$group->farmer_group}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @else
                                            <div class="col-xxl-3 col-md-6 form-group">
                                                <label for="surname" class="form-label">Farmer Group</label>
                                                <input type="text" class="form-control" style="background:grey;"
                                                       value="{{$selected_farmer_group->farmer_group}}" readonly>
                                                <input type="hidden" value="{{$farmer_group_id}}" class="form-control"
                                                       name="farmer_group_id" required>
                                            </div>
                                        @endif

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="new_group" class="form-label">Is this a new or old
                                                    member?</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_participant" value="1">
                                                            <label class="form-check-label" for="new_member">
                                                                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_participant" value="0">
                                                            <label class="form-check-label" for="new_group">
                                                                old
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-xxl-3 form-group">
                                            <label for="idType" class="form-label">Type of participant</label>
                                            <select class="form-control" id="participant-type"
                                                    name="participant_type_id" required>
                                                <option></option>
                                                @foreach($types as $type)
                                                    <option value="{{$type->id}}">{{$type->participant_type}}</option>
                                                @endforeach
                                            </select>
                                        </div>

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

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


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

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


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

                                        <div class="col-xxl-3 col-md-6 village-agent-fields" style="display:none;">
                                            <div class="form-label">
                                                <label for="own_a_smart_phone">Do you own a smart phone?</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="own_a_smart_phone" 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="own_a_smart_phone" 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 village-agent-fields" style="display:none;">
                                            <div class="form-label">
                                                <label for="enterprise_id">Select your current employment status</label>
                                                <select name="employment_status" id="employment-status">
                                                    <option></option>
                                                    <option value="Employed">Employed</option>
                                                    <option value="Not_Employed">Not Employed</option>
                                                    <option value="Self_Employed">Self Employed</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 village-agent-fields" style="display:none;">
                                            <div class="form-label">
                                                <label for="enterprise_id">Community Leadership Role</label>
                                                <select name="community_role_id" id="community-roles">
                                                    <option></option>
                                                    @foreach($community_roles as $role)
                                                        <option value="{{$role->id}}">{{$role->community_role}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="group_bank_account" class="form-label">Do you have 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="participant_bank_account"
                                                                   id="participant-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="participant_bank_account"
                                                                   id="participant-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>

                                        <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 form-group bank-details-fields"
                                             style="display: none;">
                                            <label for="surname" class="form-label">Account Number</label>
                                            <input type="text" class="form-control" id="account-number"
                                                   placeholder="Enter account number " name="account_number">
                                        </div>

                                        <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>

                                        <div class="col-xxl-3 col-md-6">
                                            <label for="is_participant_involved_in_selling_related_dairy_products"
                                                   class="form-label">Are you producing any related products for
                                                sale?</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_participant_involved_in_selling_related_dairy_products"
                                                               value="1">
                                                        <label class="form-check-label"
                                                               for="is_participant_involved_in_selling_related_dairy_products">
                                                            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_participant_involved_in_selling_related_dairy_products"
                                                               value="0">
                                                        <label class="form-check-label"
                                                               for="is_participant_involved_in_selling_related_dairy_products">
                                                            No
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <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">
                                                    <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>

                                        <div class="col-xxl-3 col-md-6">
                                            <div class="form-label">
                                                <label for="involved_in_vsla_services">Have you 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="received_loan_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="received_loan_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 form-group">
                                            <label for="idType" class="form-label">Which dairy skills do you wish to
                                                acquire></label>
                                            <select class="form-control" id="dairy-skills" name="dairy_skill_id"
                                                    required>
                                                <option></option>
                                                @foreach($dairy_skills as $skill)
                                                    <option value="{{$skill->id}}">{{$skill->dairy_skill}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="idType" class="form-label">Estimated minimum income generated
                                                per month</label>
                                            <input type="text" class="form-control number" id="minimum-income"
                                                   placeholder="Enter estimated minimum income generated er month "
                                                   name="min_income_range" required>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="idType" class="form-label">Estimated maximum income generated
                                                per month</label>
                                            <input type="text" class="form-control number" id="maximum-income"
                                                   placeholder="Enter estimated maximum income generated er month "
                                                   name="max_income_range" required>
                                        </div>

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

                                    <div class="row gy-4">
                                        <div class="col-12">
                                            <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                                <span class="badge badge-soft-primary">Additional Information</span>
                                            </h3>
                                        </div>
                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Year of birth</label>
                                            <input type="text" class="form-control" id="year-of-birth"
                                                   placeholder="Enter year of birth " name="year_of_birth">
                                        </div>
                                        <div class="col-xxl-3 form-group">
                                            <label for="idType" class="form-label">Gender</label>
                                            <select class="form-control" id="gender" name="gender" required>
                                                <option></option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="new_group" class="form-label">Is this person a person with
                                                    disability?</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="pwd_status" value="1">
                                                            <label class="form-check-label" for="new_group">
                                                                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="pwd_status" value="0">
                                                            <label class="form-check-label" for="new_group">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="new_group" class="form-label">Is this person a
                                                    refugee?</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="refugee_status" value="1">
                                                            <label class="form-check-label" for="new_group">
                                                                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="refugee_status" value="0">
                                                            <label class="form-check-label" for="new_group">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Number of PWDs in household</label>
                                            <input type="text" class="form-control number" id="house-hold-size"
                                                   placeholder="Enter house hold head "
                                                   name="number_of_pwd_in_house_hold">
                                        </div>

                                        <div class="col-xxl-3 form-group">
                                            <label for="idType" class="form-label">Position in group</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 form-group">
                                            <label class="form-label">How did you know about the project?</label>
                                            <select class="form-control" id="referral_source" name="referral_source"
                                                    required>
                                                <option value=""></option>
                                                @foreach(Config::get('constants.referral_sources') as $item)
                                                    <option value="{{$item}}">{{$item}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-12 col-md-3" id="own_a_phone_div">
                                            <label>Own a phone</label>
                                            <div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="own_a_phone"
                                                           value="0">
                                                    <label class="form-check-label">No</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="own_a_phone"
                                                           value="1">
                                                    <label class="form-check-label">Yes</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div> {{--additional info--}}

                                    <div class="row gy-4">
                                        <div class="col-12">
                                            <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                                <span class="badge badge-soft-primary">Household Information</span>
                                            </h3>
                                        </div>

                                        <div class="col-xxl-3 col-md-6">
                                            <div>
                                                <label for="new_group" class="form-label">Is this the household head?</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_house_hold_head" value="1">
                                                            <label class="form-check-label" for="new_member">
                                                                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_house_hold_head" value="0">
                                                            <label class="form-check-label" for="new_group">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group household-fields"
                                             style="display:none;">
                                            <label for="surname" class="form-label">House Hold Head First Name</label>
                                            <input type="text" class="form-control" id="hous-hold-head"
                                                   placeholder="Enter house hold head "
                                                   name="household_head_first_name">
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group household-fields"
                                             style="display:none;">
                                            <label for="surname" class="form-label">House Hold Head Last Name</label>
                                            <input type="text" class="form-control" id="hous-hold-head"
                                                   placeholder="Enter house hold head " name="household_head_last_name">
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">House Hold Size</label>
                                            <input type="text" class="form-control number" id="house-hold-size"
                                                   placeholder="Enter house hold head " name="household_size">
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Number of children</label>
                                            <input type="number" class="form-control number" id="children_size"
                                                   placeholder="Enter number of children" name="no_of_children">
                                        </div>

                                    </div>

                                    <div class="row gy-4">
                                        <div class="col-12">
                                            <h3 class="mt-3 mb-3 flex-grow-1 text-center">
                                                <span class="badge badge-soft-primary">Next of Kin Information</span>
                                            </h3>
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Next of Kin First Name</label>
                                            <input type="text" class="form-control" placeholder="Next of kin first name"
                                                   name="next_of_kin_first_name">
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Next of Kin Last Name</label>
                                            <input type="text" class="form-control" placeholder="Next of kin last name"
                                                   name="next_of_kin_last_name">
                                        </div>

                                        <div class="col-xxl-3 col-md-6 form-group">
                                            <label for="surname" class="form-label">Next of kin contact</label>
                                            <div class="input-group">
                                                <span class="input-group-text" id="inputGroupPrepend">256</span>
                                                <input type="text" class="form-control numbers" placeholder="Next of kin contact e.g 256779001122"
                                                       name="next_of_kin_contact" minlength="11" maxlength="11">
                                            </div>
                                        </div>

                                    </div>

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

            /////////////////// INPUT KEY//////////////////////////////////////////////////
            $('input.number').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',

            });

            $('#farmer-group').select2({

                'placeholder': 'Select farmer group',

            });

            $('#gender').select2({

                'placeholder': 'Select gender',

            });


            $('#participant-type').select2({

                'placeholder': 'Select type of participant',

            });


            $('#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',

            });

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

                'placeholder': 'Select your current employment status',

            });

            $('#community-roles').select2({

                'placeholder': 'Select leadership community role',

            });


            $('#cooperatives').select2({

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

            });

            $('#enterprises').select2({

                'placeholder': 'Select an eneterprise',

            });

            $('#dairy-skills').select2({

                'placeholder': 'Select a dairy skill',

            });

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

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

            });
            $('#referral_source').select2({placeholder: 'Select referral source'});

            $('input[type=radio][name=participant_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=is_house_hold_head]').change(function () {

                if (this.value == "0") {
                    $(".household-fields").show();
                } else {
                    $(".household-fields").hide();
                }

            });


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

                if (this.value == "1") {
                    $(".loan-fields").show();
                } else {
                    $(".loan-fields").hide();
                }

            });

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

                if (this.value == "0") {
                    $("#mobile-money-names").show();
                } else {
                    $("#mobile-money-names").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();
                }

            });

            $('#participant-type').change(function () {
                var id = $(this).val();

                if (this.value == "2") {
                    $(".village-agent-fields").show();
                } else {
                    $(".village-agent-fields").hide();
                }

            });


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


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

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

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

                    $.ajax({
                        url: '/add-participant',
                        type: 'post',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            $('#Submit-Form').text('Processing...');
                        },
                        success: function (response) {
                            console.log("Participant save response ::", response);

                            Swal.fire({
                                title: 'Success',
                                text: response.message,
                                icon: 'success',
                                toast: 'true',
                                showConfirmButton: false,
                                position: 'top-end',
                                timer: 2000

                            });

                            $('.button-prevent-multiple-submits').attr('disabled', false);
                            $('#farmer-group-form').reset();
                            $('#Submit-Form').text('Submit');
                        },
                        error: function (response) {

                            console.log("Participant save error ::", 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