@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-lg-center justify-content-md-start align-item-center">
                <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                    <nav aria-label="breadcrumb" style="position: relative; z-index: 999;">
                        <ol class="breadcrumb mt-lg-3 pt-4 pt-lg-3">
                            <li class="breadcrumb-item"><a href="{{ route('website.home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('website.listing') }}">Special Flowers</a></li>
                            <li class="breadcrumb-item active">
                                <a href="#">
                                    @if (session('app_language', 'en') == 'en')
                                        {{ $product->title_en ?? '' }}
                                    @else
                                        {{ $product->title_ar ?? '' }}
                                    @endif
                                </a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <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">
                                {{-- @if (!empty($product->after_discount))
                                    <div class="ribbon"><span>BEST OFFER</span></div>
                                @endif --}}
                                <!-- Large Preview Image -->
                                <img id="mainImage"
                                    src="{{ 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-carousel">
                                    @foreach ($product->images as $index => $image)
                                        <div class="item">
                                            <img src="{{ asset('uploads/products/' . $image->filename) }}"
                                                class="thumb-img {{ $index == 0 ? 'active' : '' }}"
                                                onclick="changeImage(this)"
                                                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 class="p-detail">
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                    clients reviews(7)
                                    @else
                                    آراء العملاء(7)
                                    @endif
                                </h5>
                                <div class="stars-review text-start mb-3">
                                    <span>4.57</span>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>

                                <div class="review-card">
                                    <div class="d-flex justify-content-start align-items-center mt-3">
                                        <img src="{{ asset('website/images/user.png') }}" alt="User"
                                            class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                        <div>
                                            <div class="review-name m-0">Jane Lee</div>
                                             <div class="review-time">3 hours ago</div>
                                        </div>
                                    </div>
                                    <div class="stars ">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                    <p>
                                        It is a long established fact that a reader will be
                                        distracted by the readable content of a page when looking
                                        at its layout. The point of using Lorem Ipsum is that it
                                        has a more-or-less normal distribution of letters, as
                                        opposed
                                    </p>
                                </div>
                                <div class="review-card">
                                    <div class="d-flex justify-content-start align-items-center mt-3">
                                        <img src="{{ asset('website/images/user.png') }}" alt="User"
                                            class="img-fluid {{ session('app_language', 'en') == 'ar' ? 'ms-3' : 'me-3' }}">
                                        <div>
                                            <div class="review-name m-0">Jane Lee</div>
                                            <div class="review-time">3 hours ago</div>
                                        </div>
                                    </div>
                                    <div class="stars ">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                    <p>
                                        It is a long established fact that a reader will be
                                        distracted by the readable content of a page when looking
                                        at its layout. The point of using Lorem Ipsum is that it
                                        has a more-or-less normal distribution of letters, as
                                        opposed
                                    </p>
                                </div>
                            </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">
                                    <label class="form-label">
                                        @if (session('app_language', 'en') == 'en')
                                            Choose a delivery date
                                        @else
                                            اختر تاريخ التسليم
                                        @endif
                                    </label>
                                    <input type="date" class="form-control" id="delivery_date_{{ $product->id }}"
                                        placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery date' : 'اختر تاريخ التسليم' }}" />
                                </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 }}"
                                        placeholder="{{ session('app_language', 'en') == 'en' ? 'Choose a delivery time' : 'اختر وقت التسليم' }}" />
                                </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"
                                    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"
                                    placeholder="{{ session('app_language', 'en') == 'en' ? 'Note - Special with love for you' : 'ملحوظة - مع الحب لك' }}"></textarea>


                                <h4 class="mt-2">
                                    <a style="cursor: pointer;" data-bs-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 />
                                </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" />
                                </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-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>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-4" />
                            <h5 class="mt-1 mb-3">
                                <a class="customer_loy" href="">
                                    @if (session('app_language', 'en') == 'en')
                                        Customer Loyalty Plans
                                    @else
                                        خطط ولاء العملاء
                                    @endif
                                </a>
                            </h5>
                            <ul class="mb-3 mb-lg-0">
                                <li>
                                    @if (session('app_language', 'en') == 'en')
                                        You will earn 10 points.
                                    @else
                                        سوف تحصل على 10 نقاط.
                                    @endif
                                </li>
                                <li>
                                    @if (session('app_language', 'en') == 'en')
                                        To redeem your points? You need to <a href="#">Sign Up</a>
                                    @else
                                        لاستبدال نقاطك؟ عليك <a href="#">اشتراك</a>
                                    @endif
                                </li>
                            </ul>
                            <hr class="mt-lg-4 mt-3" />

                            <div class="social-icons d-flex justify-content-start align-items-center">

                                <h5 class="mt-3 {{ session('app_language', 'en') == 'ar' ? 'ps-3' : 'pe-3' }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Share
                                    @else
                                        يشارك
                                    @endif
                                </h5>
                                <div>
                                    <a href="#"><i class="fab fa-facebook"></i></a>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-pinterest"></i></a>
                                </div>
                            </div>

                            <div class="small-banners d-flex justify-content-start align-items-center">
                                <img src="{{ asset('website/images/detail-img.png') }}" alt=""
                                    class="mt-3 img-fluid w-100" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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">
                            @if (session('app_language', 'en') == 'en')
                                Recommended products
                            @else
                                المنتجات الموصى بها
                            @endif
                        </h3>
                        <p class="title-text">
                            @if (session('app_language', 'en') == 'en')
                                The most beautiful bouquets & gifts for occasions!
                            @else
                                أجمل الباقات والهدايا للمناسبات!
                            @endif
                        </p>
                    </div>
                    <div class="owl-carousel owl-theme slider" id="carousel2" style="direction: ltr !important;">
                        @foreach ($relatedProducts as $related)
                            <div class="item">
                                <div class="card custom-card border-0">
                                    <div class="custom-img">
                                        @if (!empty($related->after_discount))
                                            <div class="ribbon">
                                                <span>
                                                    @if (session('app_language', 'en') == 'en')
                                                        BEST OFFER
                                                    @else
                                                        أفضل عرض
                                                    @endif
                                                </span>
                                            </div>
                                        @endif
                                        <img src="{{ asset('uploads/products/' . $related->images->first()->filename) }}"
                                            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></a>
                                            </div>
                                            <div class="eye-icon">
                                                <a href="#"><i class="bi bi-eye"></i></a>
                                            </div>
                                        </div>
                                        <div class="select_button">
                                            <a href="{{ route('website.listing.details', $related->slug) }}">
                                                @if (session('app_language', 'en') == 'en')
                                                    Select Options
                                                @else
                                                    حدد الخيارات
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body text-center mt-3">
                                        <h5 class="card-title">
                                            @if (session('app_language', 'en') == 'en')
                                                {{ $related->title_en ?? '' }}
                                            @else
                                                {{ $related->title_ar ?? '' }}
                                            @endif
                                        </h5>
                                        <span class="card-price text-muted">{{ display_price($related->price) }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : 'me-2' }}"/>
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        Express Delivery
                                    @else
                                        التسليم السريع
                                    @endif
                                </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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : 'me-2' }}"/>
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        No Address Hassle
                                    @else
                                        لا يوجد متاعب في العنوان
                                    @endif
                                </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 {{ session('app_language', 'en') == 'ar' ? 'ms-2' : 'me-2' }}"/>
                                <h5 class="mt-3">
                                    @if (session('app_language', 'en') == 'en')
                                        Premium Flowers & Gifts
                                    @else
                                        زهور وهدايا مميزة
                                    @endif
                                </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");
                    }
                });
            });
        });
        
    </script>
    <script>
        const dropArea = document.getElementById("dropArea");
        const fileInput = document.getElementById("fileInput");

        dropArea.addEventListener("click", () => fileInput.click());

        dropArea.addEventListener("dragover", (e) => {
            e.preventDefault();
            dropArea.classList.add("dragover");
        });

        dropArea.addEventListener("dragleave", () => {
            dropArea.classList.remove("dragover");
        });

        dropArea.addEventListener("drop", (e) => {
            e.preventDefault();
            dropArea.classList.remove("dragover");
            const files = e.dataTransfer.files;
            console.log("Dropped files:", files); // you can process files here
        });

        fileInput.addEventListener("change", () => {
            console.log("Selected file:", fileInput.files[0]); // handle selected file
        });
    </script>
@endsection