@if ($single_order != null)

    <section class="delivery_cart">
        <div class="container px-4 px-lg-0">
            <div class="row">
                <div class="col-md-6 col-lg-7 col-12 delivery_address">
                    <div class="inner">
                        <div class="address_details_2 my-md-4 p-md-0">
                            <div class="row">
                                <div class="suces_order_id1">
                                    <h5 class="py-3" style="font-weight:700;"> 🍲 Food Preparation Started! </h5>

                                    <p class=" pt-2 ps-lg-4 ">Thank you for your order! We want to let you know that our
                                        food is homemade and prepared fresh
                                        to order. This means it may take a bit longer to deliver, but we promise it will
                                        be worth the
                                        wait!</p>

                                    <p class=" pt-2 ps-lg-4">Thank you for your patience and understanding.</p>
                                </div>
                                <div class="col-12 order_status">
                                    <h3 class="mt-3">Order Status</h3>
                                </div>
                            </div>

                            @if ($single_order->GTS->order_status != 'cancelled')
                                <div class="login_details ">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2 pt-md-3 pt-3 order_pls">
                                            <img src="{{ asset('images/tick.png') }}" width="30px" class="tick_icon">
                                            <div class="dotted-line ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text  ps-md-3 px-2 pt-md-3 pt-3">
                                            <h6 class="p-0 m-0 fw-bold">Order Placed</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->placed_time }}</p>

                                        </div>
                                    </div>
                                </div>
                                <div class="address_details">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if (
                                                    $single_order->GTS->order_status == 'process' ||
                                                        $single_order->GTS->order_status == 'ready' ||
                                                        $single_order->GTS->order_status == 'dispatched' ||
                                                        $single_order->GTS->order_status == 'delivered' ||
                                                        $single_order->GTS->order_status == 'rider_assigned' ||
                                                        $single_order->GTS->order_status == 'pickup_shop_reached' ||
                                                        $single_order->GTS->order_status == 'delivery_location_reached')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text log_text_1 ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Order in Process</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->accept_time }}</p>

                                        </div>

                                    </div>
                                </div>

                                <div class="ready_order">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if (
                                                    $single_order->GTS->order_status == 'ready' ||
                                                        $single_order->GTS->order_status == 'dispatched' ||
                                                        $single_order->GTS->order_status == 'delivered' ||
                                                        $single_order->GTS->order_status == 'rider_assigned' ||
                                                        $single_order->GTS->order_status == 'pickup_shop_reached' ||
                                                        $single_order->GTS->order_status == 'delivery_location_reached')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text log_text_1 ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Food Marked Ready</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->ready_time }}</p>

                                        </div>

                                    </div>
                                </div>

                                <div class="pick_up">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if (
                                                    $single_order->GTS->order_status == 'dispatched' ||
                                                        $single_order->GTS->order_status == 'delivered' ||
                                                        $single_order->GTS->order_status == 'delivery_location_reached')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text log_text_1 ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Order Picked Up</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->dispatch_time }}</p>

                                        </div>

                                    </div>
                                </div>
                                <div class="Delivered ">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if ($single_order->GTS->order_status == 'delivered')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                        </div>
                                        <div class="log_text ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Delivered</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->delivered_time }}</p>


                                        </div>
                                    </div>
                                </div>
 @if (!is_null($webhook) && $webhook->tracking_url != 'https://shiprocket.co/tracking/')
    <a href="{{ $webhook->tracking_url }}" style="display: flex; justify-content: center; align-items: center;" target="_blank">
        <button class="track_btn" style="border-radius: 15px; font-size: 16px; width: 100%; font-weight: 700; font-size: 18px;">Track Order</button>
    </a>
