@extends('layouts.front')
@section('content')
    <div class="main-content">
        <section class="inner-header divider parallax layer-overlay overlay-dark-5"
            data-bg-img="{{ asset('images/banner05-scaled.jpg') }}">
            <div class="container pt-70 pb-20">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h2 class="title text-white">Border Crossing Point Monitoring Form </h2>
                            <ol class="breadcrumb text-center text-black mt-10">
                                <li><a href="#">Home</a></li>
                                <li class="active text-gray-silver">Monitoring Form</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="container pt-70 pb-70">
            <div class="row">
                <div class="col-md-12">
                    <div class="form_box">
                        <div class="form_box-header">
                            <h2 class="mt-0 line-height-1 text-uppercase">Border Crossing Point <span
                                    class="text-theme-colored"> Monitoring Form</span></h2>
                        </div>
                        <style>
                            #submitModal.modal {
                                display: block !important
                            }
                        </style>
                        <div class="form_box-body">
                            <form action="{{ route('submit-form') }}" id="refugee_reg_form" method="post">
                                @csrf
                                <div id="submitModal" class="multi-step">
                                </div>
                            </form>
                            <div class="row" style="display:none">
                                <div class="col-md-6" id="demographics">
                                    <h2 class="form_entry_title">Demographics</h2>
                                    <div class="form-group">
                                        <label for="">Sex of respondent <span style="color: red">*</span></label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input id="" type="radio" class="form-check-input" name="sex"
                                                    value="male" required>Male
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input id="" type="radio" class="form-check-input" name="sex"
                                                    value="female" required>Female
                                            </label>
                                        </div>
                                        <span class="validation-message" style="color: red;"></span>
                                    </div>

                                    <div class="form-group">
                                        <label for="">Number of Accompanying Family Members <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" name="family_members" min="1"
                                            required>
                                    </div>

                                    <div class="form-group">
                                        <label for="">Number of Accompanying Female Family Members <span style="color: red">*</span> </label>
                                        <input type="number" class=" form-control " name="female_family_members"
                                            min="1" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Number of Accompanying Children <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" name="number_of_childrens" min="1"
                                            required>
                                        <span class=" form-helper">Under the age of 18 <span style="color: red">*</span></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Number of Accompanying Female Children <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" name="number_of_female_childrens"
                                            min="1" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Number of household members left in CoA? <span style="color: red">*</span></label>
                                        <input type="number" class="form-control" name="number_of_members_in_co_a"
                                            min="1" required>
                                    </div>
                                </div>
                                <div class="col-md-6" id="destination">
                                    <h2 class="form_entry_title">Destination</h2>
                                    <div class="form-group">
                                        <label for="">State you're returning to? <span style="color: red">*</span></label>
                                        <select
                                            class="form-control select2 {{ $errors->has('return_state') ? 'is-invalid' : '' }}"
                                            name="return_state" id="return_state" required>
                                            <option value="">Select State</option>
                                            @foreach (getRegionData() as $region)
                                                <option value="{{ $region['name'] }}">{{ $region['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="">County you’re returning to?  <span style="color: red">*</span></label>
                                        <select
                                            class="form-control select2 {{ $errors->has('return_country') ? 'is-invalid' : '' }}"
                                            name="return_country" id="return_country" required>
                                            <option value="">Select County</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Payam you're returning to? </label>
                                        <select
                                            class="form-control select2 {{ $errors->has('return_payam') ? 'is-invalid' : '' }}"
                                            name="return_payam" id="return_payam">
                                            <option value="">Select Payam</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Have you lived there before? </label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="before_lived"
                                                    value="yes">Yes
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="before_lived"
                                                    value="no">No
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Is this place your area of origin? </label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="area_of_origin"
                                                    value="yes">Yes
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="area_of_origin"
                                                    value="no">No
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">What is your state of origin? <span style="color: red">*</span></label>
                                        <select
                                            class="form-control select2 {{ $errors->has('state_of_origin') ? 'is-invalid' : '' }}"
                                            name="state_of_origin" id="state_of_origin" required>
                                            <option value="">Select State</option>
                                            @foreach (getRegionData() as $region)
                                                <option value="{{ $region['name'] }}">{{ $region['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="">What is your country of origin? <span style="color: red">*</span></label>
                                        <select
                                            class="form-control select2 {{ $errors->has('country_of_origin') ? 'is-invalid' : '' }}"
                                            name="country_of_origin" id="country_of_origin" required>
                                            <option value="">Select country of origin</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="">What is your payam of origin? </label>
                                        <select
                                            class="form-control select2 {{ $errors->has('payam_of_origin') ? 'is-invalid' : '' }}"
                                            name="payam_of_origin" id="payam_of_origin">
                                            <option value="">Select payam of origin</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6" id="country_asylum">
                                    <h2 class="form_entry_title">Country Asylum <span style="color: red">*</span></h2>
                                    <div class="form-group">
                                        <label for="">Which country of asylum are you returning from? </label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="car" required>CAR
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="drc" required>DRC
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="ethiopia" required>Ethiopia
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="kenya" required>Kenya
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="sudan" required>Sudan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="country_of_asylum"
                                                    value="uganda" required>Uganda
                                            </label>
                                        </div>
                                        <span class="validation-message" style="color: red;"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Which camp/settlement in CoA? </label>
                                        <input type="text" class=" form-control" name="camp_in_co_a">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Is your household registered as refugee's in CoA </label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input"
                                                    name="registered_as_refugee" value="yes" required>Yes
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input"
                                                    name="registered_as_refugee" value="no" required>No
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6" id="main_reasons">
                                    <h2 class="form_entry_title">Reasons for Return</h2>
                                    <div class="form-group">
                                        <label for="">Main reasons for returning back home? </label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Lack Of Employment">Lack Of
                                                Employment and Livelihoods Opportunities in CoA
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Lack Of Access To">Lack Of Access
                                                To Basic Services in CoA (Education, Health, Housing Etc.)
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Insecurity In CoA ">Insecurity In
                                                CoA
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]"
                                                    value="Reunite With Family Members">Reunite With Family Members
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Improvement Of ">Improvement Of
                                                security Situation In SSD
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]"
                                                    value="Improved Availability Of Services In SSD">Improved Availability
                                                Of Services In SSD
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Check And Attend">Check And Attend
                                                To Property
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Check And Attend">Forced (By
                                                Someone Or Authorities)
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"
                                                    name="reasons_for_return[]" value="Other">Other
                                            </label>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group">
                                            <label for="">Please specify other: </label>
                                            <input type="text" class=" form-control" name="other_reason">
                                        </div> --}}
                                    <div class="form-group">
                                        <label for="">What means of transport did you use to get here? <span style="color: red">*</span></label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Foot" required>Foot
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Car-Private" required>Car-Private
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Car-Collective" required>Car-Collective
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Bus" required>Bus
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Boat" required>Boat
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Airplane" required>Airplane
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="transport"
                                                    value="Other" required>Other
                                            </label>
                                        </div>
                                        <span class="validation-message" style="color: red;"></span>
                                    </div>
                                    {{-- <div class="form-group">
                                            <label for="">Please specify other: </label>
                                            <input type="text" class=" form-control" name="other_tranfort">
                                        </div> --}}
                                    <div class="form-group">
                                        <label for="">Did you pay for the trip to arrive to South Sudan with your
                                            own means or with some support? <span style="color: red">*</span></label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="pay_for_trip"
                                                    value="Paid with My Own Money" required>Paid with My Own Money
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="pay_for_trip"
                                                    value="Was Assisted by The Authorities Of Country Of Asylum"
                                                    required>Was
                                                Assisted by The Authorities Of Country Of Asylum
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="pay_for_trip"
                                                    value="Other" required>Other
                                            </label>
                                        </div>
                                        <span class="validation-message" style="color: red;"></span>
                                    </div>
                                    {{-- <div class="form-group">
                                            <label for="">Please specify other: </label>
                                            <input type="text" class=" form-control" name="other_pay_trip">
                                        </div> --}}
                                    <div class="form-group">
                                        <label for="">Have you encountered any of the following while you were
                                            travelling from CoA?</label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Exploitation (Corruption, Extortion)">Exploitation (Corruption,
                                                Extortion)
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Confiscation of Refugee Card and/or Ration Card">Confiscation of
                                                Refugee Card and/or Ration Card
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Theft Of Belongings">Theft Of Belongings
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Deportation">Deportation
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Killing / Murder / Manslaughter">Killing / Murder / Manslaughter
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Loss Of Belongings">Loss Of Belongings
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Medical Emergency">Medical Emergency
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Death By Landmine / Explosive Remnants Of War">Death By Landmine
                                                / Explosive Remnants Of War
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Physical Violence">Physical Violence
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Psychological / Emotional Abuse">Psychological / Emotional Abuse
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Sexual Violence">Sexual Violence
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Trafficking Of Persons">Trafficking Of Persons
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Arrest Or Detention">Arrest Or Detention
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Abduction Or Kidnapping">Abduction Or Kidnapping
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input" name="encountered[]"
                                                    value="Other">Other
                                            </label>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group">
                                            <label for="">Please specify other: </label>
                                            <input type="text" class=" form-control" name="other_encountered">
                                        </div> --}}
                                </div>
                                <div class="col-md-6" id="plans">
                                    <h2 class="form_entry_title">Future Plans</h2>
                                    <div class="form-group">
                                        <label for="">How long do you intend to stay in SSD?</label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="stay_in_ssd"
                                                    value="< 1 Month">
                                                < 1 Month </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="stay_in_ssd"
                                                    value="1 - 2 Months">1 - 2 Months
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="stay_in_ssd"
                                                    value="3 - 6 Months">3 - 6 Months
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="stay_in_ssd"
                                                    value="More than 6 Months/Permanently">More than 6 Months/Permanently
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="stay_in_ssd"
                                                    value="Not Sure">Not Sure
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">How many times have you returned to SSD since
                                            displaced?</label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="returned_to_ssd"
                                                    value="1">1
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="returned_to_ssd"
                                                    value="2">2
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="returned_to_ssd"
                                                    value="2-3">2 - 3
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="returned_to_ssd"
                                                    value="4-5">4 - 5
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="returned_to_ssd"
                                                    value="6+">6+
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6" id="enumerator">
                                    <h2 class="form_entry_title">For Enumerator</h2>
                                    <div class="form-group">
                                        <label for="">Select bordering country <span style="color: red">*</span></label>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="CAR" required> CAR
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="DRC" required> DRC
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="Ethiopia" required> Ethiopia
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="Kenya" required> Kenya
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="Sudan" required> Sudan
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="bordering_country"
                                                    value="Uganda" required> Uganda
                                            </label>
                                        </div>
                                        <span class="validation-message" style="color: red;"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="">Interviewer agency</label>
                                        <input type="text" name="interviewer_agency" class=" form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Enumerator Code</label>
                                        <input type="text" name="enumerator_code" class=" form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="">Comment / Observation</label>
                                        <textarea name="comment" id="" cols="30" rows="10" class=" form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="successModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 p-o">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="lottie_wrap d-flex align-items-center justify-content-center">
                        <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_afs4kbqm.json"
                            background="transparent" speed="1" style="width: 200px; height: 200px;"
                            autoplay></lottie-player>
                    </div>
                    <h2 class=" text-center">
                        Sucessfully submitted
                    </h2>
                </div>
                <div class="modal-footer border-0 p-0">
                    <button type="button" class="btn btn-primary btn-block d-block" style="border-radius: 0px"
                        data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="{{ asset('js/multistepform.js') }}"></script>
    <script>
        $(document).ready(function() {
            function fetchDropdownData(selectedState, selectedDropdown, url) {
                if (selectedState !== '') {
                    $.ajax({
                        url: url + selectedState,
                        type: 'GET',
                        success: function(data) {
                            const dropdown = $(selectedDropdown);
                            dropdown.empty().append($('<option value="">Select</option>'));
                            $.each(data, function(index, item) {
                                dropdown.append($('<option>', {
                                    value: item.name,
                                    text: item.name
                                }));
                            });
                        }
                    });
                } else {
                    $(selectedDropdown).empty().append($('<option value="">Select</option>'));
                }
            }

            $(document).on('change', '#return_state', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#return_country',
                    '/get-counties/'
                );
            });

            $(document).on('change', '#return_country', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#return_payam',
                    '/get-payams/'
                );
            });

            $('#state_of_origin').on('change', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#country_of_origin',
                    '/get-counties/'
                );
            });

            $('#country_of_origin').on('change', function() {
                fetchDropdownData(
                    $(this).val(),
                    '#payam_of_origin',
                    '/get-payams/'
                );
            });
        });
    </script>
@endpush