@extends('layouts.app')
<style>
    .custom-radio {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
        transition: background-color 0.3s ease;
        font-size: 12px;
        /* Smaller font size for compact design */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        /* Light shadow for better separation */
    }

    .custom-radio:hover {
        background-color: #f1f1f1;
    }

    .custom-radio .form-check-input {
        margin-right: 10px;
        flex-shrink: 0;
        /* Prevents the input from resizing */
    }

    .custom-radio .form-check-label {
        display: flex;
        flex-wrap: wrap;
        /* Allows wrapping for smaller screens */
        font-weight: 500;
    }

    .custom-radio .form-check-label span {
        margin-bottom: 3px;
        /* Smaller margin for compact design */
    }

    .custom-radio .form-check-label .date,
    .custom-radio .form-check-label .time,
    .custom-radio .form-check-label .location {
        color: #333;
    }

    .custom-radio .form-check-label .time {
        font-weight: bold;
        color: #0056b3;
    }

    @media (max-width: 576px) {
        .custom-radio {
            flex-direction: column;
            /* Stack items on small screens */
            align-items: flex-start;
        }

        .custom-radio .form-check-input {
            margin-bottom: 5px;
            /* Margin adjustment for small screens */
        }

        .custom-radio .form-check-label {
            flex-direction: column;
            /* Align labels vertically on small screens */
        }

        .custom-radio .form-check-label span {
            margin-bottom: 2px;
            /* Smaller margin for compact design */
        }
    }
</style>
<style>
    .error-message {
        color: red;
        margin-top: 10px;
    }

    .input-with-button {
        position: relative;
        display: flex;
    }

    .input-with-button input {
        flex-grow: 1;
        padding-right: 70px;
        /* Adjust based on button width */
    }

    .input-with-button .verify-button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .valid-address-section {
        margin-top: 10px;
        padding: 10px;
        background-color: #e6ffe1;
        border-radius: 4px;
    }

    .invalid-address-section {
        margin-top: 10px;
        padding: 10px;
        background-color: #ffe9e9;
        border-radius: 4px;
    }

    .valid-address-header {
        font-weight: bold;
        margin-bottom: 10px;
        color: #28a745;
    }

    .invalid-address-header {
        font-weight: bold;
        margin-bottom: 10px;
        color: #ff0000;
    }

    .checkmark {
        color: #28a745;
        margin-right: 5px;
    }

    .invalid-checkmark {
        color: #ff0000;
        margin-right: 5px;
    }

    .valid-address-details {
        display: flex;
        flex-direction: column;
    }

    .address-component {
        padding: 2px 0;
        font-size: 0.9em;
    }

    .spinner {
        display: none;
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 10px auto;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999;
    }

    .autocomplete-address-count {
        float: right;
        color: #ee0000;
    }

    /* Add this CSS to your existing style block */
    @media (max-width: 767px) {

        #address {
            width: 100%;
            max-width: 100%;
            padding-right: 15px;
            font-size: 14px;
        }
    }
