@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb">
        <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 orderdetailsbreadcrumb mt-lg-4 py-4 pt-lg-2">
                            <li class="breadcrumb-item ">
                                <a href="{{ route('website.cart') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Cart
                                    @else
                                        عربة
                                    @endif
                                </a>
                            </li>
                            <li class="breadcrumb-item "><a href="{{ route('website.shipping.details') }}">
                                    @if (session('app_language', 'en') == 'en')
                                        Checkout
                                    @else
                                        الدفع
                                    @endif
                                </a></li>
                            <li class="breadcrumb-item active"><a href="#">
                                    @if (session('app_language', 'en') == 'en')
                                        Order Complete
                                    @else
                                        اكتمل الطلب
                                    @endif
                                </a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <section id="order-confirm">
        <div class="container-fluid container-fluid mt-lg-4 mt-3 mb-lg-5 mb-md-4 mb-3 fixedwidth">
            <div class="row d-flex justify-content-center align-items-center my-lg-5 my-md-3">
                <div class="col-lg-10">
                    <div class="card rounded-4 p-md-4 p-3">
                        <h5 class="order-header">
                            @if (session('app_language', 'en') == 'en')
                                Thank you. Your order has been received
                            @else
                                شكرًا لك. تم استلام طلبك.
                            @endif.
                        </h5>
                        <!-- Order Summary -->
                        <div class="order-summary row mt-3">
                            <div class="col-xxl-2  col-lg-2 col-md-2 col-4 item">
                                <h6><strong>
                                        @if (session('app_language', 'en') == 'en')
                                            Order Number:
                                        @else
                                            رقم الطلب:
                                        @endif
                                    </strong>
                                </h6>
                                <p>#{{ $order->id }}</p>
                            </div>
                            <div class="col-xxl-2 col-lg-2 col-md-2 col-4 item ">
                                <h6><strong>
                                        @if (session('app_language', 'en') == 'en')
                                            Order Date:
                                        @else
                                            تاريخ الطلب:
                                        @endif
                                    </strong>
                                </h6>
                                <p>{{ $order->created_at->format('F d, Y') }}</p>
                            </div>
                            <div class="col-xxl-2 col-lg-3 col-md-2 col-4 item ">
                                <h6><strong>
                                        @if (session('app_language', 'en') == 'en')
                                            Order Email:
                                        @else
                                            البريد الإلكتروني للطلب:
                                        @endif
                                    </strong>
                                </h6>
                                <p>{{ $order->user->email ?? '-' }}</p>
                            </div>
                            <div class="col-xxl-2 col-lg-2 col-md-2 col-4 item ">
                                <h6><strong>
                                        @if (session('app_language', 'en') == 'en')
                                            Order Total:
                                        @else
                                            إجمالي الطلب:
                                        @endif
                                    </strong>
                                </h6>
                                <p>{{ $order->currency_code ?? '' }} {{ $order->subtotal ?? '' }}</p>
                            </div>
                            <div class="col-xxl-2 col-lg-3 col-md-2 col-4 item ">
                                <h6><strong>
                                        @if (session('app_language', 'en') == 'en')
                                            payment method:
                                        @else
                                            طريقة الدفع:
                                        @endif
                                    </strong>
                                </h6>
                                <p>{{ $order->payment_method }}</p>

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


                    <div class="top-title text-center mt-md-5 mt-4">

                        <h3 class=" {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}">
                            @if (session('app_language', 'en') == 'en')
                                Order Details
                            @else
                                تفاصيل الطلب
                            @endif
                        </h3>

                    </div>
                    <div class="order-border border-1">
                        <div class=" d-flex justify-content-between align-items-center">
                            <h6><strong>
                                    @if (session('app_language', 'en') == 'en')
                                        Product
                                    @else
                                        منتج
                                    @endif
                                </strong>
                            </h6>
                            <h6><strong>
                                    @if (session('app_language', 'en') == 'en')
                                        Total
                                    @else
                                        المجموع
                                    @endif
                                </strong></h6>
                        </div>
                        <hr>



                        <div class="d-flex justify-content-between align-item-start mb-3">
                            <table class="table table-bordered w-100">
                                <thead>
                                    <tr>
                                        <th>
                                            @if (session('app_language', 'en') == 'en')
                                                Product
                                            @else
                                                منتج
                                            @endif
                                        </th>
                                        <th>
                                            @if (session('app_language', 'en') == 'en')
                                                Delivery Date
                                            @else
                                                تاريخ التسليم او الوصول
                                            @endif
                                        </th>
                                        <th>
                                            @if (session('app_language', 'en') == 'en')
                                                Price
                                            @else
                                                سعر
                                            @endif
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->items as $item)
                                        <tr>
                                            <td>{{ $item->name }} x {{ $item->qty }}</td>
                                            <td>
                                                @if (!empty($item->delivery_date))
                                                    @if (session('app_language', 'en') == 'en')
                                                        Choose a delivery date:
                                                    @else
                                                        اختر تاريخ التسليم:
                                                    @endif
                                                    {{ $item->delivery_date }}
                                                @endif
                                            </td>
                                            <td>{{ $order->currency_code ?? '' }}
                                                {{ number_format($item->qty * $item->price, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <span></span> <span class="price my-2">{{ $order->currency_code ?? '' }}
                                {{ $order->subtotal }}</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <h6><strong>

                                    @if (session('app_language', 'en') == 'en')
                                        Subtotal:
                                    @else
                                        المجموع الفرعي:
                                    @endif

                                </strong></h6><span class="float-end my-2">{{ $order->currency_code ?? '' }}
                                {{ $order->subtotal }}</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <h6><strong>
                                    @if (session('app_language', 'en') == 'en')
                                        Shipping:
                                    @else
                                        شحن:
                                    @endif
                                </strong></h6><span class="float-end my-2">Flat rate</span>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <h6><strong>VAT:</strong></h6><span class="float-end my-2">{{ $order->currency_code ?? '' }}
                                0</span>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <h6><strong>
                                    @if (session('app_language', 'en') == 'en')
                                        payment method:
                                    @else
                                        طريقة الدفع:
                                    @endif
                                </strong></h6><span class="float-end my-2">{{ $order->payment_method }}</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <h6><strong>
                                    @if (session('app_language', 'en') == 'en')
                                        Order Total:
                                    @else
                                        إجمالي الطلب:
                                    @endif
                                </strong></h6><span class="float-end my-2">{{ $order->currency_code ?? '' }}
                                {{ $order->subtotal }}</span>
                        </div>
                    </div>
                    {{ $reviewStatus }}
                    <!-- Customer Review Section -->
                    <form id="productReview" method="POST">
                        @csrf
                        <input type="hidden" name="order_id" id="order_id" value="{{ $order->id }}">
                        <div class="review my-lg-5 my-3">
                            <div class="top-title text-center">
                                <h3 class=" {{ session('app_language', 'en') == 'ar' ? 'text-end' : 'text-start' }}  mb-0">
                                    @if (session('app_language', 'en') == 'en')
                                        Customer Review
                                    @else
                                        مراجعة العملاء
                                    @endif
                                </h3>
                            </div>
                            <p class="mb-2">
                                @if (session('app_language', 'en') == 'en')
                                    Enter review to get rewards
                                @else
                                    أدخل المراجعة للحصول على المكافآت
                                @endif
                            </p>
                            <hr>
                            @foreach ($order->items as $index => $item)
                                @php
                                    $product = $products[$item->id] ?? null;
                                @endphp

                                @if ($product)
                                    <div class="row mt-4 border-bottom pb-3">
                                        {{-- Product Image & Title --}}
                                        <div class="col-md-6">
                                            @if ($product->images->isNotEmpty())
                                                <img src="{{ asset('uploads/products/' . $product->images->first()->filename) }}"
                                                    alt="{{ $product->title_en }}" style="max-width: 100px;">
                                            @else
                                                <p>No image available</p>
                                            @endif

                                            <p class="mt-2"><strong>{{ $product->title_en }}</strong></p>
                                        </div>

                                        {{-- Star Rating --}}
                                        <div class="col-md-6">
                                            <div
                                                class="stars {{ session('app_language', 'en') == 'ar' ? 'text-start' : 'text-end' }}">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    <input type="radio" name="rating[{{ $item->id }}]"
                                                        id="star{{ $i }}-{{ $item->id }}"
                                                        value="{{ $i }}" hidden>
                                                    <label for="star{{ $i }}-{{ $item->id }}"
                                                        class="star" data-value="{{ $i }}">
                                                        <i class="bi bi-star"></i>
                                                    </label>
                                                @endfor
                                            </div>
                                        </div>

                                        {{-- Description Textarea --}}
                                        <div class="col-md-12">
                                            <textarea class="form-control mt-2" name="description[{{ $item->id }}]" rows="4"
                                                placeholder="Write your review..."></textarea>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        {{-- {{ $reviewStatus }} --}}
                        @if ($reviewStatus != 1)
                            <div class="row d-flex align-items-end justify-content-end">
                                <div class="col-lg-2 col-md-3 col-12 pe-lg-0 px-lg-0 my-2 my-lg-0">
                                    <div class="mb-3 g-count-btn text-end">
                                        <div class="cart_button">
                                            <button type="submit" class="bmt-3">
                                                @if (session('app_language', 'en') == 'en')
                                                    Add Review
                                                @else
                                                    أضف مراجعة
                                                @endif
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </form>
                </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 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>
        document.addEventListener('DOMContentLoaded', function() {
            const allStarContainers = document.querySelectorAll('.stars');

            allStarContainers.forEach(container => {
                const stars = container.querySelectorAll('.star');

                stars.forEach(star => {
                    star.addEventListener('click', () => {
                        const value = parseInt(star.getAttribute('data-value'));
                        const itemId = star.getAttribute('for').split('-')[
                            1]; // Extract item ID from "star3-123"

                        // Reset all stars in this container
                        stars.forEach((s, i) => {
                            const icon = s.querySelector('i');
                            icon.className = (i < value) ? 'bi bi-star-fill' :
                                'bi bi-star';
                        });

                        // Set the correct radio button as checked
                        const radioInput = container.querySelector(
                            `#star${value}-${itemId}`);
                        if (radioInput) radioInput.checked = true;
                    });
                });
            });
        });
        // $(document).ready(function() {
        //     $(document).on("submit", "#productReview", function(event) {
        //         event.preventDefault();

        //         let hasReview = false;
        //         let hasRating = false;

        //         // Check if at least one review textarea is filled
        //         $('textarea[name^="description"]').each(function() {
        //             if ($(this).val().trim() !== "") {
        //                 hasReview = true;
        //             }
        //         });

        //         // Check if at least one rating is selected
        //         $('input[type="radio"]:checked').each(function() {
        //             hasRating = true;
        //         });

        //         // If either is missing, show error and prevent submission
        //         if (!hasReview || !hasRating) {
        //             toastr.error("At least one review and one rating is required.", "Validation Error");
        //             return;
        //         }

        //         let form = this;
        //         let data = new FormData(form);

        //         $("button[type=submit]").prop('disabled', true);

        //         $.ajax({
        //             url: '{{ route('review.store') }}',
        //             type: 'POST',
        //             data: data,
        //             contentType: false,
        //             processData: false,
        //             success: function(response) {
        //                 if (response.status === true) {
        //                     toastr.success(response.message, "Success");
        //                     form.reset(); // Reset the form
        //                     $("button[type=submit]").prop('disabled', false);
        //                 } else {
        //                     let errors = response.errors || {};
        //                     $.each(errors, function(key, value) {
        //                         toastr.error(value, "Validation Error");
        //                     });
        //                     $("button[type=submit]").prop('disabled', false);
        //                 }
        //             },
        //             error: function() {
        //                 toastr.error("Please try again later.", "Error");
        //                 $("button[type=submit]").prop('disabled', false);
        //             }
        //         });
        //     });
        // });
        $(document).ready(function() {
            $(document).on("submit", "#productReview", function(event) {
                event.preventDefault();

                let isValid = true;
                let hasAtLeastOneReview = false;

                // Disable submit button early
                $("button[type=submit]").prop('disabled', true);

                $('textarea[name^="description"]').each(function() {
                    let key = $(this).attr('name').match(/\[(\d+)\]/)[1];
                    let description = $(this).val().trim();
                    let rating = $(`input[name="rating[${key}]"]:checked`).val();

                    // ✅ If one complete review is found, stop validation
                    if (description && rating) {
                        hasAtLeastOneReview = true;
                        return false; // stop loop
                    }

                    // ❌ If one field is missing, show error and stop
                    if ((description && !rating) || (!description && rating)) {
                        isValid = false;
                        toastr.clear();
                        toastr.error("Please provide both rating and review for each product.",
                            "Validation Error");
                        setTimeout(() => {
                            toastr.clear();
                            $("button[type=submit]").prop('disabled', false);
                        }, 3000);
                        return false; // stop loop
                    }
                });

                if (!isValid) return;

                // ❌ No complete review at all
                if (!hasAtLeastOneReview) {
                    toastr.clear();
                    toastr.error("Please provide at least one complete review and rating.",
                        "Validation Error");
                    setTimeout(() => {
                        toastr.clear();
                        $("button[type=submit]").prop('disabled', false);
                    }, 3000);
                    return;
                }

                // ✅ Submit the form via AJAX
                let form = this;
                let data = new FormData(form);

                $.ajax({
                    url: '{{ route('review.store') }}',
                    type: 'POST',
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.status === true) {
                            toastr.clear();
                            toastr.success(response.message, "Success");
                            form.reset();
                            $("button[type=submit]").hide();
                            setTimeout(() => {
                                toastr.clear();
                                $("button[type=submit]").prop('disabled', false);
                            }, 3000);
                        } else {
                            let errors = response.errors || {};
                            if (Object.keys(errors).length > 0) {
                                let firstKey = Object.keys(errors)[0];
                                let firstError = errors[firstKey];
                                toastr.clear();
                                toastr.error(firstError, "Validation Error");

                                setTimeout(() => {
                                    toastr.clear();
                                    $("button[type=submit]").prop('disabled', false);
                                }, 3000);
                            } else {
                                $("button[type=submit]").prop('disabled', false);
                            }
                        }
                    },
                    error: function() {
                        toastr.clear();
                        toastr.error("Please try again later.", "Error");
                        setTimeout(() => {
                            toastr.clear();
                            $("button[type=submit]").prop('disabled', false);
                        }, 3000);
                    }
                });
            });
        });
    </script>
@endsection