@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>
@section('content')
    <div class="table-responsive custom-table-s1">
        @if (session()->has('success'))
            <div class="alert alert-success">{!! session('success') !!}</div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger">{!! session('error') !!}</div>
        @endif
        <table class="participant_table" width="100%">
            <thead>
                <tr>
                    <th> </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">
                                            <form class="m-form m-form--state" name="frm-create" id="frm-create"
                                                method="POST" action="{{ route('backend.post-send-emails') }}">
                                                @csrf
                                                @method('POST')
                                                <div class="outer-div">
                                                    <div class="inner-div">
                                                        <div class="form-group row">

                                                            <div class="col-sm-12">
                                                                <div class="question_box">
                                                                    <div class="main_question">

                                                                        <div class="input_fields">
                                                                            <div class="form-group">
                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="radio" name="date_type"
                                                                                        id="pickup" value="yes"
                                                                                        onclick="toggleDeliveryOption('pickup')">
                                                                                    <label class="form-check-label"
                                                                                        for="pickup">Pickup
                                                                                    </label>
                                                                                </div>
                                                                                <div id="pickup-options"
                                                                                    style="display: none;">

                                                                                    @foreach ($pickup_dates 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 }}">

                                                                                            <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>
                                                                                            </label>
                                                                                        </div>
                                                                                    @endforeach
                                                                                    <div class="error"
                                                                                        id="thepickupaddress-error"
                                                                                        style="color:red;"></div>

                                                                                </div>

                                                                                {{-- delivered by volunteers  --}}
                                                                                {{-- @php
                                                                                    $finaldate = Session::has(
                                                                                        'finaldate',
                                                                                    )
                                                                                        ? Session::get('finaldate')[0]
                                                                                        : [];
                                                                                @endphp
                                                                                @if (isset($delivery_date))
                                                                                    <div class="form-check ">
                                                                                        <input class="form-check-input"
                                                                                            type="radio" name="date_type"
                                                                                            id="delivery" value="no"
                                                                                            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 ($delivery_date 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 }}">

                                                                                                <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;
                                                                                                </label>
                                                                                            </div>
                                                                                        @endforeach

                                                                                        <br>
                                                                                    </div>
                                                                                @endif --}}

                                                                                {{-- delivered by volunteers end --}}



                                                                                <div class="form-check">
                                                                                    <input class="form-check-input"
                                                                                        type="radio" name="date_type"
                                                                                        id="incomplete" value="incomplete"
                                                                                        onclick="toggleDeliveryOption('incomplete')">
                                                                                    <label class="form-check-label"
                                                                                        for="incomplete">
                                                                                        Incomplete Applications
                                                                                    </label>
                                                                                </div>
                                                                                @error('date_type')
                                                                                    <div class="error" style="color:red;">
                                                                                        {{ $message }}</div>
                                                                                @enderror
                                                                                @error('picktimetime_id')
                                                                                    <div class="error" style="color:red;">
                                                                                        {{ $message }}</div>
                                                                                @enderror
                                                                                @error('delivery_date')
                                                                                    <div class="error" style="color:red;">
                                                                                        {{ $message }}</div>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="subject">
                                                                        Subject
                                                                    </label>
                                                                    <input type="text" name="subject" id="subject"
                                                                        value="{{ old('subject') }}"
                                                                        class="form-control @error('subject') is-invalid @enderror">

                                                                    @error('subject')
                                                                        <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="subject">
                                                                        Message
                                                                    </label>
                                                                    <textarea class="form-control" name="message" id="message">{{ old('message') }}</textarea>

                                                                    @error('subject')
                                                                        <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></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');
            })
        });

        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(@$isApplicationForm->package_pickup_status);
            const initialPickupTimeId = @json(@$isApplicationForm->picktimetime_id);
            const deliveryDateValue = @json(@$isApplicationForm->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>

@endsection