@extends('frontend.layouts.app')

@section('title', 'Digital Blood Hub - Search')
@section('content')
    <div class="overlay"></div>
    <div class="loader"></div>
    @include('frontend.layouts.include.message')
    <section class="searchsection">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="request-for-blood-content text-center">
                        <h2>Search Right Blood Donor</h2>
                        <p>Please let us know if you need the blood for yourself or someone else</p>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 form-group">
                            <div class="woocommerce-checkout-payment" id="radiobtndetail">
                                <ul
                                    class="wc_payment_methods payment_methods methods d-flex list-unstyled justify-content-center" id="radiodetailbtn">
                                    <li class="wc_payment_method payment_method_bacs">
                                        <input id="forMyself" type="radio" class="input-radio" name="donorType"
                                            value="myself">
                                        <label for="forMyself" class="mb-0">For Myself</label>
                                    </li>
                                    <li class="wc_payment_method payment_method_cheque">
                                        <input id="forOther" type="radio" class="input-radio" name="donorType"
                                            value="other">
                                        <label for="forOther" class="mb-0">For Other</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div id="formForMyself" class="form-container mt-4">
                        <form action="#" class="woocommerce-checkout" id="myselfForm">
                            <div class="row gx-60 gy-60">
                                <div class="col-lg-12">
                                    <div class="registerformwrapper">
                                        <div class="row gx-60 gy-60">
                                            <div class="col-lg-12">
                                                <div class="row">
                                                    <div class="formheader mb-5 text-center">
                                                        <h3>Details for Myself</h3>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="patient-name">Patient Name<span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" name="patient_name"
                                                            id="mypatientname" value="{{ $user->name }}"
                                                            placeholder="Enter Patient Name">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Is this emergency?<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="emergency" id="myselfemergency">
                                                            <option value="">Select Option</option>
                                                            <option value="yes">Yes</option>
                                                            <option value="no">No</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="patient-name">Contact Person Name</label>
                                                        <input type="text" class="form-control"
                                                            name="contact_person_name" id="myself_contact_person_name"
                                                            value="" placeholder="Enter Contact Person Name If Any">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="patient-name">Relation With Patient<span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" class="form-control"
                                                            name="relation_with_patient" id="myself_relation_with_patient"
                                                            value="Self" placeholder="Enter Relation With Patient">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Country<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="country_id" id="myselfcountryid">
                                                            <option value="">Select Country</option>
                                                            @foreach ($countries as $country)
                                                                <option value="{{ $country->id }}"
                                                                    {{ isset($user) && $country->id == $user->country_stay_id ? 'selected' : '' }}>
                                                                    {{ $country->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>

                                                    </div>
                                                    <div
                                                    class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                    <label>State<span class="text-danger">*</span></label>
                                                    <select class="form-select" name="province_id" id="myselfprovinceid">
                                                        <option value="">Select State</option>
                                                        @foreach ($provinces as $province)
                                                            <option value="{{ $province->id }}" 
                                                                {{ isset($user) && $province->id == $user->state_id ? 'selected' : '' }}>
                                                                {{ $province->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    
                                                    <p class="text-danger"></p>
                                                </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>City<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="city_id" id="myselfcityid"
                                                            {{ $user ? '' : 'disabled' }}>
                                                            <option value="">Select City</option>
                                                            @if (Auth::check())

                                                                @foreach ($cities as $city)
                                                                    <option value="{{ $city->id }}"
                                                                        {{ isset($user) && $city->id == $user->city_id ? 'selected' : '' }}>
                                                                        {{ $city->name }}
                                                                    </option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="myselfhospital">Hospital <span class="text-danger">*</span></label>
                                                        <select class="form-select" name="hospital_id" id="myselfhospital">
                                                            <option value="" selected>Select Hospital</option>
                                                            @foreach ($hospitals as $hospital)
                                                                <option value="{{ $hospital->id }}">
                                                                    {{ $hospital->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger" id="hospital-error"></p>
                                                    </div>
                                                    
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="require-date">Require Date<span
                                                                class="text-danger">*</span></label>
                                                        <input type="date" class="form-control require-date"
                                                            name="require_date" id="myselfrequiredate" min="">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="require-date">Require Time<span
                                                                class="text-danger">*</span></label>
                                                        <input type="time" class="form-control " name="require_time"
                                                            id="myselfrequiretime" placeholder="Require Time">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Gender<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="gender" id="myselfgender">
                                                            <option value="">Select Gender</option>
                                                            <option value="male">Male</option>
                                                            <option value="female">Female</option>
                                                            <option value="other">Other</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Number Of Bottles<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="number_of_bottle"
                                                            id="myselfbottle">
                                                            <option value="" disabled selected>Select Quantity
                                                            </option>
                                                            <option value="1">1</option>
                                                            <option value="2">2</option>
                                                            <option value="3">3</option>
                                                            <option value="4">4</option>
                                                            <option value="5">5</option>
                                                            <option value="6">6</option>
                                                            <option value="7">7</option>
                                                            <option value="8">8</option>
                                                            <option value="9">9</option>
                                                            <option value="10">10</option>
                                                            <option value="11">11</option>
                                                            <option value="12">12</option>
                                                            <option value="13">13</option>
                                                            <option value="14">14</option>
                                                            <option value="15">15</option>
                                                            <option value="16">16</option>
                                                            <option value="17">17</option>
                                                            <option value="18">18</option>
                                                            <option value="19">19</option>
                                                            <option value="20">20</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Do You Provide Pick Up?<span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="pickup" id="myselfpickup">
                                                            <option value="no"selected>No</option>
                                                            <option value="yes">Yes</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Do You Provide Drop Off?<span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="dropoff" id="myselfdropoff">
                                                            <option value="no"selected>No</option>
                                                            <option value="yes">Yes</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Why Do You Need Blood?<span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="reason_id" id="myselfreason">
                                                            <option value="">Select Option</option>
                                                            @foreach ($bloodRequestReasons as $reason)
                                                                <option value="{{ $reason->id }}">
                                                                    {{ $reason->reason }}:
                                                                    {{ $reason->description }}</option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="contact">Contact No 1<span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" name="contact1"
                                                            value="{{ $user->phone }}" id="myselfcontact1"
                                                            placeholder="Enter Contact">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="contact">Contact No 2</label>
                                                        <input type="text" class="form-control" name="contact2"
                                                            id="myselfcontact2" placeholder="Enter Other Contact">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4 d-none">
                                                        <label for="location">Location (autocompete)</label>
                                                        <input type="text" class="form-control" name="location"
                                                            id="myselflocation" placeholder="Enter Location">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div class="row">
                                                        <div class="blood-group-container">
                                                            <label class="mb-4">Blood Group<span
                                                                    class="text-danger">*</span></label>
                                                            <div class="radio-container" id="myBloodGroup">
                                                                @foreach ($bloodGroups as $bloodGroup)
                                                                    <label for="my_blood_group_{{ $bloodGroup->id }}"
                                                                        class="checkbox-circle">
                                                                        <input type="radio"
                                                                            id="my_blood_group_{{ $bloodGroup->id }}"
                                                                            name="blood_group_id"
                                                                            value="{{ $bloodGroup->id }}"
                                                                            @if (old('blood_group_id', $user->blood_group_id) == $bloodGroup->id) checked @endif>
                                                                        <span
                                                                            class="checkmark">{{ $bloodGroup->name }}ve</span>
                                                                    </label>
                                                                @endforeach
                                                            </div>

                                                            <p class="error-message text-danger"></p>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div
                                                            class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group">
                                                            <div class="woocommerce-checkout-payment">
                                                                <div class="form-row place-order">
                                                                    <button type="submit" class="btn">
                                                                        <span class="link-effect">
                                                                            <span class="effect-1">NEXT</span>
                                                                            <span class="effect-1">NEXT</span>
                                                                        </span>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="formForOther" class="form-container mt-4">
                        <form action="#" class="woocommerce-checkout" id="otherForm">
                            <div class="row gx-60 gy-60">
                                <div class="col-lg-12">
                                    <div class="registerformwrapper">
                                        <div class="row gx-60 gy-60">
                                            <div class="col-lg-12">
                                                <div class="row">
                                                    <div class="formheader mb-5 text-center">
                                                        <h3>Details for Other</h3>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="patient-name">Patient Name<span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" name="patient_name"
                                                            id="otherpatientname" placeholder="Enter Patient Name">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Is this emergency?<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="emergency" id="otheremergency">
                                                            <option value="">Select Option</option>
                                                            <option value="yes">Yes</option>
                                                            <option value="no">No</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                    class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                    <label for="patient-name">Contact Person Name</label>
                                                    <input type="text" class="form-control"
                                                        name="contact_person_name" id="other_contact_person_name"
                                                        value="" placeholder="Enter Contact Person Name If Any">
                                                    <p class="text-danger"></p>
                                                </div>
                                                <div
                                                    class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                    <label for="patient-name">Relation With Patient<span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" class="form-control"
                                                        name="relation_with_patient" id="other_relation_with_patient"
                                                        value="" placeholder="Enter Relation With Patient">
                                                    <p class="text-danger"></p>
                                                </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Why Do You Need Blood?<span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="reason_id" id="otherreason">
                                                            <option value="">Select Option</option>
                                                            @foreach ($bloodRequestReasons as $reason)
                                                                <option value="{{ $reason->id }}">
                                                                    {{ $reason->reason }}: {{ $reason->description }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Gender<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="gender" id="othergender">
                                                            <option value="">Select Gender</option>
                                                            <option value="male">Male</option>
                                                            <option value="female">Female</option>
                                                            <option value="other">Other</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Country<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="country_id"
                                                            id="othercountryid">
                                                            <option value="">Select Country</option>
                                                            @foreach ($countries as $country)
                                                                <option value="{{ $country->id }}"
                                                                    {{ $country->id == $defualtCountryid ? 'selected' : '' }}>
                                                                    {{ $country->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>State<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="province_id"
                                                            id="otherprovinceid">
                                                            <option value="">Select State</option>
                                                            @foreach ($provinces as $province)
                                                                <option value="{{ $province->id }}">{{ $province->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>City<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="city_id" id="othercityid">
                                                            <option value="" disabled selected>Select City</option>
                                                            @foreach ($cities as $city)
                                                                <option value="{{ $city->id }}">
                                                                    {{ $city->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>               
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Hospital<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="hospital_id" id="otherhospital"
                                                            disabled>
                                                            <option value="">Select Hospital</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="require-date">Require Date<span
                                                                class="text-danger">*</span></label>
                                                        <input type="date" class="form-control require-date"
                                                            name="require_date" id="otherrequiredate" max="">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="require-date">Require Time<span
                                                                class="text-danger">*</span></label>
                                                        <input type="time" class="form-control " name="require_time"
                                                            id="otherrequiretime" placeholder="Require Time">
                                                        <p class="text-danger"></p>
                                                    </div>

                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Number Of Bottles<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="number_of_bottle"
                                                            id="otherbottle">
                                                            <option value="" disabled selected>Select Quantity
                                                            </option>
                                                            <option value="1">1</option>
                                                            <option value="2">2</option>
                                                            <option value="3">3</option>
                                                            <option value="4">4</option>
                                                            <option value="5">5</option>
                                                            <option value="6">6</option>
                                                            <option value="7">7</option>
                                                            <option value="8">8</option>
                                                            <option value="9">9</option>
                                                            <option value="10">10</option>
                                                            <option value="11">11</option>
                                                            <option value="12">12</option>
                                                            <option value="13">13</option>
                                                            <option value="14">14</option>
                                                            <option value="15">5</option>
                                                            <option value="16">16</option>
                                                            <option value="17">17</option>
                                                            <option value="18">18</option>
                                                            <option value="19">19</option>
                                                            <option value="20">20</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Do You Provide Pick Up?<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="pickup" id="otherpickup">
                                                            <option value="no"selected>No</option>
                                                            <option value="yes">Yes</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label>Do You Provide Drop Off<span class="text-danger">*</span></label>
                                                        <select class="form-select" name="dropoff" id="otherdropoff">
                                                            <option value="no"selected>No</option>
                                                            <option value="yes">Yes</option>
                                                        </select>
                                                        <p class="text-danger"></p>
                                                    </div>

                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4 d-none">
                                                        <label for="location">Location</label>
                                                        <input type="text" class="form-control" name="location"
                                                            id="otherlocation" placeholder="Enter Location">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="contact">Contact 1<span
                                                            class="text-danger">*</span></label>
                                                        <input type="text" class="form-control" name="contact1"
                                                            id="othercontact1" placeholder="Enter Contact">
                                                        <p class="text-danger"></p>
                                                    </div>
                                                    <div
                                                        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group mb-4">
                                                        <label for="contact">Contact 2</label>
                                                        <input type="text" class="form-control" name="contact2"
                                                            id="othercontact2" placeholder="Enter Other Contact">
                                                        <p class="text-danger"></p>
                                                    </div>

                                                    <div class="row">
                                                        <div class="blood-group-container">
                                                            <label class="mb-4">Blood Group<span
                                                                    class="text-danger">*</span></label>
                                                            <div class="radio-container" id="OtherBloodGroup">
                                                                @foreach ($bloodGroups as $bloodGroup)
                                                                    <label for="patient_blood_group_{{ $bloodGroup->id }}"
                                                                        class="checkbox-circle">
                                                                        <input type="radio"
                                                                            id="patient_blood_group_{{ $bloodGroup->id }}"
                                                                            name="blood_group_id"
                                                                            value="{{ $bloodGroup->id }}">
                                                                        <span
                                                                            class="checkmark">{{ $bloodGroup->name }}ve</span>
                                                                    </label>
                                                                @endforeach
                                                            </div>
                                                            <p class="error-message text-danger"></p>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div
                                                            class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 form-group">
                                                            <div class="woocommerce-checkout-payment">
                                                                <div class="form-row place-order">
                                                                    <button type="submit" class="btn">
                                                                        <span class="link-effect">
                                                                            <span class="effect-1">NEXT</span>
                                                                            <span class="effect-1">NEXT</span>
                                                                        </span>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="sectionbanner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="bannerimg">
                        <img src="{{ asset('frontend/banners/banner-5.jpg') }}" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('customJs')
//<script>
//    let places, input, address, city;
//    google.maps.event.addDomListener(window, "load", function() {
//    var places = new google.maps.places.Autocomplete(document.getElementById('myselflocation'));
//        google.maps.event.addListener(places, "place_changed", function() {
//            var place = places.getPlace();
//            var address = place.formatted_address;
//            var latitude = place.geometry.location.lat();
//            var longitude = place.geometry.location.lng();
//            console.log("Address: " + address);
//            console.log("Latitude: " + latitude);
//            console.log("Longitude: " + longitude);
//            var latlng = new google.maps.LatLng(latitude, longitude);
//            var geocoder = new google.maps.Geocoder();
//            geocoder.geocode({ 'location': latlng }, function(results, status) {
//                if (status === google.maps.GeocoderStatus.OK) {
//                    if (results[0]) {
//                        console.log("Geocoded address: ", results[0]);
//                        var pin = results[0].address_components[results[0].address_components.length - 1].long_name;
//                        var country = results[0].address_components[results[0].address_components.length - 2].long_name;
//                        var state = results[0].address_components[results[0].address_components.length - 3].long_name;
//                        var city = results[0].address_components[results[0].address_components.length - 4].long_name;
//                        console.log("Pin Code: " + pin);
//                        console.log("Country: " + country);
//                        console.log("State: " + state);
//                        console.log("City: " + city);
//                    }
//                } else {
//                    console.log('Geocoder failed due to: ' + status);
//                }
//            });
//        });
//    });
//</script>

    <script>
        $(document).ready(function() {
            var today = new Date().toISOString().split('T')[0];
            $('.require-date').attr('min', today);

            const $radioButtons = $('input[name="donorType"]');
            const $bannerImg = $('.sectionbanner');
            const $formForMyself = $('#formForMyself');
            const $formForOther = $('#formForOther');

            // Initially hide the forms and show the banner
            $bannerImg.show();
            $formForMyself.hide();
            $formForOther.hide();

            // Handle radio button change event
            $radioButtons.on('change', function() {
                if ($(this).val() === 'myself') {
                    $formForMyself.show();
                    $formForOther.hide();
                    $bannerImg.hide();
                } else if ($(this).val() === 'other') {
                    $formForMyself.hide();
                    $formForOther.show();
                    $bannerImg.hide();
                } else {
                    $formForMyself.hide();
                    $formForOther.hide();
                    $bannerImg.show();
                }
            });

            // Check initial state of radio buttons and set form visibility accordingly
            if ($('#forMyself').is(':checked')) {
                $formForMyself.show();
                $formForOther.hide();
                $bannerImg.hide();
            } else if ($('#forOther').is(':checked')) {
                $formForMyself.hide();
                $formForOther.show();
                $bannerImg.hide();
            } else {
                $formForMyself.hide();
                $formForOther.hide();
                $bannerImg.show();
            }
        });
        $('#myselfcountryid').change(function() {
            var country_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (country_id !== "") {
                $.ajax({
                    url: '{{ route('getStates') }}',
                    type: 'GET',
                    data: {
                        country_id: country_id
                    },
                    dataType: 'json',
                    success: function(data) {
                        setTimeout(function() {
                            $('#myselfprovinceid').prop('disabled', false).empty().append(
                                '<option value="">Select State</option>');
                            $.each(data, function(key, value) {
                                $('#myselfprovinceid').append('<option value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                            $('.overlay').hide();
                            $('.loader').hide();
                        }, 2000);
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        $('.overlay').hide();
                        $('.loader').hide();
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#myselfprovinceid').empty().prop('disabled', true).append('<option value="" >Select State</option>');
            }
        });
        $('#othercountryid').change(function() {
            var country_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (country_id !== "") {
                $.ajax({
                    url: '{{ route('getStates') }}',
                    type: 'GET',
                    data: {
                        country_id: country_id
                    },
                    dataType: 'json',
                    success: function(data) {
                        setTimeout(function() {
                            $('#otherprovinceid').prop('disabled', false).empty().append(
                                '<option value="">Select State</option>');
                            $.each(data, function(key, value) {
                                $('#otherprovinceid').append('<option value="' + value.id +
                                    '">' + value.name + '</option>');
                            });
                            $('.overlay').hide();
                            $('.loader').hide();
                        }, 2000);
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        $('.overlay').hide();
                        $('.loader').hide();
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#otherprovinceid').empty().prop('disabled', true).append('<option value="" >Select State</option>');
            }
        });
        $('#myselfprovinceid').change(function() {
            var province_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (province_id !== "") {
                $.ajax({
                    url: '{{ route('getCities') }}',
                    type: 'GET',
                    data: {
                        province_id: province_id
                    },
                    dataType: 'json',
                    success: function(data) {
                        setTimeout(function() {
                            $('#myselfcityid').prop('disabled', false).empty().append(
                                '<option value="">Select City</option>');
                            $.each(data, function(key, value) {
                                $('#myselfcityid').append('<option value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                            $('.overlay').hide();
                            $('.loader').hide();
                        }, 2000);
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        $('.overlay').hide();
                        $('.loader').hide();
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#myselfcityid').empty().prop('disabled', true).append('<option value="" >Select City</option>');
            }
        });
        $('#otherprovinceid').change(function() {
            var province_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (province_id !== "") {
                $.ajax({
                    url: '{{ route('getCities') }}',
                    type: 'GET',
                    data: {
                        province_id: province_id
                    },
                    dataType: 'json',
                    success: function(data) {
                        setTimeout(function() {
                            $('#othercityid').prop('disabled', false).empty().append(
                                '<option value="">Select City</option>');
                            $.each(data, function(key, value) {
                                $('#othercityid').append('<option value="' + value.id +
                                    '">' + value.name + '</option>');
                            });
                            $('.overlay').hide();
                            $('.loader').hide();
                        }, 2000);
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                        $('.overlay').hide();
                        $('.loader').hide();
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#othercityid').empty().prop('disabled', true).append('<option value="" >Select City</option>');
            }
        });

        $('#myselfForm').submit(function(e) {
            $('button[type="submit"]').prop('disabled', true);
            e.preventDefault();
            const radioButtonValue = $('input[name="donorType"]:checked').val();
            const formData = $(this).serializeArray();
            const data = formData.reduce((acc, field) => {
                acc[field.name] = field.value;
                return acc;
            }, {});
            data.donorType = radioButtonValue;

            $.ajax({
                url: '{{ route('front.searchprocess') }}',
                type: 'post',
                data: data, // Send the data object
                dataType: 'json',
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (response.status == false) {
                        var errors = response.errors;

                        // Handle emergency field errors
                        if (errors.patient_name) {
                            $('#mypatientname')
                                .siblings('p')
                                .html(errors.patient_name);
                            $('#mypatientname').focus();
                            $('#mypatientname');
                        } else {
                            $('#mypatientname')
                                .siblings('p')
                                .html('');
                            $('#mypatientname').re;
                        }
                        if (errors.emergency) {
                            $('#myselfemergency')
                                .siblings('p')
                                .html(errors.emergency);
                            $('#myselfemergency').focus();
                            $('#myselfemergency');
                        } else {
                            $('#myselfemergency')
                                .siblings('p')
                                .html('');
                            $('#myselfemergency').re;
                        }
                        if (errors.relation_with_patient) {
                            $('#myself_relation_with_patient')
                                .siblings('p')
                                .html(errors.relation_with_patient);
                            $('#myself_relation_with_patient').focus();
                            $('#myself_relation_with_patient');
                        } else {
                            $('#myself_relation_with_patient')
                                .siblings('p')
                                .html('');
                            $('#myself_relation_with_patient').re;
                        }

                        // Handle reason field errors
                        if (errors.reason_id) {
                            $('#myselfreason')
                                .siblings('p')
                                .html(errors.reason_id);
                            $('#myselfreason').focus();
                            $('#myselfreason');
                        } else {
                            $('#myselfreason')
                                .siblings('p')
                                .html('');
                            $('#myselfreason');
                        }
                        if (errors.country_id) {
                            $('#myselfcountryid')
                                .siblings('p')
                                .html(errors.country_id);
                            $('#myselfcountryid').focus();
                            $('#myselfcountryid');
                        } else {
                            $('#myselfcountryid')
                                .siblings('p')
                                .html('');
                            $('#myselfcountryid');
                        }

                        if (errors.city_id) {
                            $('#myselfcityid')
                                .siblings('p')
                                .html(errors.city_id);
                            $('#myselfcityid').focus();
                            $('#myselfcityid');
                        } else {
                            $('#myselfcityid')
                                .siblings('p')
                                .html('');
                            $('#myselfcityid');
                        }
                        if (errors.province_id) {
                            $('#myselfprovinceid')
                                .siblings('p')
                                .html(errors.province_id);
                            $('#myselfprovinceid').focus();
                            $('#myselfprovinceid');
                        } else {
                            $('#myselfprovinceid')
                                .siblings('p')
                                .html('');
                            $('#myselfprovinceid');
                        }
                        if (errors.hospital_id) {
                            $('#myselfhospital')
                                .siblings('p')
                                .html(errors.hospital_id);
                            $('#myselfhospital').focus();
                            $('#myselfhospital');
                        } else {
                            $('#myselfhospital')
                                .siblings('p')
                                .html('');
                            $('#myselfhospital');
                        }
                        if (errors.require_date) {
                            $('#myselfrequiredate')
                                .siblings('p')
                                .html(errors.require_date);
                            $('#myselfrequiredate').focus();
                            $('#myselfrequiredate');
                        } else {
                            $('#myselfrequiredate')
                                .siblings('p')
                                .html('');
                            $('#myselfrequiredate');
                        }
                        // Handle require-date field errors
                        if (errors.require_time) {
                            $('#myselfrequiretime')
                                .siblings('p')
                                .html(errors.require_time);
                            $('#myselfrequiretime').focus();
                            $('#myselfrequiretime');
                        } else {
                            $('#myselfrequiretime')
                                .siblings('p')
                                .html('');
                            $('#myselfrequiretime');
                        }
                        if (errors.gender) {
                            $('#myselfgender')
                                .siblings('p')
                                .html(errors.gender);
                            $('#myselfgender').focus();
                            $('#myselfgender');
                        } else {
                            $('#myselfgender')
                                .siblings('p')
                                .html('');
                            $('#myselfgender');
                        }
                        if (errors.number_of_bottle) {
                            $('#myselfbottle')
                                .siblings('p')
                                .html(errors.number_of_bottle);
                            $('#myselfbottle').focus();
                            $('#myselfbottle');
                        } else {
                            $('#myselfbottle')
                                .siblings('p')
                                .html('');
                            $('#myselfbottle');
                        }

                        // Handle location field errors
                        if (errors.location) {
                            $('#myselflocation')
                                .siblings('p')
                                .html(errors.location);
                            $('#myselflocation').focus();
                            $('#myselflocation');
                        } else {
                            $('#myselflocation')
                                .siblings('p')
                                .html('');
                            $('#myselflocation');
                        }

                        // Handle blood_group field errors
                        if (errors.blood_group_id) {
                            $('input[name="blood_group_id"]')
                                .closest('form')
                                .find('.error-message')
                                .html(errors.blood_group_id);
                        } else {
                            $('input[name="blood_group_id"]')
                                .closest('form')
                                .find('.error-message')
                                .html('');
                        }

                    } else {
                        // Clear all error states if response is successful
                        $('#myselfemergency')
                            .siblings('p')
                            .html('');
                        $('#myself_relation_with_patient')
                            .siblings('p')
                            .html('');
                        $('#myselfreason')
                            .siblings('p')
                            .html('');
                        $('#myselfcountryid')
                            .siblings('p')
                            .html('');
                        $('#myselfcityid')
                            .siblings('p')
                            .html('');
                        $('#myselfprovinceid')
                            .siblings('p')
                            .html('');
                        $('#myselfhospital')
                            .siblings('p')
                            .html('');
                        $('#myselfrequiredate')
                            .siblings('p')
                            .html('');

                        $('#myselflocation')
                            .siblings('p')
                            .html('');
                        $('#myselfrequiretime')
                            .siblings('p')
                            .html('');
                        $('#myselfgender')
                            .siblings('p')
                            .html('');
                        $('#myselfbottle')
                            .siblings('p')
                            .html('');



                        $('input[name="blood_group_id"]')
                            .siblings('p')
                            .html('');
                            window.location.href = '{{ url('detail') }}/' + response.request_id;
                    }
                }

            });
        });

        $('#otherForm').submit(function(e) {
            e.preventDefault();
            $('button[type="submit"]').prop('disabled', true);
            const radioButtonValue = $('input[name="donorType"]:checked').val();
            const formData = $(this).serializeArray();
            const data = formData.reduce((acc, field) => {
                acc[field.name] = field.value;
                return acc;
            }, {});
            data.donorType = radioButtonValue;

            $.ajax({
                url: '{{ route('front.searchprocess') }}',
                type: 'post',
                data: data, // Send the data object
                dataType: 'json',
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (response.status == false) {
                        var errors = response.errors;

                        // Handle emergency field errors
                        if (errors.patient_name) {
                            $('#otherpatientname')
                                .siblings('p')
                                .html(errors.patient_name);
                            $('#otherpatientname').focus();
                        } else {
                            $('#otherpatientname')
                                .siblings('p')
                                .html('');
                        }
                        if (errors.emergency) {
                            $('#otheremergency')
                                .siblings('p')
                                .html(errors.emergency);
                            $('#otheremergency').focus();
                        } else {
                            $('#otheremergency')
                                .siblings('p')
                                .html('');
                        }
                        if (errors.relation_with_patient) {
                            $('#other_relation_with_patient')
                                .siblings('p')
                                .html(errors.relation_with_patient);
                            $('#other_relation_with_patient').focus();
                        } else {
                            $('#other_relation_with_patient')
                                .siblings('p')
                                .html('');
                        }
                        if (errors.reason_id) {
                            $('#otherreason')
                                .siblings('p')
                                .html(errors.reason_id);
                            $('#otherreason').focus();
                        } else {
                            $('#otherreason')
                                .siblings('p')
                                .html('');
                        }
                        if (errors.gender) {
                            $('#othergender')
                                .siblings('p')
                                .html(errors.gender);
                            $('#othergender').focus();
                            $('#othergender');
                        } else {
                            $('#othergender')
                                .siblings('p')
                                .html('');
                            $('#othergender');
                        }

                        // Handle country_id field errors
                        if (errors.country_id) {
                            $('#othercountryid')
                                .siblings('p')
                                .html(errors.country_id);
                            $('#othercountryid').focus();
                            $('#othercountryid');
                        } else {
                            $('#othercountryid')
                                .siblings('p')
                                .html('');
                            $('#othercountryid');
                        }
                        // Handle city_id field errors
                        if (errors.city_id) {
                            $('#othercityid')
                                .siblings('p')
                                .html(errors.city_id);
                            $('#othercityid').focus();
                            $('#othercityid');
                        } else {
                            $('#othercityid')
                                .siblings('p')
                                .html('');
                            $('#othercityid');
                        }

                        if (errors.province_id) {
                            $('#otherprovinceid')
                                .siblings('p')
                                .html(errors.province_id);
                            $('#otherprovinceid').focus();
                            $('#otherprovinceid');
                        } else {
                            $('#otherprovinceid')
                                .siblings('p')
                                .html('');
                            $('#otherprovinceid');
                        }
                        if (errors.hospital_id) {
                            $('#otherhospital')
                                .siblings('p')
                                .html(errors.hospital_id);
                            $('#otherhospital').focus();
                            $('#otherhospital');
                        } else {
                            $('#otherhospital')
                                .siblings('p')
                                .html('');
                            $('#otherhospital');
                        }
                        if (errors.require_time) {
                            $('#otherrequiretime')
                                .siblings('p')
                                .html(errors.require_time);
                            $('#otherrequiretime').focus();
                            $('#otherrequiretime');
                        } else {
                            $('#otherrequiretime')
                                .siblings('p')
                                .html('');
                            $('#otherrequiretime');
                        }
                        // Handle require-date field errors
                        if (errors.require_date) {
                            $('#otherrequiredate')
                                .siblings('p')
                                .html(errors['require_date']);
                            $('#otherrequiredate').focus();
                            $('#otherrequiredate');
                        } else {
                            $('#myselfrequiredate')
                                .siblings('p')
                                .html('');
                            $('#myselfrequiredate');
                        }
                        if (errors.number_of_bottle) {
                            $('#otherbottle')
                                .siblings('p')
                                .html(errors.number_of_bottle);
                            $('#otherbottle').focus();
                            $('#otherbottle');
                        } else {
                            $('#otherbottle')
                                .siblings('p')
                                .html('');
                            $('#otherbottle');
                        }
                        // Handle location field errors
                        if (errors.location) {
                            $('#otherlocation')
                                .siblings('p')
                                .html(errors.location);
                            $('#otherlocation').focus();
                        } else {
                            $('#otherlocation')
                                .siblings('p')
                                .html('');
                        }




                        // Handle blood_group field errors

                        if (errors.blood_group_id) {
                            $('input[name="blood_group_id"]')
                                .closest('form')
                                .find('.error-message')
                                .html(errors.blood_group_id);
                        } else {
                            $('input[name="blood_group_id"]')
                                .closest('form')
                                .find('.error-message')
                                .html('');
                        }

                    } else {
                        // Clear all error states if response is successful
                        $('#otherpatientname')
                            .siblings('p')
                            .html('');
                        $('#otheremergency')
                            .siblings('p')
                            .html('');
                        $('#other_relation_with_patient')
                            .siblings('p')
                            .html('');
                        $('#otherreason')
                            .siblings('p')
                            .html('');
                        $('#othergender')
                            .siblings('p')
                            .html('');

                        $('#otherrequiredate')
                            .siblings('p')
                            .html('');

                        $('#otherlocation')
                            .siblings('p')
                            .html('');
                        $('#othercityid')
                            .siblings('p')
                            .html('');
                        $('#othercountryid')
                            .siblings('p')
                            .html('');
                        $('#otherprovinceid')
                            .siblings('p')
                            .html('');
                        $('#otherhospitalid')
                            .siblings('p')
                            .html('');
                        $('#otherrequiretime')
                            .siblings('p')
                            .html('');
                        $('input[name="blood_group"]')
                            .siblings('p')
                            .html('');
                        $('input[name="blood_group"]')
                            .closest('form')
                            .find('.error-message')
                            .html('');
                            window.location.href = '{{ url('detail') }}/' + response.request_id;

                    }
                }

            });
        });
        $('#myselfcityid').on('change', function() {
            var city_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (city_id !== "") {
                $.ajax({
                    url: '{{ route("getHospitals") }}',
                    type: 'GET',
                    data: {
                        city_id: city_id
                    },
                    success: function(data) {
                        $('.overlay').hide();
                        $('.loader').hide();
                        $('#myselfhospital').removeAttr('disabled');
                        $('#myselfhospital').empty();
                        $('#myselfhospital').append('<option value="">Select Hospital</option>');

                        // Populate the dropdown with new options
                        $.each(data, function(key, hospital) {
                            $('#myselfhospital').append('<option value="' + hospital.id + '">' +
                                hospital.name + '</option>');
                        });
                    },
                    error: function() {
                        $('.overlay').hide();
                        $('.loader').hide();
                        console.log('AJAX load did not work');
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#myselfhospital').attr('disabled', 'disabled');
                $('#myselfhospital').empty();
                $('#myselfhospital').append('<option value="">Select Hospital</option>');
            }
        });
        $('#othercityid').on('change', function() {
            var city_id = $(this).val();
            $('.overlay').show();
            $('.loader').show();

            if (city_id !== "") {
                $.ajax({
                    url: '{{ route('getHospitals') }}',
                    type: 'GET',
                    data: {
                        city_id: city_id
                    },
                    success: function(data) {
                        $('.overlay').hide();
                        $('.loader').hide();
                        $('#otherhospital').removeAttr('disabled');
                        $('#otherhospital').empty();
                        $('#otherhospital').append('<option value="">Select Hospital</option>');

                        // Populate the dropdown with new options
                        $.each(data, function(key, hospital) {
                            $('#otherhospital').append('<option value="' + hospital.id + '">' +
                                hospital.name + '</option>');
                        });
                    },
                    error: function() {
                        $('.overlay').hide();
                        $('.loader').hide();
                        console.log('AJAX load did not work');
                    }
                });
            } else {
                $('.overlay').hide();
                $('.loader').hide();
                $('#otherhospital').attr('disabled', 'disabled');
                $('#otherhospital').empty();
                $('#otherhospital').append('<option value="">Select Hospital</option>');
            }
        });
    </script>
@endsection