@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb" id="your_cartbreadcrumb">
        <div class="container-fluid">
            <div class="row d-flex justify-content-lg-center justify-content-center align-item-center ">
                <div class="col-md-10 d-flex justify-content-lg-center justify-content-center align-item-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-lg-3 py-3 pt-lg-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('website.home') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Home
                                    @else
                                        بيت
                                    @endif
                                </a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="{{ route('website.cart') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Cart
                                    @else
                                        عربة
                                    @endif
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section id="wish-cart">
        <div class="container-fluid fd-bg py-lg-4 py-md-2 py-1 fixedwidth">
            <div class="row d-flex justify-content-center mb-lg-1 mb-md-5 mb-4 align-items-center">
                <div class="col-xxl-12 col-lg-11">
                    @php
                        $cartItems = getCartContent();
                    @endphp
                    @if (count($cartItems) > 0)
                        <div class="row gy-4 d-flex justify-content-center align-items-start px-3">
                            <div class="col-lg-8 col-md-12 y-cart px-lg-4">
                                <div class="top-title ">
                                    <h3
                                        class=" mb-0 {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                                        @if (session('app_language', 'en') == 'en')
                                            Your Cart
                                        @else
                                            سلة التسوق الخاصة بك
                                        @endif
                                    </h3>
                                </div>
                                <hr>
                                @foreach ($cartItems as $item)
                                    <div class="row gy-3 d-flex justify-content-between border-bottom for_mobile pb-2 my-2">
                                        <div
                                            class="col-lg-7 col-xxl-8 col-md-6 col-12  d-flex justify-content-start align-items-start">
                                            {{-- {{ $item->options->productImage }} --}}
                                            {{-- @if (!empty($item->options->productImage)) --}}
                                            @if ($item->options->gift_src == '')
                                                <img src="{{ asset('uploads/products/' . $item->options->productImage) }}"
                                                    class="img-fluid yourcartproductimg {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                            @else
                                                <img src="{{ $item->options->gift_src }}"
                                                    class="img-fluid yourcartproductimg {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                            @endif
                                            {{-- @endif --}}
                                            <p class="mb-1">
                                            <ul>
                                                <li>
                                                    <h5 class="title mb-1">
                                                        @if (session('app_language', 'en') == 'en')
                                                            {{ $item->name ?? '' }}
                                                        @else
                                                            {{ $item->options->title_ar ?? '' }}
                                                        @endif
                                                    </h5>
                                                </li>
                                                {{-- <li> <span>Select Size:</span> Medium</li> --}}
                                                {{-- <li> <span>In-store Pickup: </span> New York </li> --}}
                                                {{-- {{ $item->options->note ?? 'Not Available' }} --}}
                                                {{-- {{ $item->options->file ?? 'Not Available' }} --}}
                                                @if ($item->options->delivery_date != '')
                                                    <li> <span>Delivery Date:
                                                        </span>{{ $item->options->delivery_date ?? '' }}
                                                    </li>
                                                @endif
                                                @if ($item->options->delivery_time != '')
                                                    <li> <span>Delivery Time:
                                                        </span>{{ $item->options->delivery_time ?? '' }}
                                                    </li>
                                                @endif
                                                @if ($item->options->personal_message != '')
                                                    <li> <span>Personal Message:
                                                        </span>{{ $item->options->personal_message ?? '' }}</li>
                                                @endif
                                            </ul>
                                            </p>
                                        </div>
                                        <div
                                            class="col-lg-5 col-xxl-4 col-md-6 col-12  d-flex justify-content-between align-items-center">
                                            {{-- <input type="number" value="{{ $item->qty ?? '' }}"
                                                class="form-control count mx-3"> --}}
                                            <div class="d-flex align-items-center">
                                                <button type="button" class="btn btn-sm btn-outline-secondary sub"
                                                    data-id={{ $item->rowId }}>-</button>

                                                <input type="number" value="{{ $item->qty ?? '1' }}" min="1"
                                                    max="10" class="form-control count mx-2" style="width: 60px;" />

                                                <button type="button" class="btn btn-sm btn-outline-secondary add"
                                                    data-id={{ $item->rowId }}>+</button>
                                            </div>

                                            <span>{{ display_price($item->price) }}</span>
                                            {{-- <button type="button" onclick="deleteToCart('{{ $item->rowId }}')">
                                                <i class="bi bi-trash3"></i>
                                            </button>                                             --}}
                                            <button type="button" class="delete-from-cart" data-id="{{ $item->rowId }}">
                                                <i class="bi bi-trash3"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="g-text">
                                    {{-- <a href="javascript:void(0)" style="cursor: pointer;" data-bs-toggle="modal"
                                        data-bs-target="#exampleModalcard"> --}}
                                    <a href="{{ route('website.gift.card') }}" style="cursor: pointer;">
                                        @if (session('app_language', 'en') == 'en')
                                            You May Add Gift Card
                                        @else
                                            يمكنك إضافة بطاقة هدية
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12 cart-totals rounded-4">

                                <div class="order-summary  py-3">
                                    <h5>
                                        @php
                                            $subTotal = floatval(str_replace(',', '', Cart::subtotal()));
                                            $netTotal = floatval(str_replace(',', '', Cart::total()));
                                        @endphp
                                        @if (session('app_language', 'en') == 'en')
                                            Cart Totals
                                        @else
                                            إجماليات سلة التسوق
                                        @endif
                                    </h5>

                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6>
                                            <strong>
                                                @if (session('app_language', 'en') == 'en')
                                                    Subtotal:
                                                @else
                                                    المجموع الفرعي
                                                @endif
                                            </strong>
                                        </h6>
                                        <span class="float-end"
                                            style="color: #575757;">{{display_price($subTotal)}}</span>
                                    </div>
                                    {{-- <h6>
                                        <strong>
                                            @if (session('app_language', 'en') == 'en')
                                                Subtotal:
                                            @else
                                                المجموع الفرعي
                                            @endif
                                        </strong>
                                    </h6> --}}
                                    {{-- <div>
                                        <div class="d-flex align-items-center">
                                            <input type="radio" id="flat-rate" class="radioyourcart {{ session('app_language', 'en') == 'ar' ? 'ms-1' : 'me-1' }}" name="shipping"
                                                checked>
                                            <label for="flat-rate" class="label-text mb-0">Flat Rate</label>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <input type="radio" id="free-shipping" class="radioyourcart {{ session('app_language', 'en') == 'ar' ? 'ms-1' : 'me-1' }}"
                                                name="shipping">
                                            <label for="free-shipping" class="label-text">Free Shipping</label>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <input type="radio" id="local-pickup" class="radioyourcart {{ session('app_language', 'en') == 'ar' ? 'ms-1' : 'me-1' }}"
                                                name="shipping">
                                            <label for="local-pickup " class="label-text">Local Pickup</label>
                                        </div>
                                    </div> --}}
                                    <hr class="my-3">
                                    {{-- <div id="form-display">
                                        <div class="row d-flex justify-content-center align-items-center">
                                            <div class="col-lg-8 col-md-8 col-8 mb-3">
                                                <label class="form-label">Do you have a coupon code ?</label>
                                                <input type="text" class="form-control"
                                                    placeholder="Enter your Coupon Code">
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-4">
                                                <div class="row">
                                                    <div class="col-lg-11 col-lg-4 col-12 pe-lg-0 px-lg-0 px-2  mt-3">
                                                        <div class="g-count-btn">
                                                            <div class="cart_button your_cartbtn">
                                                                <a href="#">
                                                                    Add
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center">
                                            <div class="col-lg-8 col-md-8 col-8 mb-3">
                                                <label class="form-label">Do you have a Gift Card?</label>
                                                <input type="text" class="form-control"
                                                    placeholder="Enter your Coupon Code">
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-4">
                                                <div class="row">
                                                    <div class="col-lg-11 col-lg-4 col-12 pe-lg-0 px-lg-0 px-2 mt-3">
                                                        <div class="g-count-btn">
                                                            <div class="cart_button your_cartbtn ">
                                                                <a href="#">
                                                                    Add
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <hr class="my-2"> --}}
                                    <div class="d-flex justify-content-between align-items-center pt-2 pb-2">
                                        <h6><strong>VAT</strong></h6> <span class="float-end">{{ display_price(0) }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6><strong>Total</strong></h6> <span class="float-end price"
                                            style="color: #575757;">{{ display_price($netTotal) }}</span>
                                    </div>
                                    <div class="row d-flex justify-content-center align-items-center">
                                        <div class="col-lg-11 col-lg-4 col-md-12 pe-lg-0 px-lg-0 mt-3">
                                            <div class="g-count-btn">
                                                <div class="cart_button your_cartbtn">
                                                    <a href="{{ route('website.shipping.details') }}">
                                                        @if (session('app_language', 'en') == 'en')
                                                            PROCEED TO CHECKOUT
                                                        @else
                                                            الشروع في الخروج
                                                        @endif
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade gift-modal" id="exampleModalcard" tabindex="-1" aria-labelledby="exampleModalcardLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <img src="{{ asset('website/images/Layer_1 (10).svg') }}" alt="" />
                    <h1 class="modal-title {{ session('app_language', 'en') == 'ar' ? 'me-3' : 'ms-3' }}"
                        id="exampleModalcardLabel">
                        @if (session('app_language', 'en') == 'en')
                            Add Gift Card
                        @else
                            أضف
                            بطاقة الهدايا
                        @endif
                    </h1>
                    <button type="button" class="btn-close hmodalbtn" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                @if ($firstCategory && $firstCategory->products->count())
                    <div class="modal-body">
                        <div class="accordion gift-modal" id="#accordionExample">
                            @foreach ($firstCategory->products as $index => $product)
                                <div class="accordion-item">
                                    <h2 class="accordion-header border-bottom">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ $index }}" aria-expanded="false"
                                            aria-controls="collapse{{ $index }}">
                                            {{ $index + 1 }}. {{ $product->title_en ?? 'Product' }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $index }}" class="accordion-collapse collapse"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="row d-flex justify-content-between pb-2 my-2">
                                                <div class="col-lg-12">
                                                    <div class="row justify-content-start align-items-center">
                                                        <div class="col-lg-4 col-md-2 col-2">
                                                            <img src="{{ asset('uploads/products/' . ($product->images->first()->filename ?? 'default.jpg')) }}"
                                                                alt="{{ $product->title_en }}"
                                                                class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }} w-100" />
                                                        </div>
                                                        <div class="col-lg-3 col-md-5 col-5">
                                                            <div class="mb-1 pt-lg-3 pt-md-2">
                                                                <p>{{ $product->description_en }}</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-3">
                                                            <div class="btn-price my-4 text-center">
                                                                <a href="">{{ $product->price ?? 'Free' }}</a>
                                                            </div>
                                                        </div>
                                                        <div
                                                            class="col-lg-2 col-md-2 col-2 d-flex flex-column justify-content-center align-items-end">
                                                            {{-- <input class="form-check-input cart-checkboxcard"
                                                                type="checkbox" id="product-{{ $product->id }}"
                                                                data-id="{{ $product->id }}" /> --}}
                                                            <input class="form-check-input cart-checkboxcard"
                                                                type="checkbox" id="product-{{ $product->id }}"
                                                                data-id="{{ $product->id }}"
                                                                data-price="{{ $product->price ?? 'Free' }}" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        {{-- <style>
     .accordion-button {
        font-weight: 400 !important;
    }
     .accordion-button:not(.collapsed) {
        font-weight: 400 !important;
    }
</style> --}}
                        <div class="modal-footer border-0">
                            <div class="text-end mt-4">
                                <div class="mb-3 count">
                                    <div class="cart_button">
                                        <a href="#" class="btn btn-primary add-selected-to-cartcard">Select</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                @endif

            </div>
            {{-- @else
                    <p>No products found in the first category.</p>
                @endif --}}


        </div>
    </div>
    <section id="mothers">
        <div class="container-fluid py-lg-2 py-xxl-5 mb-lg-2 fixedwidth">
            <div class="row justify-content-center align-item-center d-flex">
                <div class="col-lg-11 border-top">
                    <div class="top-title text-center py-3 py-lg-0">
                        <h3 class="mb-0 pt-lg-5 pt-3"> recommended products </h3>
                        <p class="title-text">
                            The most beautiful bouquets & gifts for occasions!
                        </p>
                    </div>
                    @if (count($latestProducts) > 0)
                        <div class="owl-carousel owl-theme slider" id="carousel1" style="direction: ltr !important;">
                            @foreach ($latestProducts as $product)
                                <div class="item">
                                    <div class="card custom-card border-0">
                                        <div class="custom-img">
                                            @if (!empty($product->after_discount))
                                                <div class="ribbon">
                                                    <span>
                                                        @if (session('app_language', 'en') == 'en')
                                                            BEST OFFER
                                                        @else
                                                            أفضل عرض
                                                        @endif
                                                    </span>
                                                </div>
                                            @endif
                                            <img src="{{ $product->images->first() ? asset('uploads/products/' . $product->images->first()->filename) : asset('website/dummy/dummy.jpg') }}"
                                                class="img-fluid">
                                        </div>
                                        <div class="overlay">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="heart-icon">
                                                    <a href="javascript:void(0)" class="add-to-wishlist-btn"
                                                        data-id="{{ $product->id }}"><i class="bi bi-suit-heart"></i>
                                                </div>
                                                <div class="eye-icon">
                                                    <a data-bs-toggle="modal"
                                                        data-bs-target="#product_detailsh_{{ $product->id }}">
                                                        <i class="bi bi-eye"></i></a>
                                                </div>
                                                <!-- Modal -->

                                            </div>
                                            <div class="select_button">
                                                <a href="{{ route('website.listing.details', $product->slug) }}">
                                                    @if (session('app_language', 'en') == 'en')
                                                        Select Options
                                                    @else
                                                        حدد الخيارات
                                                    @endif
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-body text-center">
                                            <h5 class="card-title">
                                                @if (session('app_language', 'en') == 'en')
                                                    {{ $product->title_en ?? '' }}
                                                @else
                                                    {{ $product->title_ar ?? '' }}
                                                @endif
                                            </h5>
                                            <span class="card-price">{{ display_price($product->price) }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        {{-- <div class="owl-carousel owl-theme slider" id="carousel2">
                            @foreach ($latestProducts as $product)
                                <div class="item">
                                    <div class="card custom-card border-0">
                                        <div class="custom-img">
                                            <img src="{{ asset('uploads/products/' . ($product->image ?? 'website/dummy/dummy.jpg')) }}"
                                                class="img-fluid" alt="{{ $product->title ?? 'Product Image' }}" />
                                        </div>
                                        <div class="overlay">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="heart-icon">
                                                    <a href="#"><i class="bi bi-suit-heart"></i></a>
                                                </div>
                                                <div class="eye-icon">
                                                    <a data-bs-toggle="modal"
                                                        data-bs-target="#product_detailsh_{{ $product->id }}">
                                                        <i class="bi bi-eye"></i></a>
                                                </div>
                                            </div>
                                            <div class="select_button">
                                                <a href="{{ route('website.listing.details', $product->slug) }}">Select
                                                    Options</a>
                                            </div>
                                        </div>
                                        <div class="card-body text-center mt-3">
                                            <h5 class="card-title">
                                                {{ session('app_language', 'en') === 'en' ? $product->title_en : $product->title_ar }}
                                            </h5>
                                            <span class="card-price text-muted">
                                                {{ display_price($product->price) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div> --}}
                    @endif
                </div>
            </div>
        </div>
    </section>

    @foreach ($latestProducts as $product)
        <!-- Modal -->
        <div class="modal fade" id="product_detailsh_{{ $product->id }}" tabindex="-1"
            aria-labelledby="product_detailshLabel_{{ $product->id }}" aria-hidden="true">

            <div class="modal-dialog modal-xl custom_modalw">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="product_detailshLabel_{{ $product->id }}">
                            @if (session('app_language', 'en') == 'en')
                                {{ $product->title_en ?? '' }}
                            @else
                                {{ $product->title_ar ?? '' }}
                            @endif
                        </h1>

                        <button type="button" class="btn-close hmodalbtn" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <section id="product-detail">
                            <div class="container-fluid my-xxl-5 my-lg-3 my-2 fixedwidth">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                                        <div class="row d-flex justify-content-center align-items-start g-lg-5 g-md-4 g-0">
                                            <div class="col-lg-6 col-md-6 col-12">
                                                <div class="display-img">

                                                    <!-- Large Preview Image -->
                                                    <img id="mainImage2_{{ $product->id }}"
                                                        src="{{ isset($product->images->first()->filename) ? asset('uploads/products/' . $product->images->first()->filename) : '' }}"
                                                        class="main-img img-fluid mb-3 w-100" alt="Main Image" />

                                                    <div
                                                        class="owl-carousel owl-theme thumb-carousel6_{{ $product->id }}">

                                                        @foreach ($product->images as $index => $image)
                                                            <div class="item">
                                                                <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                                    class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                                    alt="{{ $product->title }} image {{ $index + 1 }}" />
                                                            </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                                <div class="p-detail">
                                                    <h5 class="mt-3">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Product Details
                                                        @else
                                                            تفاصيل المنتج
                                                        @endif
                                                    </h5>
                                                    <p>
                                                        @if (session('app_language', 'en') == 'en')
                                                            {!! $product->description_en !!}
                                                        @else
                                                            {!! $product->description_ar !!}
                                                        @endif
                                                    </p>
                                                    <hr />
                                                </div>

                                            </div>
                                            <div class="col-lg-6 col-md-6 col-12">
                                                <div
                                                    class="top-title text-center d-flex justify-content-between align-items-center">
                                                    <h3 class="text-start">
                                                        @if (session('app_language', 'en') == 'en')
                                                            {{ $product->title_en ?? '' }}
                                                        @else
                                                            {{ $product->title_ar ?? '' }}
                                                        @endif
                                                    </h3>
                                                    <a href="javascript:void(0)" class="add-to-wishlist-btn"
                                                        data-id="{{ $product->id }}"><i
                                                            class="bi bi-suit-heart"></i></a>
                                                </div>
                                                <div class="price-heart">
                                                    <h4 class="actual-price">
                                                        {{ display_price($product->price) }}</h4>
                                                </div>
                                                <div class="row d-flex justify-content-between align-items-center">
                                                    <div class="col-lg-6 mb-3">
                                                        @php
                                                            $today = \Carbon\Carbon::today()->format('Y-m-d');
                                                        @endphp

                                                        <label class="form-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Choose a delivery date
                                                            @else
                                                                اختر تاريخ التسليم
                                                            @endif
                                                        </label>
                                                        <input type="date" class="form-control"
                                                            min="{{ $today }}"
                                                            id="delivery_date_{{ $product->id }}"
                                                            placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery date' : 'اختر تاريخ التسليم' }}"
                                                            onfocus="this.showPicker ? this.showPicker() : null" />
                                                    </div>
                                                    <div class="col-lg-6 mb-3">
                                                        <label class="form-label">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Choose a delivery time
                                                            @else
                                                                اختر وقت التسليم
                                                            @endif
                                                        </label>
                                                        <input type="time" class="form-control"
                                                            id="delivery_time_{{ $product->id }}" name="delivery_time"
                                                            placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery time' : 'اختر وقت التسليم' }}"
                                                            onfocus="this.showPicker ? this.showPicker() : null">
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Add a personal message
                                                        @else
                                                            إضافة رسالة شخصية
                                                        @endif
                                                    </label>
                                                    <textarea class="form-control" rows="5" id="personal_message_{{ $product->id }}"
                                                        placeholder="{{ session('app_language', 'en') == 'en' ? 'Add a personal message' : 'إضافة رسالة شخصية' }}"></textarea>
                                                </div>
                                                <div class="">
                                                    <label class="form-label">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Note
                                                        @else
                                                            ملحوظة
                                                        @endif
                                                    </label>
                                                    <textarea class="form-control" rows="5" id="note_{{ $product->id }}"
                                                        placeholder="{{ session('app_language', 'en') == 'en' ? 'Note - Special with love for you' : 'ملحوظة - مع الحب لك' }}"></textarea>


                                                    <h4 class="mt-2">
                                                        <a href="javascript:void(0)" style="cursor: pointer;"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#exampleModalcard"s-toggle="modal"
                                                            data-bs-target="#exampleModal">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Choose the Card
                                                            @else
                                                                اختر البطاقة
                                                            @endif
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div class="upload-section mt-2 mb-3">
                                                    <label class="form-label fw-bold">
                                                        @if (session('app_language', 'en') == 'en')
                                                            Here you can add music link
                                                        @else
                                                            هنا يمكنك إضافة رابط الموسيقى
                                                        @endif
                                                    </label>
                                                    <p class="text-muted mb-1">
                                                        @if (session('app_language', 'en') == 'en')
                                                            You can add music - your favorite song -
                                                            picture
                                                        @else
                                                            يمكنك إضافة موسيقى - أغنيتك المفضلة -
                                                            صورة
                                                        @endif
                                                    </p>
                                                    {{-- <div class="text-center border rounded-3 py-4" id="dropArea"> --}}
                                                    {{-- <i class="bi bi-camera text-muted"></i> --}}
                                                    {{-- <p class="mb-0 text-muted">
                                                            @if (session('app_language', 'en') == 'en')
                                                                Drag and drop file here
                                                            @else
                                                                اسحب وأفلِت الملف هنا
                                                            @endif
                                                        </p> --}}
                                                    {{-- <input type="file" id="fileInput" hidden /> --}}
                                                    <input type="file" id="file_{{ $product->id }}"
                                                        class="form-control" />
                                                    {{-- </div> --}}
                                                </div>
                                                <div
                                                    class="mb-3 count row d-flex justify-content-between align-items-center">
                                                    <div class="col-lg-4">
                                                        <input type="number" class="form-control rounded-3"
                                                            min="1" value="1"
                                                            id="quantity_{{ $product->id }}" />
                                                    </div>
                                                    <div class="col-lg-4 pe-lg-0 my-2 my-lg-0">
                                                        <div class="cart_button">
                                                            {{-- <a href="javascript:void(0)" class="add-to-cart-btn"
                                                                data-bs-toggle="modal" data-bs-target="#exampleModal"
                                                                data-id="{{ $product->id }}">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Add to cart
                                                                @else
                                                                    أضف إلى السلة
                                                                @endif
                                                            </a> --}}
                                                            <a href="javascript:void(0)" class="add-to-cart-btn"
                                                                data-id="{{ $product->id }}">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Add to cart
                                                                @else
                                                                    أضف إلى السلة
                                                                @endif
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="buy_button">
                                                            {{-- <a href="#">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Buy Now
                                                                @else
                                                                    اشتري الآن
                                                                @endif
                                                            </a> --}}
                                                            <a href="javascript:void(0)" class="buy-now-btn"
                                                                data-id="{{ $product->id }}">
                                                                @if (session('app_language', 'en') == 'en')
                                                                    Buy Now
                                                                @else
                                                                    اشتري الآن
                                                                @endif
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>

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

                </div>
            </div>
        </div>
    @endforeach
    <section id="footer-delivery">
        <div class="container-fluid fd-bg py-4 ">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-11">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l1.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">Express Delivery</h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l3.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">No Address Hassle</h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{ asset('website/images/l2.svg') }}" alt=""
                                    class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">Premium Flowers & Gifts</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scriptJs')
    <script type="text/javascript">
        // function addToCart(id) {
        //     // Get input values using the dynamic product ID
        //     var deliveryDate = $('#delivery_date_' + id).val();
        //     var deliveryTime = $('#delivery_time_' + id).val();
        //     var quantity = $('#quantity_' + id).val();
        //     var message = $('#message_'+id).val();

        //     $.ajax({
        //         url: '{{ route('website.add.to.cart') }}',
        //         type: 'post',
        //         data: {
        //             id: id,
        //             delivery_date: deliveryDate,
        //             delivery_time: deliveryTime,
        //             quantity: quantity,
        //             personal_message: message,
        //             _token: '{{ csrf_token() }}'
        //         },
        //         dataType: 'json',
        //         success: function(response) {
        //             if (response.status === true) {
        //                 toastr.success(response.message, "Success");
        //             } else {
        //                 toastr.error(response.message, "Required");
        //             }
        //         },
        //         error: function(jqXHR, exception) {
        //             toastr.error("Please Try Again...", "Error");
        //         }
        //     });
        // }
        $(document).ready(function() {
            $(document).on('click', '.add-to-cart-btn', function() {
                var id = $(this).data('id');

                // Get input values dynamically
                var deliveryDate = $('#delivery_date_' + id).val();
                var deliveryTime = $('#delivery_time_' + id).val();
                var quantity = $('#quantity_' + id).val();
                var message = $('#message_' + id).val();
                if (!deliveryDate || !deliveryTime) {
                    toastr.error("Delivery date and time are required.", "Required");
                    return;
                }
                $.ajax({
                    url: '{{ route('website.add.to.cart') }}',
                    type: 'post',
                    data: {
                        id: id,
                        delivery_date: deliveryDate,
                        delivery_time: deliveryTime,
                        quantity: quantity,
                        personal_message: message,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.message, "Required");
                        }
                    },
                    error: function() {
                        toastr.error("Please Try Again...", "Error");
                    }
                });
            });
        });
        // $(document).on('click', '.add-selected-to-cartcard', function(e) {
        //     console.log('Add to Cart Card clicked!');

        //     e.preventDefault();
        //     let selectedIds = [];

        //     $('.cart-checkboxcard:checked').each(function() {
        //         selectedIds.push($(this).data('id'));
        //     });

        //     if (selectedIds.length === 0) {
        //         toastr.warning("Please select at least one product.", "Warning");
        //         return;
        //     }

        //     $.ajax({
        //         url: '{{ route('website.add.to.cart') }}',
        //         type: 'POST',
        //         data: {
        //             product_ids: selectedIds,
        //             _token: '{{ csrf_token() }}'
        //         },
        //         success: function(response) {
        //             if (response.status === true) {
        //                 toastr.success(response.message, "Success");
        //                 setTimeout(() => {
        //                     location.reload();
        //                 }, 1000);
        //             } else {
        //                 toastr.error(response.message, "Error");
        //             }
        //         },
        //         error: function() {
        //             toastr.error("Something went wrong. Please try again.", "Error");
        //         }
        //     });
        // });
        $(document).on('click', '.add-selected-to-cartcard', function(e) {
            // console.log('Add to Cart Card clicked!');
            // alert("Hi");

            e.preventDefault();
            let selectedIds = [];
            let price = [];

            $('.cart-checkboxcard:checked').each(function() {
                selectedIds.push($(this).data('id'));
                price.push($(this).data('price'));
            });

            if (selectedIds.length === 0) {
                toastr.warning("Please select at least one product.", "Warning");
                return;
            }

            $.ajax({
                // url: '{{ route('website.add.to.cart') }}',
                url: '{{ route('website.add.to.cart.choose.card') }}',
                type: 'POST',
                data: {
                    product_ids: selectedIds,
                    product_price: price,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status === true) {
                        toastr.success(response.message, "Success");
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    } else {
                        toastr.error(response.message, "Error");
                    }
                },
                error: function() {
                    toastr.error("Something went wrong. Please try again.", "Error");
                }
            });
        });
        $(document).on('click', '.buy-now-btn', function() {
            var id = $(this).data('id');

            // Get input values
            var deliveryDate = $('#delivery_date_' + id).val();
            var deliveryTime = $('#delivery_time_' + id).val();
            var personalMessage = $('#personal_message_' + id).val();
            var note = $('#note_' + id).val();
            var quantity = $('#quantity_' + id).val();
            var fileInput = $('#file_' + id)[0]; // Get the file input element

            // Create FormData object
            var formData = new FormData();
            formData.append('id', id);
            formData.append('delivery_date', deliveryDate);
            formData.append('delivery_time', deliveryTime);
            formData.append('personal_message', personalMessage);
            formData.append('note', note);
            formData.append('quantity', quantity);

            // Check if file input exists and has a file selected
            if (fileInput && fileInput.files.length > 0) {
                formData.append('file', fileInput.files[0]);
            }

            // AJAX request
            $.ajax({
                url: '/add-to-cart', // Your endpoint URL
                type: 'POST',
                data: formData,
                processData: false, // Important for file upload
                contentType: false, // Important for file upload
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                        'content') // For Laravel CSRF protection
                },
                success: function(response) {
                    if (response.status === true) {
                        // toastr.success(response.message, "Success");
                        setTimeout(() => {
                            // window.location.reload();
                            window.location.href = '/account/checkout';
                        }, 1000);
                    } else {
                        let errorMessages = [];

                        if (response.errors) {
                            for (let key in response.errors) {
                                if (response.errors.hasOwnProperty(key)) {
                                    response.errors[key].forEach(function(message) {
                                        errorMessages.push(message);
                                    });
                                }
                            }
                        }

                        if (errorMessages.length > 0) {
                            toastr.error(errorMessages.join('<br>'), 'Required');
                        } else {
                            // toastr.error(response.message, 'Message');
                            setTimeout(() => {
                                // window.location.reload();
                                window.location.href = '/account/checkout';
                            }, 1000);
                        }
                    }
                },
                error: function() {
                    toastr.error("Please Try Again...", "Error");
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // $('.add').click(function() {
            //     var qtyElement = $(this).parent().prev(); // Qty Input
            //     var qtyValue = parseInt(qtyElement.val());
            //     if (qtyValue < 10) {
            //         qtyElement.val(qtyValue + 1);
            //     }
            // });

            // $('.sub').click(function() {
            //     var qtyElement = $(this).parent().next();
            //     var qtyValue = parseInt(qtyElement.val());
            //     if (qtyValue > 1) {
            //         qtyElement.val(qtyValue - 1);
            //     }
            // });
            $(document).on('click', '.add', function() {
                var qtyElement = $(this).prev();
                var qtyValue = parseInt(qtyElement.val()) || 1;
                if (qtyValue < 10) {
                    var rowId = $(this).data('id');
                    qtyElement.val(qtyValue + 1);
                    var newQty = qtyElement.val();
                    updateToCart(rowId, newQty)
                }
            });

            $(document).on('click', '.sub', function() {
                var qtyElement = $(this).next();
                var qtyValue = parseInt(qtyElement.val()) || 1;
                if (qtyValue > 1) {
                    var rowId = $(this).data('id');
                    qtyElement.val(qtyValue - 1);
                    var newQty = qtyElement.val();
                    updateToCart(rowId, newQty)
                }
            });


            function updateToCart(rowId, qty) {
                $.ajax({
                    url: '{{ route('website.update.to.cart') }}',
                    type: 'post',
                    data: {
                        rowId: rowId,
                        qty: qty,
                        _token: '{{ csrf_token() }}' // Adding CSRF token
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status === true) {
                            toastr.success(response.message, "Success");
                            setTimeout(function() {
                                location.reload();
                            }, 1000);
                        } else {
                            toastr.error(response.message, "Required");
                        }
                    },
                    error: function(jqXHR, exception) {
                        toastr.error("Please Try Again...", "Error");
                    }
                });
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            @foreach ($latestProducts as $product)
                $(".thumb-carousel6_{{ $product->id }}").owlCarousel({
                    items: 5,
                    margin: 10,
                    nav: true,
                    dots: false,
                    navText: [
                        "<i class='fa fa-chevron-left'></i>",
                        "<i class='fa fa-chevron-right'></i>",
                    ],
                    responsive: {
                        0: {
                            items: 2,
                            nav: false
                        },
                        600: {
                            items: 3
                        },
                        1000: {
                            items: 4
                        }
                    }
                });

                // Attach click event for each specific modal's thumbnails
                $(document).on('click', '.thumb-carousel6_{{ $product->id }} .thumb-img', function() {
                    let src = $(this).attr('src');
                    $('#mainImage2_{{ $product->id }}').attr('src', src);

                    $('.thumb-carousel6_{{ $product->id }} .thumb-img').removeClass('active');
                    $(this).addClass('active');
                });
            @endforeach
        });
    </script>
@endsection