@endif

                        </div>
                    </div>
                    @if (
                        $single_order->GTS->order_status == 'ready' ||
                            $single_order->GTS->order_status == 'rider_assigned' ||
                            $single_order->GTS->order_status == 'pickup_shop_reached' ||
                            $single_order->GTS->order_status == 'delivery_location_reached' ||
                            $single_order->GTS->order_status == 'delivered' ||
                            $single_order->GTS->order_status == 'dispatched')
                        <div class="inner">
                            <div class="address_details_1 my-md-4 p-md-0">
                                <div class="row">
                                    <div class="col-12 order_status">
                                        <h3>Delivery Status</h3>
                                    </div>
                                </div>
                                <div class="login_details ">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2 pt-md-3 pt-3 order_pls">
                                            @if ($single_order)
                                                @if (
                                                    $single_order->GTS->order_status == 'rider_assigned' ||
                                                        $single_order->GTS->order_status == 'pickup_shop_reached' ||
                                                        $single_order->GTS->order_status == 'delivery_location_reached' ||
                                                        $single_order->GTS->order_status == 'delivered' ||
                                                        $single_order->GTS->order_status == 'dispatched')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text  ps-md-3 px-2 pt-md-3 pt-3">
                                            <h6 class="p-0 m-0 fw-bold">Rider Assigned</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->delivery_partner_assigned_time }}
                                            </p>

                                        </div>
                                    </div>
                                </div>
                                <div class="address_details">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if (
                                                    $single_order->GTS->order_status == 'pickup_shop_reached' ||
                                                        $single_order->GTS->order_status == 'delivery_location_reached' ||
                                                        $single_order->GTS->order_status == 'delivered' ||
                                                        $single_order->GTS->order_status == 'dispatched')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text log_text_1 ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Kitchen Reached</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->shop_arrived_time }}</p>

                                        </div>

                                    </div>
                                </div>

                                <div class="ready_order">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if ($single_order->GTS->order_status == 'delivery_location_reached' || $single_order->GTS->order_status == 'delivered')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                            <div class="dotted-line_1 ">
                                                <img src="{{ asset('images/Line 5.png') }}">
                                            </div>
                                        </div>
                                        <div class="log_text log_text_1 ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Delivery Location Reached</h6>
                                            <p class="pt-lg-2">
                                                {{ $single_order->GTS->customer_doorstep_arrival_time }}</p>

                                        </div>

                                    </div>
                                </div>


                                <div class="Delivered ">
                                    <div class="row_1">
                                        <div class="log_img ps-md-3 px-2">
                                            @if ($single_order)
                                                @if ($single_order->GTS->order_status == 'delivered')
                                                    <img src="{{ asset('images/tick.png') }}" width="30px">
                                                @else
                                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                                @endif
                                            @else
                                                <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                            @endif
                                        </div>
                                        <div class="log_text ps-md-3 px-2">
                                            <h6 class="p-0 m-0 fw-bold">Delivered</h6>
                                            <p class="pt-lg-2">{{ $single_order->GTS->delivered_time }}</p>


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

                            </div>
                        </div>
                    @endif
                @else
                    <div class="login_details ">
                        <div class="row_1">
                            <div class="log_img ps-md-3 px-2 pt-md-3 pt-3 order_pls">
                                <img src="{{ asset('images/tick.png') }}" width="30px" class="tick_icon">
                                <div class="dotted-line ">
                                    <img src="{{ asset('images/Line 5.png') }}">
                                </div>
                            </div>
                            <div class="log_text  ps-md-3 px-2 pt-md-3 pt-3">
                                <h6 class="p-0 m-0 fw-bold">Order Placed</h6>
                                <p class="pt-lg-2">{{ $single_order->GTS->placed_time }}</p>

                            </div>
                        </div>
                    </div>
                    <div class="address_details">
                        <div class="row_1">
                            <div class="log_img ps-md-3 px-2">
                                @if ($single_order)
                                    @if ($single_order->GTS->order_status == 'cancelled')
                                        <img src="{{ asset('images/wrong.png') }}" width="30px">
                                    @else
                                        <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                    @endif
                                @else
                                    <img src="{{ asset('images/Ellipse 31.png') }}" width="30px">
                                @endif

                            </div>
                            <div class="log_text log_text_1 ps-md-3 px-2">
                                <h6 class="p-0 m-0 fw-bold">Cancelled</h6>
                                <p class="pt-lg-2">{{ $single_order->GTS->cancel_time }}</p>
                                <p class="" style="color:red;">Reason:{{ $single_order->GTS->cancel_reason }}
                                </p>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
@endif