</style>
@section('content')
    <div class="table-responsive custom-table-s1">
        @if (session()->has('message'))
            <div class="alert alert-success">{{ session()->get('message') }}</div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger">{{ session()->get('error') }}</div>
        @endif
        <table class="participant_table" width="100%">
            <thead>
                <tr>
                    <th>Application No - {{ $application->id }} </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card forms-card">
                                    <div class="card-body">
                                        <div class="basic-form">
                                            {{-- @dump($application) --}}
                                            <form class="m-form m-form--state" name="frm-create" id="frm-create"
                                                method="POST"
                                                action="{{ route('backend.applications.update', $application->id) }}">
                                                @csrf
                                                @method('PUT')
                                                <div class="outer-div">
                                                    <div class="inner-div">
                                                        <div class="form-group row">

                                                            <div class="col-sm-6">
                                                                <label>Address</label>
                                                                <div class="input-with-button">

                                                                    <input type="text" placeholder="Enter Address"
                                                                        name="address" id="address"
                                                                        value="{{ $application->address }} {{ $application->city }} {{ $application->state }} {{ $application->zip }}"
                                                                        class="form-control">

                                                                    {{-- <button type="button" class="verify-button" id="verifyButton">Verify</button> --}}
                                                                </div>
                                                                <div class="spinner" id="loadingSpinner"></div>
                                                                <span class="error-message" id="addressError">
                                                                    @error('address')
                                                                        {{ $message }}
                                                                    @enderror
                                                                </span>

                                                                <div class="valid-address-section" style="display: none;">
                                                                    <div class="valid-address-header">
                                                                        <span class="checkmark">✓</span> Found Valid Address
                                                                    </div>
                                                                    <div class="valid-address-details">
                                                                        <div class="address-component">Address: <span
                                                                                id="primaryNumber"></span></div>
                                                                        <div class="address-component">Street Name: <span
                                                                                id="streetName"></span></div>
                                                                        <div class="address-component">Street Suffix: <span
                                                                                id="streetSuffix"></span></div>
                                                                        <div class="address-component">City: <span
                                                                                id="city"></span></div>
                                                                        <div class="address-component">State: <span
                                                                                id="state"></span></div>
                                                                        <div class="address-component">Zip Code: <span
                                                                                id="zipCode"></span></div>
                                                                        <div class="address-component">Latitude: <span
                                                                                id="latitude"></span></div>
                                                                        <div class="address-component">Longitude: <span
                                                                                id="longitude"></span></div>
                                                                    </div>
                                                                </div>
                                                                <div class="invalid-address-section" style="display: none;">
                                                                    <div class="invalid-address-header">
                                                                        We are sorry, but we do not recognize this address.
                                                                        Please type the address in to ensure it's accurate.
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="latitudeArea">
                                                                    <label>Latitude</label>
                                                                    <input type="text" id="latitude" name="latitude"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="longtitudeArea">
                                                                    <label>Longitude</label>
                                                                    <input type="text" name="longitude" id="longitude"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="cityArea">
                                                                    <label>city</label>
                                                                    <input type="text" id="city" name="city"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="stateArea">
                                                                    <label>state</label>
                                                                    <input type="text" id="state" name="state"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="zipArea">
                                                                    <label>zip</label>
                                                                    <input type="text" id="zip" name="zip"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="first_name">
                                                                        First Name
                                                                    </label>

                                                                    <input type="text" name="first_name"
                                                                        value="{{ $application->first_name }}"
                                                                        class="form-control @error('first_name') is-invalid @enderror">
                                                                    @error('first_name')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="last_name">
                                                                        Last Name
                                                                    </label>

                                                                    <input type="text" name="last_name"
                                                                        value="{{ $application->last_name }}"
                                                                        class="form-control @error('last_name') is-invalid @enderror">
                                                                    @error('last_name')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="contact_no">
                                                                        Phone
                                                                    </label>

                                                                    <input type="text" name="contact_no"
                                                                        value="{{ $application->contact_no }}"
                                                                        class="form-control @error('contact_no') is-invalid @enderror">
                                                                    @error('contact_no')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="email">
                                                                        Email
                                                                    </label>
                                                                    <input id="email" type="email" name="email"
                                                                        value="{{ $application->email }}"
                                                                        class="form-control @error('last_name') is-invalid @enderror">
                                                                    @error('email')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="unit_no">
                                                                        Unit Number
                                                                    </label>
                                                                    <input id="unit_no" type="text"
                                                                        class="form-control" name="unit_no"
                                                                        value="{{ $application->unit_no }}"
                                                                        @error('unit_no') is-invalid @enderror>
                                                                    @error('unit_no')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>

                                                            {{-- <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="gate_code">
                                                                        Gate Code
                                                                    </label>

                                                                    <input id="gate_code" type="text"
                                                                        class="form-control" name="gate_code"
                                                                        value="{{ $application->gate_code }}"
                                                                        @error('gate_code') is-invalid @enderror>
                                                                    @error('gate_code')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div> --}}

                                                            {{-- <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="household_no">
                                                                        How many people live in your household ?
                                                                    </label>
                                                                    <input id="household_no" type="number"
                                                                        class="form-control" name="household_no"
                                                                        value="{{ $application->no_of_people_lived }}"
                                                                        @error('household_no') is-invalid @enderror>
                                                                    @error('household_no')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div> --}}

                                                            {{-- <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="christmas_household">
                                                                        @php $max_age = data_get($settings,'max_age_of_child_served'); @endphp
                                                                        How many members of the household will be
                                                                        {{ $max_age }} years of age or under on or
                                                                        before Christmas Day of this year ?
                                                                    </label>
                                                                    <input id="christmas_household" type="number"
                                                                        class="form-control" name="christmas_household"
                                                                        value="{{ $application->member_of_household }}"
                                                                        @error('christmas_household') is-invalid @enderror>
                                                                    @error('christmas_household')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div> --}}

                                                            <!-- <div class="col-sm-6">
                                                                                            <div class="form-group">
                                                                                                <label class="text-label" for="relationship_type">
                                                                                                    Are you the parent or legal guardian of the child or children listed below?
                                                                                                </label>
                                                                                                <input id="relationship_type" type="text" class="form-control" name="relationship_type" value="{{ $application->relationship_type }}" @error('relationship_type') is-invalid @enderror>
                                                                                                @error('relationship_type')
        <div class="error" style="color:red;">{{ $message }}</div>
    @enderror
                                                                                            </div>
                                                                                        </div> -->

                                                            <label class="text-label" for="relationship_type">
                                                                Please provide information on each child
                                                            </label>
                                                            <div class="row" id="dateContainer">
                                                                <div class="col-12 col-sm-12 date-row">
                                                                    <div class="row">
                                                                        @php $count = 1; @endphp
                                                                        @if ($child_info)
                                                                            @php $count = count($child_info);  @endphp
                                                                            @foreach ($child_info as $key => $value)
                                                                                <div class="col-sm-3 col-12">
                                                                                    <div class="form-group">
                                                                                        <input type="text"
                                                                                            name="ch_info[{{ $key }}][first_name]"
                                                                                            value="{{ $value->first_name }}"
                                                                                            class="form-control"
                                                                                            placeholder="First Name">
                                                                                    </div>
                                                                                    <div class="form-group">
                                                                                        <!-- Display child details here -->

                                                                                        <!-- Add the Delete button with data-child-id attribute -->
                                                                                        <button type="button"
                                                                                            class="btn btn-danger delete-child"
                                                                                            data-child-id="{{ $value->id }}">X</button>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-sm-3 col-12">
                                                                                    <div class="form-group">
                                                                                        <div
                                                                                            class="input-with-right-prefixTime">
                                                                                            <input type="text"
                                                                                                name="ch_info[{{ $key }}][last_name]"
                                                                                                value="{{ $value->last_name }}"
                                                                                                class="form-control"
                                                                                                placeholder="Last Name">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-sm-3 col-12">
                                                                                    <div class="form-group">
                                                                                        <div
                                                                                            class="input-with-right-prefixTime">
                                                                                            <select
                                                                                                name="ch_info[{{ $key }}][toy_type]"
                                                                                                class="form-control">
                                                                                                <option value="">Toy
                                                                                                    preference for this
                                                                                                    child?</option>

                                                                                                <option value="boy_toys"
                                                                                                    {{ !empty($value->toy_type) && $value->toy_type == 'boy_toys' ? 'selected' : '' }}>
                                                                                                    Boy Toys</option>
                                                                                                <option value="girl_toys"
                                                                                                    {{ !empty($value->toy_type) && $value->toy_type == 'girl_toys' ? 'selected' : '' }}>
                                                                                                    Girl Toys</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <div class="col-sm-3 col-12">
                                                                                    <div class="form-group">
                                                                                        <div
                                                                                            class="input-with-right-prefixTime">
                                                                                            {{-- <input type="date" name="ch_info[{{$key}}][dob]" value="{{ date('Y-m-d', strtotime($value->dob)) }}" class="form-control" max="{{ date('Y-m-d') }}"> 
                                                                                                <input type="date" name="ch_info[{{$key}}][dob]" value="{{ \Carbon\Carbon::createFromFormat('m-d-Y', $value->dob)->format('Y-m-d') }}" class="form-control" max="{{ date('Y-m-d') }}"> --}}
                                                                                            <select class="form-control"
                                                                                                name="ch_info[{{ $key }}][age_group]">
                                                                                                <option value="">Age
                                                                                                    of Child</option>
                                                                                                <option value="1"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '1' ? 'selected' : '' }}>
                                                                                                    Less than 1</option>
                                                                                                <option value="2"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '2' ? 'selected' : '' }}>
                                                                                                    1 - 2</option>
                                                                                                <option value="3"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '3' ? 'selected' : '' }}>
                                                                                                    3 - 4</option>
                                                                                                <option value="4"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '4' ? 'selected' : '' }}>
                                                                                                    5 - 7</option>
                                                                                                <option value="5"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '5' ? 'selected' : '' }}>
                                                                                                    8 - 10</option>
                                                                                                <option value="6"
                                                                                                    {{ !empty($value->age_group) && $value->age_group == '6' ? 'selected' : '' }}>
                                                                                                    11 - 14</option>
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        @endif

                                                                        @if (
                                                                            $errors->has('ch_info') ||
                                                                                $errors->has('ch_info.*.first_name') ||
                                                                                $errors->has('ch_info.*.last_name') ||
                                                                                $errors->has('ch_info.*.toy_type') ||
                                                                                $errors->has('ch_info.*.age_group'))
                                                                            <div class="error" style="color:red;">
                                                                                Please provide atleast one child
                                                                                information correctly.
                                                                            </div>
                                                                        @endif

                                                                        <div class="col-sm-12 col-12">
                                                                            <div class="form-group">
                                                                                <button id="addDateBtn" type="button"
                                                                                    class="btn btn-primary">Add</button>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-12">
                                                                <div class="form-group row">
                                                                    <label class="text-label" for="relationship_type">
                                                                        Do you want to list an alternate name to pick up the
                                                                        package in case you are unavailable?
                                                                    </label>
                                                                    <div class="col-sm-6">
                                                                        <div class="form-group">
                                                                            <input id="" type="text"
                                                                                name="alternate_person_first_name"
                                                                                value="{{ $application->alternate_person_first_name ?? '' }}"
                                                                                class="form-control"
                                                                                placeholder="First name">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-6">
                                                                        <div class="form-group">
                                                                            <input id="" type="text"
                                                                                name="alternate_person_last_name"
                                                                                value="{{ $application->alternate_person_last_name ?? '' }}"
                                                                                class="form-control"
                                                                                placeholder="Last name">
                                                                        </div>
                                                                    </div>
                                                                    {{-- @error('theaddress')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror --}}
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="relationship_type">
                                                                        Add packages for pick up ONLY on the following
                                                                        designated dates, times and locations ?
                                                                        (There are no options for delivery at this time.)
                                                                    </label>
                                                                    <div class="form-group">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="radio"
                                                                                name="theaddress" id="pickup"
                                                                                value="yes"
                                                                                {{ @$application->package_pickup_status == 'pickup' ? 'checked' : '' }}
                                                                                onclick="toggleDeliveryOption('pickup')">
                                                                            <label class="form-check-label"
                                                                                for="pickup">
                                                                                {{ __('form.pickup') }}
                                                                            </label>
                                                                        </div>
                                                                        <div id="pickup-options" style="display: none;">
                                                                            {{-- <div class="row">
                                                                                <div class="col-md-3">
                                                                                    <label for="pickup-date">{{ __('form.Date') }}:</label>
                                                                                    <input type="date" id="pickup-date" name="pickup_date" class="form-control" value="{{ old('pickup_date') }}">
                                                                                    <div class="error" id="pickup-date-error" style="color:red;"></div>
                                                                                </div>
                                                                                <div class="col-md-3">
                                                                                    <label for="pickup-time-begin">{{ __('form.Timebegin') }}:</label>
                                                                                    <input type="time" id="pickup-time-begin" name="pickup_time_begin" class="form-control" value="{{ old('pickup_time_begin') }}">
                                                                                    <div class="error" id="pickup-time-begin-error" style="color:red;"></div>
                                                                                </div>
                                                                                <div class="col-md-3">
                                                                                    <label for="pickup-time-end">{{ __('form.TimeEnd') }}:</label>
                                                                                    <input type="time" id="pickup-time-end" name="pickup_time_end" class="form-control" value="{{ old('pickup_time_end') }}">
                                                                                    <div class="error" id="pickup-time-end-error" style="color:red;"></div>
                                                                                </div>
                                                                                <div class="col-md-3">
                                                                                    <label for="pickup-location">{{ __('form.Location') }}:</label>
                                                                                    <input type="text" id="pickup-location" name="pickup_location" class="form-control" value="{{ old('pickup_location') }}">
                                                                                    <div class="error" id="pickup-location-error" style="color:red;"></div>
                                                                                </div>
                                                                            </div> --}}
                                                                            @foreach ($pickupTimes as $value)
                                                                                <div class="form-check custom-radio">
                                                                                    <input class="form-check-input"
                                                                                        type="radio"
                                                                                        name="picktimetime_id"
                                                                                        id="pickup-time-{{ $loop->iteration }}"
                                                                                        value="{{ $value->id }}"
                                                                                        {{ @$application->picktimetime_id == $value->id ? 'checked' : '' }}
                                                                                        {{ $value->total_applications >= $value->pickuplimit ? 'disabled' : '' }}>

                                                                                    <label class="form-check-label"
                                                                                        for="pickup-time-{{ $loop->iteration }}">
                                                                                        <span
                                                                                            class="date">{{ __('form.Date') }}:
                                                                                            {{ \Carbon\Carbon::parse($value->pickup_date)->format('F j, Y') }}</span>
                                                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                        <span
                                                                                            class="time">{{ __('form.between') }}:
                                                                                            {{ \Carbon\Carbon::parse($value->pickup_time_begin)->format('g:i A') }}
                                                                                            -
                                                                                            {{ \Carbon\Carbon::parse($value->pickup_time_end)->format('g:i A') }}</span>
                                                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                        <span
                                                                                            class="location">{{ __('form.Location') }}:
                                                                                            {{ $value->pickup_location }}</span>
                                                                                        @if ($value->total_applications >= $value->pickuplimit)
                                                                                            <span class="text-full"
                                                                                                style="color: #c10230; font-size: small;">&nbsp;&nbsp;&nbsp;&nbsp;{{ __('form.dateisfull') }}</span>
                                                                                        @endif
                                                                                    </label>
                                                                                </div>
                                                                            @endforeach




                                                                            <div class="error"
                                                                                id="thepickupaddress-error"
                                                                                style="color:red;"></div>

                                                                        </div>

                                                                        <div style="margin-top: 20px;"></div>
                                                                        <!-- Gap for visual separation -->

                                                                        {{-- @if (isset($deliverydates))
                                                                            <div class="form-check ">
                                                                                <input class="form-check-input"
                                                                                    type="radio" name="theaddress"
                                                                                    id="delivery" value="no"
                                                                                    {{ @$application->package_pickup_status == 'delivery' ? 'checked' : '' }}
                                                                                    onclick="toggleDeliveryOption('delivery')">
                                                                                <label class="form-check-label"
                                                                                    for="delivery">
                                                                                    {{ __('form.delivery') }}
                                                                                </label>
                                                                            </div>
                                                                            <div class="error" id="theaddress-error"
                                                                                style="color:red;"></div>
                                                                            <div id="delivery-options"
                                                                                style="display: none;">
                                                                                @foreach ($deliverydates as $value)
                                                                                    <div class="form-check custom-radio">
                                                                                        <input class="form-check-input"
                                                                                            type="radio"
                                                                                            name="delivery_date"
                                                                                            id="delivery-time-{{ $loop->iteration }}"
                                                                                            value="{{ $value->id }}"
                                                                                            {{ @$application->deliverydate_id == $value->id ? 'checked' : '' }}
                                                                                            {{ $value->total_delivery_applications >= $value->deliverylimit ? 'disabled' : '' }}>

                                                                                        <label class="form-check-label"
                                                                                            for="delivery-time-{{ $loop->iteration }}">
                                                                                            <span
                                                                                                class="date">{{ __('form.Date') }}:
                                                                                                {{ \Carbon\Carbon::parse($value->date)->format('F j, Y') }}</span>
                                                                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                            <span
                                                                                                class="time">{{ __('form.between') }}:
                                                                                                {{ \Carbon\Carbon::parse($value->time_begin)->format('g:i A') }}
                                                                                                -
                                                                                                {{ \Carbon\Carbon::parse($value->time_end)->format('g:i A') }}</span>
                                                                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                            @if ($value->total_delivery_applications >= $value->deliverylimit)
                                                                                                <span class="text-full"
                                                                                                    style="color: #c10230; font-size: small;">&nbsp;&nbsp;&nbsp;&nbsp;{{ __('form.dateisfull') }}</span>
                                                                                            @endif
                                                                                        </label>
                                                                                    </div>
                                                                                @endforeach

                                                                                <div class="error"
                                                                                    id="delivery-date-error"
                                                                                    style="color:red;"></div>

                                                                            </div>
                                                                        @endif --}}
                                                                    </div>
                                                                    @error('theaddress')
                                                                        <div class="error" style="color:red;">
                                                                            {{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="inner-div">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-end">
                                                            <button type="submit"
                                                                class="btn btn-primary btn-form submit-btn">Submit</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include jQuery UI CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- Include jQuery UI JavaScript -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            var i = '';

            $("#addDateBtn").click(function() {

                ++i;
                var newDateRow = `<div class=" row date-row">
                <div class="col-sm-3 col-12">
                <div class="form-group">
                    <input type="text" name="ch_info[${i}][first_name]" class="form-control" placeholder="First Name">
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <input type="text" name="ch_info[${i}][last_name]" class="form-control" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <select name="ch_info[${i}][toy_type]" class="form-control">
                            <option value="">Toy preference for this child?</option>
                            <option value = "boy_toys">Boy Toys</option>
                            <option value = "girl_toys">Girl Toys</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="left-input">
                        <select class="form-control" name="ch_info[${i}][age_group]">
                            <option value="">Age of Child</option>
                            <option value="1">Less than 1</option>
                            <option value="2">1 - 2</option>
                            <option value="3">3 - 4</option>
                            <option value="4">5 - 7</option>
                            <option value="5">8 - 10</option>
                            <option value="6">11 - 14</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-12">
                <div class="form-group">
                    <button type="button" class="btn btn-danger remove-btn">Remove</button>
                </div>
            </div></div>`;
                $("#dateContainer").append(newDateRow);
            });
            // Check the number of delete buttons
            const deleteButtons = $('.delete-child');

            // If there's only one delete button, hide it
            if (deleteButtons.length === 1) {
                deleteButtons.hide();
            }

            $('.delete-child').click(function() {
                // Get the child ID from the data-child-id attribute
                const childId = $(this).data('child-id');
                $.ajax({
                    url: "{{ route('backend.delete-child-detail') }}",
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "id": childId
                    },
                    success: function() {

                        location.reload();
                    },
                    error: function() {

                    }
                });
            });

            // Remove button click event (event delegation)
            $("#dateContainer").on("click", ".remove-btn", function() {
                $(this).closest(".date-row").remove();
            });


            function getCurrentDate() {
                var today = new Date();
                var day = today.getDate();
                var month = today.getMonth() + 1;
                var year = today.getFullYear();

                if (day < 10) {
                    day = '0' + day;
                }
                if (month < 10) {
                    month = '0' + month;
                }
                return year + '-' + month + '-' + day;
            }


        });
    </script>

    <script>
        $(document).ready(function() {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
            $("#cityArea").addClass("d-none");
            $("#stateArea").addClass("d-none");
            $("#zipArea").addClass("d-none");

        });
    </script>


    </script>

    <script>
        $(document).ready(function() {
            //$(".shw_pickup").addClass('d-none');

            if ($('.pickup_d').prop('checked')) {
                $(".shw_pickup").removeClass('d-none');
            }
            $(".pickup_d").click(function() {
                $(".shw_pickup").removeClass('d-none');
            })
            $(".delivery_d").click(function() {
                $(".shw_pickup").addClass('d-none');
            })
        });
    </script>
    <script>
        function toggleDeliveryOption(option) {
            document.getElementById('pickup-options').style.display = option === 'pickup' ? 'block' : 'none';
            document.getElementById('delivery-options').style.display = option === 'delivery' ? 'block' : 'none';
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Check for the pre-selected option from the database
            const initialPickupStatus = @json(@$application->package_pickup_status);
            const initialPickupTimeId = @json(@$application->picktimetime_id);
            const deliveryDateValue = @json(@$application->delivery_date);

            // Set initial state based on pre-selected option
            if (initialPickupStatus === 'pickup') {
                document.getElementById('pickup').checked = true;
                toggleDeliveryOption('pickup');
                // Check if there is a pre-selected pickup time
                if (initialPickupTimeId) {
                    const pickupTimeInput = document.querySelector(
                        `input[name="picktimetime_id"][value="${initialPickupTimeId}"]`);
                    if (pickupTimeInput) {
                        pickupTimeInput.checked = true;
                    }
                }
            } else if (initialPickupStatus === 'delivery') {
                document.getElementById('delivery').checked = true;
                toggleDeliveryOption('delivery');
                // Check if there is a pre-selected delivery date
                if (deliveryDateValue) {
                    const deliveryDateInput = document.querySelector(
                        `input[name="delivery_date"][value="${deliveryDateValue}"]`);
                    if (deliveryDateInput) {
                        deliveryDateInput.checked = true;
                    }
                }
            } else {
                // If no status is set, don't select anything by default
                document.getElementById('pickup-options').style.display = 'none';
                document.getElementById('delivery-options').style.display = 'none';
            }

            // Add event listeners to radio buttons
            document.getElementById('pickup').addEventListener('change', function() {
                if (this.checked) toggleDeliveryOption('pickup');
            });
            document.getElementById('delivery').addEventListener('change', function() {
                if (this.checked) toggleDeliveryOption('delivery');
            });
        });

        // ... rest of your script remains the same

        document.getElementById('question-form').addEventListener('submit', function(event) {
            event.preventDefault();
            let isValid = true;

            // Clear previous error messages
            document.querySelectorAll('.error').forEach(function(el) {
                el.textContent = '';
            });

            const selectedOption = document.querySelector('input[name="theaddress"]:checked');
            const deliveryDate = document.querySelector('input[name="delivery_date"]:checked');
            const pickupTimes = document.querySelectorAll('input[name="picktimetime_id"]');
            let pickupTimeSelected = false;

            // Check if theaddress is selected
            if (!selectedOption) {
                isValid = false;
                document.getElementById('theaddress-error').textContent =
                    '{{ __('form.pleaseselectpickupdelievry') }}';
            } else if (selectedOption.value === 'no') {
                if (!deliveryDate) {
                    isValid = false;
                    document.getElementById('delivery-date-error').textContent =
                        '{{ __('form.alt_commonReq_feild') }}';
                }
            } else if (selectedOption.value === 'yes') {
                // Check if any of the pickup time options is selected
                pickupTimes.forEach(function(pickupTime) {
                    if (pickupTime.checked) {
                        pickupTimeSelected = true;
                    }
                });
                if (!pickupTimeSelected) {
                    isValid = false;
                    document.getElementById('thepickupaddress-error').textContent =
                        '{{ __('form.alt_commonReq_feild') }}';
                }
            }

            if (isValid) {
                this.submit(); // Submit the form if all validations pass
            }
        });
    </script>
    <script>
        $(function() {
            let isAdditionalAddressSearch = false;
            let $addressInput = $("#address");
            let $loader = $("#loadingSpinner");

            $addressInput.autocomplete({
                source: function(request, response) {
                    if (isAdditionalAddressSearch) {
                        isAdditionalAddressSearch = false;
                        return;
                    }

                    // Show loader
                    $loader.show();

                    $.ajax({
                        url: "{{ route('address.autocomplete') }}",
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                            response(data.map(function(item) {
                                return {
                                    label: item.label,
                                    value: item.value,
                                    entries: item.entries,
                                    showEntriesLink: item.showEntriesLink,
                                    street_line: item.street_line,
                                    secondary: item.secondary,
                                    city: item.city,
                                    state: item.state,
                                    zipcode: item.zipcode
                                };
                            }));
                        },
                        error: function(xhr) {
                            console.error("AJAX Error: " + xhr.statusText);
                        },
                        complete: function() {
                            // Hide loader
                            $loader.hide();
                        }
                    });
                },
                minLength: 3,
                select: function(event, ui) {
                    if (ui.item.showEntriesLink) {
                        event.preventDefault(); // Prevent default selection behavior
                        fetchAdditionalAddresses(ui.item);
                    } else {
                        console.log("Selected Address:", ui.item.value);
                        // Handle single address selection here
                    }
                }
            }).autocomplete("instance")._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<div>" + item.label + (item.showEntriesLink ?
                        "<span class='autocomplete-address-count'> + " + item.entries +
                        " addresses ></span>" : "") + "</div>")
                    .appendTo(ul);
            };

            function fetchAdditionalAddresses(item) {
                var search = item.street_line + (item.secondary ? ' ' + item.secondary : '');
                var selected = item.street_line +
                    (item.secondary ? ' ' + item.secondary : '') +
                    ' (' + item.entries + ') ' +
                    item.city + ' ' +
                    item.state + ' ' +
                    item.zipcode;

                // Show loader
                $loader.show();

                $.ajax({
                    url: "{{ route('address.AddressautocompleteAdditionalAddress') }}",
                    dataType: "json",
                    data: {
                        search: search,
                        selected: selected
                    },
                    success: function(data) {
                        isAdditionalAddressSearch = true;
                        $addressInput.autocomplete("option", "source", data);
                        $addressInput.val(search).autocomplete("search", search);
                    },
                    error: function(xhr) {
                        console.error("AJAX Error: " + xhr.statusText);
                    },
                    complete: function() {
                        // Hide loader
                        $loader.hide();
                    }
                });
            }

            // Add an input event listener to detect changes in the address field
            $addressInput.on('input', function() {
                isAdditionalAddressSearch = false;
                $(this).autocomplete("option", "source", function(request, response) {
                    // Show loader
                    $loader.show();

                    $.ajax({
                        url: "{{ route('address.autocomplete') }}",
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                            response(data.map(function(item) {
                                return {
                                    label: item.label,
                                    value: item.value,
                                    entries: item.entries,
                                    showEntriesLink: item.showEntriesLink,
                                    street_line: item.street_line,
                                    secondary: item.secondary,
                                    city: item.city,
                                    state: item.state,
                                    zipcode: item.zipcode
                                };
                            }));
                        },
                        error: function(xhr) {
                            console.error("AJAX Error: " + xhr.statusText);
                        },
                        complete: function() {
                            // Hide loader
                            $loader.hide();
                        }
                    });
                });
            });
        });
    </script>












    <script>
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}'
            });
        @endif
        @if (session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}'
            });
        @endif


        $(document).ready(function() {
            // Hide the language-options-container by default
            $('.language-options-container').hide();

            // Check the selected language on page load and show/hide the language-options-container accordingly
            if ($('#spanish').prop('checked')) {
                $('.language-options-container').show();
            } else {
                $('.language-options-container').hide();
            }

            // Show/hide the language-options-container based on the selected language
            $("#spanish").click(function() {
                $('.language-options-container').show();
            });

            $("#english").click(function() {
                $('.language-options-container').hide();
            });

            $('#lang-change').change(function(e) {
                console.log('hi');
                location.href = `{{ route('switchlocale') }}/${ $(this).val() }`;
            })
        });
        document.addEventListener('DOMContentLoaded', function() {
            const verifyButton = document.getElementById('verifyButton');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const addressInput = document.getElementById('address');
            const addressError = document.getElementById('addressError');

            let isErrorShown = false;

            function showAddressError(message) {
                if (!isErrorShown) {
                    addressError.innerText = message;
                    isErrorShown = true;
                }
            }

            function clearAddressError() {
                addressError.innerText = '';
                isErrorShown = false;
            }

            verifyButton.addEventListener('click', function() {
                var address = addressInput.value;
                var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                // Hide the address sections initially
                document.querySelector('.valid-address-section').style.display = 'none';
                document.querySelector('.invalid-address-section').style.display = 'none';

                clearAddressError();

                if (address === "") {
                    showAddressError('{{ __('form.alt_commonReq_feild') }}');
                    return;
                }

                // Show spinner and disable input and button
                loadingSpinner.style.display = 'block';
                verifyButton.disabled = true;
                addressInput.disabled = true;

                fetch('{{ route('frontend.user.address.verification.api') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            address: address
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data[0].components) {

                            var components = data[0].components;
                            var metadata = data[0].metadata;
                            var outsidedata = data[0];
                            if (components.city_name.toLowerCase() !== 'austin') {
                                Swal.fire({
                                    title: 'Disqualification',
                                    text: '{{ __('form.NonAustinMsg') }}',
                                    icon: 'warning',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        // Clear the address input field
                                        document.getElementById('address').value = '';
                                    }
                                });
                                return;
                            }

                            document.querySelector('.valid-address-section').style.display = 'block';
                            document.querySelector('.invalid-address-section').style.display = 'none';

                            document.getElementById('primaryNumber').textContent = outsidedata
                                .delivery_line_1 || '';
                            document.getElementById('streetName').textContent = components
                                .street_name || '';
                            document.getElementById('streetSuffix').textContent = components
                                .street_suffix || '';
                            document.getElementById('city').textContent = components.city_name || '';
                            document.getElementById('state').textContent = components
                                .state_abbreviation || '';
                            document.getElementById('zipCode').textContent = components.zipcode || '';
                            document.getElementById('latitude').textContent = metadata.latitude || '';
                            document.getElementById('longitude').textContent = metadata.longitude || '';

                            // Update the input field with the formatted address
                            addressInput.value =
                                `${outsidedata.delivery_line_1}, ${components.city_name}, ${components.state_abbreviation} ${components.zipcode}`;
                        } else {
                            document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        document.querySelector('.valid-address-section').style.display = 'none';
                        document.querySelector('.invalid-address-section').style.display = 'block';
                    })
                    .finally(() => {
                        // Hide spinner and re-enable input and button
                        loadingSpinner.style.display = 'none';
                        verifyButton.disabled = false;
                        addressInput.disabled = false;
                    });
            });

            document.getElementById('signupForm').addEventListener('submit', function(event) {
                var address = addressInput.value;
                var valid = true;

                clearAddressError();

                // Validate address
                if (!address) {
                    showAddressError('{{ __('form.alt_commonReq_feild') }}');
                    valid = false;
                }

                // If form is not valid, prevent submission
                if (!valid) {
                    event.preventDefault();
                }
            });
        });
    </script>

@endsection