@extends($activeTemplate . 'layouts.frontend')
@section('content')
@php
$contact = getContent('contact_us.content', true);
@endphp
<!-- < product details  -->
<section class="product-details pb-80 section--height">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="d-flex flex-column justify-content-start">
                    <h6 class="mb-2 fw--600 fs--24 title">{{__($product->title)}}</h6>
                    <div class="d-flex mb-4 gap--8 align-items-center">
                        <ul class="star--wrap d-flex">
                            <li>
                                @php
                                echo showRatings($product->average_rating);
                                @endphp
                                ({{$product->review_count}})
                            </li>
                        </ul>
                        <p class="fs--14">
                            <a href="javascript:void(0)" class="text--dark">
                                @if($product->review_count)
                                @lang('Customers reviews')
                                @else
                                @lang('No reviews')
                                @endif
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row gy-4">
            <div class="col-lg-8">
                <div class="product--img__preview position-relative overflow-hidden">
                    <div class="product--thumb bg--white radius--12 overflow-hidden">
                        <img class="fit--img" id="productImgSrc"
                            src="{{ getImage(getFilePath('product') . '/' . $product->image)}}" alt="@lang('image')">
                    </div>
                    <a href="{{$product->demo_link}}" class="preview-btn--wrap position-absolute z--2 radius--12">
                        <span class="preview--btn btn btn--base btn--md position-absolute"><i
                                class="fa-solid fa-up-right-from-square"></i> @lang('Launch Live Preview')</span>
                    </a>
                </div>

                <div class="product--description__wrap">
                    <ul class="custom--tabs buy-sell d-flex flex-wrap gap--4 z--1 mb-4" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="btn nav-link active" id="Profile-tab" data-bs-toggle="tab"
                                data-bs-target="#Profile" type="button" role="tab" aria-controls="Profile"
                                aria-selected="true">
                                @lang('Description')
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="btn nav-link" id="Notes-tab" data-bs-toggle="tab" data-bs-target="#Notes"
                                type="button" role="tab" aria-controls="Notes" aria-selected="false">
                                @lang('Reviews')
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="Profile" role="tabpanel"
                            aria-labelledby="Profile-tab">
                            <div class="description border-bottom--solid1 pb-4 mb-4">
                                @php echo $product->description; @endphp
                            </div>
                            <div class="support">
                                <h6>@lang('Support')</h6>
                                <p>
                                    @lang('Need support? Throw us an email at')
                                    <a href="mailto:{{$contact->data_values->email_address}}"
                                        class="text--base text-hover--underline">{{$contact->data_values->email_address}}</a>
                                    @lang('we\'re always glad to help you') 🙂
                                </p>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="Notes" role="tabpanel" aria-labelledby="Notes-tab">
                            <div class="row gy-4">
                                <div class="col-lg-12">
                                    <div class="base--card p-4">
                                        <h5 class="mb-4 fw-bold">@lang('Write a Review')</h5>
                                        <form action="{{ route('user.reviews.store') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="p_id" value="{{$product->id}}">
                                            <!-- Star Rating -->
                                            <div class="d-flex flex-wrap align-items-center gap--8 mb-4">
                                                <label class="form-label text-muted mb-0">@lang('Rating'):</label>
                                                <div class="rating-stars d-flex gap-1 flex-row-reverse">
                                                    <input type="radio" name="rating" id="star5" value="5">
                                                    <label for="star5" title="5 stars"><i
                                                            class="fa-solid fa-star"></i></label>

                                                    <input type="radio" name="rating" id="star4" value="4">
                                                    <label for="star4" title="4 stars"><i
                                                            class="fa-solid fa-star"></i></label>

                                                    <input type="radio" name="rating" id="star3" value="3">
                                                    <label for="star3" title="3 stars"><i
                                                            class="fa-solid fa-star"></i></label>

                                                    <input type="radio" name="rating" id="star2" value="2">
                                                    <label for="star2" title="2 stars"><i
                                                            class="fa-solid fa-star"></i></label>

                                                    <input type="radio" name="rating" id="star1" value="1">
                                                    <label for="star1" title="1 star"><i
                                                            class="fa-solid fa-star"></i></label>
                                                </div>

                                            </div>
                                            <!-- Textarea -->
                                            <div class="mb-4">
                                                <label for="review-text" class="form-label text-muted mb-2">@lang('Your
                                                    Review'):</label>
                                                <textarea id="review-text" class="form--control" name="review" rows="4"
                                                    placeholder="@lang('Write your honest feedback here')..."
                                                    required></textarea>
                                            </div>
                                            <!-- Submit Button -->
                                            <button type="submit" class="btn btn--base btn--lg w-100">
                                                <i class="fa-solid fa-paper-plane me-2"></i> @lang('Submit Review')
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <!-- Repeat other review-cards as needed -->
                                  @forelse($reviews as $item)
                                <div class="col-lg-12">
                                    <div class="review-card">
                                        <div class="user-info">
                                            <div class="thumb-wrap">
                                                <img class="fit--img"
                                                    src="{{ getImage(getFilePath('userProfile') . '/' . $item->user->image) }}"
                                                    alt="@lang('Image')">
                                            </div>
                                            <div class="user-name">
                                                <div class="d-flex align-items-center gap--8">
                                                    <h1 class="name fs--20 fw--600 mb-0">{{ $item->user->username }}
                                                    </h1>
                                                    <p class="fs--14">{{ diffForHumans($item->created_at) }}</p>
                                                </div>
                                                <ul class="rating-wrap">
                                                    <li>
                                                        @php echo showRatings($product->average_rating) @endphp
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="content">
                                            <p class="discription">{{$item->message}}</p>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <p>@lang('No Reviews')</p>
                                @endforelse
                                @if ($reviews->hasPages())
                                <div class="col-lg-12">
                                    <div class="py-4">
                                        {{ paginateLinks($reviews) }}
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-4">
                @include($activeTemplate . 'components.price_license_form')
                @include($activeTemplate . 'components.product_info')
            </div>
        </div>
    </div>
</section>
<!-- product details  /> -->

{{-- top selling --}}
<section class="feature--section pb-80 z--1">
    <div class="container">
        <div class="row gy-4 mb-40">
            <div class="col-12">
                <div
                    class="section-content-4 position-relative d-flex flex-wrap gap--8 justify-content-between align-items-center">
                    <h6 class="title heading--title wow animate__animated animate__fadeInUp text-start fs--28 fw--700 splite-text mb-0"
                        data-splitting data-wow-delay="0.2s">@lang('Top Selling')
                    </h6>

                    <div class="btn--wrap text-start text-md-end">
                        <a href="{{route('product')}}" class="btn btn--base">@lang('View All') <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center gy-4">
            @include($activeTemplate . 'components.product')
        </div>
    </div>
</section>

@endsection