</div>
<div class="col-md-6 col-lg-5 delivery-payment_details col-12 my-md-4 my-3 ">
    <img src="{{ asset('images/pattern_top.png') }}" class=" top-pattern">
    <div class="overall_cart  pb-3 ">
        <div class="adjust_class px-md-4 pt-md-3 pt-3 px-4">
            <div class="suces_order_id">
                <div class="row pt-lg-3 pt-3">
                    <div class="col-lg-5 col-5">
                        <div class="order_id d-flex">
                            <div class="order_inner">
                                <img src="{{ asset('images/orderid.png') }}" width="45px" alt="" />
                            </div>
                            <div class="order-num">
                                <p>Order ID <br> <span class="fw-bold">{{ $single_order->GTS->order_string }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-6">
                        <div class="order_id d-flex">
                            <div class="order_inner">
                                <img src="{{ asset('images/ordertype.png') }}" width="45px" alt="" />
                            </div>
                            <div class="order-num">
                                <p>Order Type <br> <span class="fw-bold">Instant Order</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-12 pb-2 pb-lg-3 px-4">
                        <div class="order_date ">
                            @if ($single_order)
                                <p>Order Date: <span
                                        class="fw-bold">{{ $single_order->GTS->order_date_format }}</span>
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            {{-- timer load start --}}

            <div class="cancell">
                @if ($single_order->GTS->order_status != 'cancelled')

                    @if ($cancel_deadline > $current_time)
                        <a style="cursor: pointer;">
                            <div class="cnsell_order my-md-3 my-3" id="openPopup1">
                                <div class="date_img mx-md-2 mx-2">
                                    <img src="{{ asset('images/multi_icon.png') }}" width="35px">
                                </div>
                                @if (abs($remaining_seconds) > 0)
                                    <div class="date_text">
                                        <p class="mb-0 pb-0 text-white">Cancel Order
                                            <span class="date_apr text-white" id="timer">
                                                {{ abs($remaining_seconds) }}

                                            </span>
                                        </p>
                                    </div>
                                @endif
                            </div>
                        </a>
                    @endif
                @endif
                <div id="overlay1" class="overlay">
                    <div class="popup-content">
                        <div class="status_pop py-2">
                            <div class="status_pop_img">
                                <img src="{{ asset('images/pop_status.png') }}" class="pop_edit">
                                <h6 class="py-3 col-12 col-lg-12">Are you sure you want to cancel this
                                    order?</h6>
                                <div class="status_button row mt-3">
                                    <div class="one_sttus col-lg-6 col-6">
                                        <button class="cancel_button_pop py-2 mx-2" id="cancel1">CANCEL</button>
                                    </div>
                                    <div class="one_sttus col-lg-6 col-6">
                                        <button class="ok_button_pop py-2 mx-2" id="ok1">OK</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Second Popup -->
                <div id="overlay2" class="overlay">

                    <div class="popup-content mx-4 mx-lg-0">
                        <div class="cancel_pop_2 px-3 pb-3">
                            <div class="res_can">
                                <h6 class="mt-3">Enter your reason for cancellation</h6>
                            </div>
                            <div class="pop_line col-lg-12 p-0 m-0 my-4"></div>
                            <div class="cacel_pop_text">
                                <h6 class="">Enter your reason for cancellation</h6>
                            </div>
                            <div class="popup_form col-lg-12 mt-3">
                                <div class="form_field_main mt-3">
                                    <div class="form_field_grp">
                                        <span class="form_field_icon_1 field_icon_crcl">
                                            <img src="{{ asset('images/pop_edit.png') }}" class="edit_pop_text">
                                        </span>
                                        <textarea placeholder="Enter your reason" id="cancel_Reason" class="form_field edit_popup"
                                            wire:model.defer="cancel_reason" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="pop_line col-lg-12 p-0 m-0 my-3"></div>
                            <div class="choose_order">
                                @if ($payment_name == 'razorpay' || $payment_name == 'razorypay_with_wallet')
                                    <div class="order_text_4">
                                        <p class="mb-0 pb-0 my-md-3 my-4 text-left">Refund Via</p>
                                    </div>
                                    <div class="order_box_4 p-2 pt-md-1">
                                        <div class="instant mx-md-1 mx-2">
                                            <input class="accented mx-2" type="checkbox" id="wallet-checkbox"
                                                wire:model.defer="wallet" required>
                                            <label for="wallet-checkbox">Wallet</label>
                                        </div>
                                        <div class="pre mx-md-1 mx-2">
                                            <input class="accented mx-2" type="checkbox" id="account-checkbox"
                                                wire:model.defer="account" required>
                                            <label for="account-checkbox">Bank Account</label>
                                        </div>
                                    </div>
                                @elseif($payment_name == 'paid_with_wallet' || $payment_name == 'cod_with_wallet')
                                    <div class="order_text_4">
                                        <p class="mb-0 pb-0 my-md-3 my-4 text-left">Refund Via</p>
                                    </div>
                                    <div class="order_box_4 p-2 pt-md-1">
                                        <div class="instant mx-md-1 mx-2">
                                            <input class="accented mx-2" type="checkbox" id="wallet-checkbox"
                                                wire:model.defer="wallet" required>
                                            <label for="wallet-checkbox">Wallet</label>
                                        </div>
                                    </div>
                                @endif
                                <!-- Status buttons -->
                                <div class="status_button row mt-3">
                                    <div class="one_sttus col-lg-6 col-6">
                                        <button class="cancel_button_pop py-2 mx-2" id="dismiss2"
                                            onclick="dismissPopup2()">Dismiss</button>
                                    </div>
                                    <div class="one_sttus col-lg-6 col-6">
                                        <button class="ok_button_pop py-2 mx-2" id="ok2"
                                            onclick="cancel_order()">Cancel Order</button>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
            </div>

            {{-- <div class="cancell">
                    <div id="overlay3" class="overlay">
                    <div class="popup-content mx-4 mx-lg-0">
                        <div class="px-3 py-4">
                            <div class="d-flex justify-content-end">

                                <button type="button" class="btn-close" aria-label="Close"
                                    onclick="closeOverlay()"></button>
                            </div>
                            <div class="success_img mt-lg-5 pt-5 pt-lg-0">
                                <div class="icon_box icon_box_cntr icon_box_larg text-center">
                                    <span>
                                        <img src="{{ asset('images/check_21.png') }}" />
                                        <div class="circle_wave delay1"></div>
                                        <div class="circle_wave delay2"></div>
                                        <div class="circle_wave delay3"></div>
                                        <div class="circle_wave delay4"></div>
                                    </span>
                                </div>
                            </div>
                            <div class="modal-body success_text mt-5">
                                <h6>Order cancellation successful</h6>
                                <p>Your Order has been successfully cancelled.</p>
                            </div>
                        </div>
                    </div>
                </div> --}}





            <!-- Second Popup -->
            {{-- <div id="overlay2" class="overlay">
                        <div class="">
                            <div class="popup-content mx-4 mx-lg-0">
                                <div class="cancel_pop_2 px-3 pb-3">
                                    <div class="res_can">
                                        <h6 class="mt-3">Enter your reason for cancellation</h6>
                                    </div>


                                    <div class="pop_line col-lg-12 p-0 m-0 my-4">

                                    </div>

                                    <div class="cacel_pop_text">
                                        <h6 class="">Enter your reason for cancellation</h6>
                                    </div>

                                    <div class="popup_form  col-lg-12 mt-3">
                                        <div class="form_field_main mt-3">
                                            <div class="form_field_grp">
                                                <span class="form_field_icon_1 field_icon_crcl"><img
                                                        src="{{ asset('images/pop_edit.png') }}"
                                                        class="edit_pop_text"></span>
                                                <textarea type="text" placeholder="Enter your reason" id="cancel_Reason" class="form_field edit_popup"
                                                      required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pop_line col-lg-12 p-0 m-0 my-3">

                                    </div>
                                    <div class="choose_order">
                                        @if ($payment_name == 'razorpay')
                                            <div class="order_text_4">
                                                <p class="mb-0 pb-0 my-md-3 my-4 text-left">Choose Order Type</p>
                                            </div>
                                            <div class="order_box_4 p-2 pt-md-1">
                                                <div class="instant mx-md-1 mx-2 ">
                                                    <input class="accented mx-2 " type="checkbox" id="accented-light"
                                                        checked wire:model.defer ="wallet" required>
                                                    <label for="accented-light ">
                                                        Wallet
                                                    </label>
                                                </div>
                                                <div class="pre mx-md-1 mx-2 ">
                                                    <input class="accented mx-2" type="checkbox" id="accented-light" wire:model.defer ="account" required>
                                                    <label for="accented-light">
                                                        Bank Account
                                                    </label>
                                                </div>
                                            </div>
                                            @elseif($payment_name == 'paid_with_wallet')
                                            <div class="order_text_4">
                                                <p class="mb-0 pb-0 my-md-3 my-4 text-left">Choose Order Type</p>
                                            </div>
                                            <div class="order_box_4 p-2 pt-md-1">
                                                <div class="instant mx-md-1 mx-2 ">
                                                    <input class="accented mx-2 " type="checkbox" id="accented-light"
                                                        checked wire:model.defer ="wallet" required>
                                                    <label for="accented-light ">
                                                        Wallet
                                                    </label>
                                                </div>
                                                
                                            </div>
                                            @elseif($payment_name == 'cod_with_wallet')
                                            <div class="order_text_4">
                                                <p class="mb-0 pb-0 my-md-3 my-4 text-left">Choose Order Type</p>
                                            </div>
                                            <div class="order_box_4 p-2 pt-md-1">
                                                <div class="instant mx-md-1 mx-2 ">
                                                    <input class="accented mx-2 " type="checkbox" id="accented-light"
                                                        checked  wire:model.defer ="wallet" required>
                                                    <label for="accented-light ">
                                                        Wallet
                                                    </label>
                                                </div>
                                                
                                            </div>
                                            @elseif($payment_name == 'razorypay_with_wallet')
                                            <div class="order_text_4">
                                                <p class="mb-0 pb-0 my-md-3 my-4 text-left">Choose Order Type</p>
                                            </div>
                                            <div class="order_box_4 p-2 pt-md-1">
                                                <div class="instant mx-md-1 mx-2 ">
                                                    <input class="accented mx-2 " type="checkbox" id="accented-light"
                                                        checked wire:model.defer ="wallet" required>
                                                    <label for="accented-light ">
                                                        Wallet
                                                    </label>
                                                </div>
                                                <div class="pre mx-md-1 mx-2 ">
                                                    <input class="accented mx-2" type="checkbox" id="accented-light" wire:model.defer ="account" required>
                                                    <label for="accented-light" >
                                                        Bank Account
                                                    </label>
                                                </div>
                                            </div>

                                        @endif

                                        <div class="status_button row mt-3">
                                            <div class="one_sttus col-lg-6 col-6">
                                                <button class="cancel_button_pop py-2 mx-2"
                                                    id="dismiss2" onclick="dismissPopup2()">Dismiss</button>
                                            </div>
                                            <div class="one_sttus col-lg-6 col-6">
                                                <button class="ok_button_pop py-2 mx-2" onclick="cancel_order()"
                                                    id="ok2">Cancel Order</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div> --}}



            {{-- timer load end --}}








            <div class="item_list mt-3">
                <h6 class="order_at">Order at</h6>
                <div class="backgrd my-md-3 my-3">
                    <div class="home_food_1 d-flex me-3 ms-3">
                        <div class="location_img ">
                            <img src="{{ asset('images/map.png') }}" width="28px" alt="" />
                        </div>
                        <div class="shero_home mt-3">
                            @if ($single_order)
                                <p><span style="font-weight: bold;">{{ $single_order->GTS->shop->shop_name }}</span> -
                                {{ $single_order->GTS->shop->shop_address }}</p>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
            <div class="item_list mt-3">
                <h6 class="order_at">Deliver at</h6>
                <div class="backgrd my-md-3 my-3">
                    <div class="home_food_1 d-flex me-3 ms-3">
                        <div class="location_img ">
                            <img src="{{ asset('images/map.png') }}" width="28px" alt="" />
                        </div>
                        <div class="shero_home mt-3">
                            @if ($single_order)
                            @if ($single_order->GTS->user)
                                <p>{{ $single_order->GTS->user->user_address_details }}</p>
                                @endif
                            @endif
                        </div>
                    </div>

                </div>
            </div>
            <div class="backgrd my-md-3 my-3">
                <div class="items me-4 ms-4 d-flex">
                    <div class="Cart_items">
                        <p class="mt-3"><span style="font-weight: bold;"> Mode of Payment : </span>
                        @if ($payment_id == 1)
                            Cash on Delivery
                        @elseif($payment_id == 2)
                            Paid Online
                        @elseif($payment_id == 3)
                            Paid with Wallet
                        @elseif($payment_id == 4)
                            COD with Wallet
                        @elseif($payment_id == 5)
                            Paid Online with Wallet
                        @endif
                    </p>
                    </div>

                </div>

            </div>

            <div class="backgrd my-md-3 my-3">
                @if (count($single_order->GTS->product) > 0)
                    @foreach ($single_order->GTS->product as $order_detail)
                        <div class="items me-4 ms-4 d-flex">
                            <div class="Cart_items">
                                <p>Cart Items</p>

                                <h6 class="fw-bold ">{{ $order_detail->product_name }}</h6>
                            </div>
                            <div class="Quantity">
                                <p class="px-3">Quantity</p>
                                <h6 class="fw-bold px-4">{{ $order_detail->quantity }}</h6>
                            </div>
                            <div class="Amount">
                                <p>Amount</p>
                                <h6 class="fw-bold">₹ {{ $order_detail->product_price }}</h6>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            <div class="invoice py-3">
                <div class="invoice_box_2 p-3">
                    <div class="invoice_text_1">
                        <p>Invoice Details</p>
                    </div>
                    <div class="invoice_row mt-1">
                        <div class="item_bill_1">
                            <h6>Sub Total</h6>
                        </div>
                        @if ($single_order)
                            <div class="rates_item_2">
                                <h5>₹ {{ number_format($single_order->GTS->product_total, 2) }}</h5>
                            </div>
                        @else
                            <div class="rates_item_2">
                                <h5>₹ 0.00</h5>
                            </div>
                        @endif
                    </div>
                    <div class="invoice_row mt-1">
                        <div class="item_bill_1 ">
                            <h6 class="">Delivery Charge</h6>
                        </div>
                        @if ($single_order)
                            <div class="rates_item_2">
                                <h5>₹ {{ number_format($single_order->GTS->delivery_charge, 2) }}</h5>
                            </div>
                        @else
                            <div class="rates_item_2">
                                <h5>₹ 0.00</h5>
                            </div>
                        @endif
                    </div>
                    <div class="invoice_row mt-1">
                        <div class="item_bill_1">
                            <h6>Packing Charge</h6>
                        </div>
                        @if ($single_order)
                            <div class="rates_item_2">
                                <h5>₹ {{ number_format($single_order->GTS->packing_charge, 2) }}</h5>
                            </div>
                        @else
                            <div class="rates_item_2">
                                <h5>₹ 0.00</h5>
                            </div>
                        @endif
                    </div>
                    @if ($single_order->GTS->tip_amount)
                        <div class="invoice_row mt-1">
                            <div class="item_bill_1">
                                <h6>Tip Amount</h6>
                            </div>
                            @if ($single_order->GTS->tip_amount)
                                <div class="rates_item_2">
                                    <h5>₹ {{ number_format($single_order->GTS->tip_amount, 2) }}</h5>
                                </div>
                            @else
                                <div class="rates_item_2">
                                    <h5>₹ 0.00</h5>
                                </div>
                            @endif
                        </div>
                    @endif
                    @if ($single_order->GTS->offer)
                        <div class="invoice_row mt-1">
                            <div class="item_bill_1">
                                <h6>Discount</h6>
                            </div>
                            @if ($single_order->GTS->offer)
                                <div class="rates_item_2">
                                    <h5>(-)₹ {{ number_format($single_order->GTS->offer->offer_amount, 2) }}</h5>
                                </div>
                            @else
                                <div class="rates_item_2">
                                    <h5>₹ 0.00</h5>
                                </div>
                            @endif
                        </div>
                    @endif
                   
                    <div class="invoice_row mt-1">
                        <div class="item_bill_1">
                            <h6>Taxes & Charges </h6>
                        </div>
                        @if ($single_order)
                            <div class="rates_item_2">
                                <h5>₹ {{ number_format($single_order->GTS->tax_amount, 2) }}</h5>
                            </div>
                        @else
                            <div class="rates_item_2">
                                <h5>₹ 0.00</h5>
                            </div>
                        @endif
                    </div>
                    @if ($single_order->GTS->wallet_amount)
                    <div class="invoice_row mt-1">
                        <div class="item_bill_1">
                            <h6>Wallet</h6>
                        </div>
                        @if ($single_order->GTS->wallet_amount)
                            <div class="rates_item_2">
                                <h5>(-)₹ {{ number_format($single_order->GTS->wallet_amount, 2) }}</h5>
                            </div>
                        @else
                            <div class="rates_item_2">
                                <h5>₹ 0.00</h5>
                            </div>
                        @endif
                    </div>
                @endif

                </div>
            </div>
            <div class="Grand mt-3 ">
                <div class="total_grant d-flex">
                    <p class="text-white m-0">Grand Total</p>
                    @if ($single_order)
                        <p class="text-white m-0">₹ {{ $single_order->GTS->total_amount }}</p>
                    @else
                        <p class="text-white m-0">₹ 0.00</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <img src="{{ asset('images/bottom_pattern.png') }}" class="top-pattern">

</div>
</div>

</section>


<div class="modal fade" id="overlay3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="success_img mt-lg-5 mt-5 pt-lg-0">
                <div class="icon_box icon_box_cntr icon_box_larg text-center">
                    <span>
                        <img src="{{ asset('images/check_21.png') }}" />
                        <div class="circle_wave delay1"></div>
                        <div class="circle_wave delay2"></div>
                        <div class="circle_wave delay3"></div>
                        <div class="circle_wave delay4"></div>
                    </span>
                </div>
            </div>
            <div class="modal-body success_text mt-3">
                <h6>Order cancellation successful</h6>
                <p>Your Order has been successfully cancelled.</p>
            </div>

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

@endif
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const walletCheckbox = document.getElementById('wallet-checkbox');
            const accountCheckbox = document.getElementById('account-checkbox');

            if (walletCheckbox && accountCheckbox) {
                walletCheckbox.addEventListener('click', function() {
                    if (walletCheckbox.checked) {
                        accountCheckbox.checked = false;
                    }
                });

                accountCheckbox.addEventListener('click', function() {
                    if (accountCheckbox.checked) {
                        walletCheckbox.checked = false;
                    }
                });
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const walletCheckbox = document.getElementById('wallet-checkbox');
            const accountCheckbox = document.getElementById('account-checkbox');
            const cancelButton = document.getElementById('ok2'); // The "Cancel Order" button
            const cancelReasonTextarea = document.getElementById('cancel_Reason'); // Cancel reason textarea

            function validateCancelReason() {
                if (cancelReasonTextarea.value.trim() === '') {
                    alert('Please enter your reason for cancellation.');
                    return false;
                }
                return true;
            }


            function validateCheckboxes() {
                if (!walletCheckbox.checked && !accountCheckbox.checked) {
                    alert('Please select at least one option for the refund.');
                    return false;
                }
                return true;
            }

            async function cancelOrderAndProceed() {
                if (!validateCheckboxes()) {
                    return;
                }
            }

            if (walletCheckbox && accountCheckbox) {
                walletCheckbox.addEventListener('click', function() {
                    if (walletCheckbox.checked) {
                        accountCheckbox.checked = false;
                    }
                });

                accountCheckbox.addEventListener('click', function() {
                    if (accountCheckbox.checked) {
                        walletCheckbox.checked = false;
                    }
                });
            }

            if (cancelButton) {
                cancelButton.addEventListener('click', function(event) {
                    event.preventDefault(); // Prevent default button action
                    cancelOrderAndProceed(); // Handle the cancel order process and conditional popup
                });
            }
        });
    </script>

    <script>
        document.addEventListener('livewire:load', function() {
            Livewire.on('thirdPopup', function() {
                $('#overlay3').modal('show');
                setTimeout(function() {
            $('#overlay3').modal('hide');
            location.reload(); // Refresh the page after closing the modal
        }, 2000);

            });
        });
    </script>
{{-- 
    <script>
        document.addEventListener('livewire:load', function() {
            @this.on('cancel_order', () => {
                toastr.success('Order Cancelled successfully');
            });
        });
    </script> --}}

    <script>
        document.addEventListener('livewire:load', function() {
            var countdownTime = @this.countdownTime;
            var countdownElement = document.getElementById('countdown-timer');

            if (countdownTime > 0) {
                var countdownInterval = setInterval(function() {
                    countdownTime--;
                    countdownElement.innerText = countdownTime + ' Sec';

                    if (countdownTime <= 0) {
                        clearInterval(countdownInterval);

                    }
                }, 1000);
            }
        });
    </script>

    <script>
        Livewire.on('refreshPage', () => {
            location.reload();
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var timerElement = document.getElementById('timer');
            var openFirstPopup = document.getElementById('openPopup1');
            var openFirstPopup1 = document.getElementById('overlay2');
            var cancelButton = document.getElementById('cancel1'); // Assuming there's a cancel button in your popup
            var cance = document.getElementById('dismiss2'); // Assuming there's a cancel button in your popup

            var remainingSeconds = parseInt(timerElement.textContent);

            var reloadInterval = setInterval(function() {
                location.reload();
            }, 10000);

            // Countdown timer
            var timerInterval = setInterval(function() {
                if (remainingSeconds > 0) {
                    remainingSeconds--;
                    timerElement.textContent = remainingSeconds;
                } else {
                    clearInterval(timerInterval);
                }
            }, 1000);

            function stopIntervals() {
                clearInterval(timerInterval);
                clearInterval(reloadInterval);
                console.log('Timer and page reload stopped');
            }

            openFirstPopup1.addEventListener('click', stopIntervals);
            openFirstPopup.addEventListener('click', stopIntervals);

            if (cancelButton) {
                cancelButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    location.reload();
                });
            }

            if (cance) {
                cance.addEventListener('click', function(event) {
                    event.preventDefault();
                    location.reload();
                });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const openPopup1Button = document.getElementById('openPopup1');
            const overlay1 = document.getElementById('overlay1');
            const overlay2 = document.getElementById('overlay2');

            // Open the first popup
            openPopup1Button.addEventListener('click', () => {
                overlay1.style.display = 'flex';
            });

            // Close the first popup when clicking cancel
            document.getElementById('cancel1').addEventListener('click', (event) => {
                event.stopPropagation();
                overlay1.style.display = 'none';
            });

            // Close the first popup and open the second
            document.getElementById('ok1').addEventListener('click', (event) => {
                event.stopPropagation();
                overlay1.style.display = 'none';
                overlay2.style.display = 'flex';
            });

            // Close the second popup when clicking dismiss
            document.getElementById('dismiss2').addEventListener('click', (event) => {
                event.stopPropagation();
                overlay2.style.display = 'none';
            });


            // Ensure clicks on the popup content itself don't close the overlay
            document.querySelectorAll('.popup-content').forEach(popup => {
                popup.addEventListener('click', (event) => {
                    event.stopPropagation();
                });
            });

            // Close all popups when clicking outside of them
            window.addEventListener('click', (event) => {
                if (event.target === overlay1 || event.target === overlay2) {
                    closeAllPopups();
                }
            });

            // Function to close all popups
            function closeAllPopups() {
                overlay1.style.display = 'none';
                overlay2.style.display = 'none';
            }
        });
    </script>

    <script>
        function cancel_order() {
                Livewire.emit('cancel_order');
        }
    </script>
 <script>

//document.addEventListener('livewire:load', function() {
//     @this.on('check', () => {
//         toastr.success('Please select at least one option for the refund');

//         setTimeout(() => {
//             location.reload();
//         }, 1000); 
//     });
// });

</script>
    <script>
        document.addEventListener('livewire:load', function() {
            @this.on('walletMinimumCheck', () => {
                toastr.success('Maximum limit 500');
            });
        });
    </script>
@endpush