@extends('web.layouts.app')

@section('title', $product->name)

@section('sub_header')
    <div class="sub-header">
        <div class="main-container">
            <div class="title-pages">
                <h2>{{ transWord('تفاصيل المنتج') }}</h2>
                <div class="breadcrumb-header">
                    <a href="{{ route('web.supply.home') }}"> {{ transWord('الرئيسية') }} </a>
                    <i class="bi bi-chevron-double-left"></i>
                    <a href="{{ route('web.supply.products.index') }}"> {{ transWord('المنتجات') }} </a>
                    <i class="bi bi-chevron-double-left"></i>
                    <span> {{ transWord('تفاصيل المنتج') }}</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="product-details mr-section">
        <div class="main-container">

            @livewire('product-details', ['productId' => $product->id])

            <div class="comment-product-details">
                <div class="title-product-details">
                    <h2>{{ transWord('التقييمات و التعليقات') }} <span>({{ count($product->reviews) }})</span></h2>
                </div>

                <ul>
                    @foreach ($product->reviews as $review)
                        <li>
                            <div class="img-comment">
                                <img src="{{ asset('web/imges/feedback.png') }}" alt="">
                            </div>
                            <div class="text-comment">
                                <h2>
                                    {{ $review->user->name }}
                                    <div class="rate">
                                        @for ($i = 1; $i <= 5; $i++)
                                            <span
                                                @if ($i <= $review->rate) class="fa fa-star checked"  @else class="fa fa-star" @endif></span>
                                        @endfor
                                        <i>({{ $review->rate }})</i>
                                    </div>
                                </h2>
                                <p> {{ $review->review }}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>

                <div class="add-comment">
                    <form method="post" action="{{ route('web.supply.reviews.store') }}">
                        @csrf
                        <!--<input type="hidden" name="rate" value="5">-->
                        {{-- <input type="hidden" name="user_id" value="1"> --}}
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="text" class="form-control" placeholder="{{ transWord('اكتب تعليقك') }}"
                            name="review">
                        @error('review')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                        <div class="form-control add-rate text-center">
                            <span class="rating">
                                <input type="radio" name="rate" id="star5" value="5">
                                <label for="star5"><span class="fa fa-star"></span></label>

                                <input type="radio" name="rate" id="star4" value="4">
                                <label for="star4"><span class="fa fa-star"></span></label>

                                <input type="radio" name="rate" id="star3" value="3">
                                <label for="star3"><span class="fa fa-star"></span></label>

                                <input type="radio" name="rate" id="star2" value="2">
                                <label for="star2"><span class="fa fa-star"></span></label>

                                <input type="radio" name="rate" id="star1" value="1">
                                <label for="star1"><span class="fa fa-star"></span></label>
                            </span>
                            @error('rate')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <button type="submit" id="review_button" class="ctm-btn"> {{ transWord('إرسال') }} </button>
                    </form>
                </div>
            </div>

            <div class="latest-products-index mr-section">
                <div class="title-start">
                    <h2>{{ transWord('منتجات قد تعجبك') }} </h2>
                </div>

                <div class="slider-product">
                    <div class="owl-carousel owl-theme" id="slider-product">
                        @foreach ($products as $product)
                            <div class="item">
                                <div class="sub-product">
                                    <div class="img-product">
                                        <img src="{{ asset('storage/' . $product?->images?->first()?->image) }}"
                                            alt="{{ $product->name }}">

                                        @include('web.includes.favorite-button')

                                        <div class="new-product" style="background: {{ $product->label_color }}">
                                            {{ $product->label }} </div>
                                        <a href="{{ route('web.supply.product-details', $product->slug) }}"
                                            class="add-to-cart-product">
                                            {{ transWord('اضف للسلة') }}
                                        </a>

                                    </div>

                                    <div class="text-product">
                                        <a href="{{ route('web.supply.product-details', $product->slug) }}">

                                            <h2>{{ $product->name }}</h2>
                                            <div class="rate">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    <span
                                                        @if ($i <= $product->averageRate()) class="fa fa-star checked"  @else class="fa fa-star" @endif></span>
                                                @endfor
                                                <i>({{ $product->averageRate() }})</i>
                                            </div>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    @push('css')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    @endpush

    @push('js')
        <script>
            // $('#review_button').on('click', function(e) {
            //     e.preventDefault();

            //     var form = $('#review_form');

            //     const formData = new FormData(form[0]); // Use form[0] to get the actual DOM element

            //     $.ajax({
            //         type: 'post',
            //         url: "{{ route('web.supply.reviews.store') }}",
            //         data: formData,
            //         processData: false, // Prevent jQuery from processing the data
            //         contentType: false, // Prevent jQuery from setting content type
            //         headers: {
            //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //         },
            //         success: function(res) {
            //             console.log(res);
            //         },
            //         error: function(res) {
            //             console.log(res);
            //         }
            //     });
            // });
        </script>
    @endpush
@endsection