@extends('frontend.layouts.master')

@section('content')
    <section class="section border-0 m-0 py-2">
        <div class="container-xxl">

            <div class="row">
                <div class="col-12 mb-2 d-flex align-items-center">
                    <ul class="breadcrumb breadcrumb-style-2 d-block text-4">
                        <li>
                            <a href="{{ route('store-all-data') }}"
                               class="text-color-default text-color-hover-primary text-decoration-none">
                                {{ __('routes.Products') }}
                            </a>
                        </li>
                        <li>
                            {{ $product->name }}
                        </li>
                    </ul>
                </div>
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <livewire:product-details :product="$product"/>
                        </div>
                    </div>
                </div>
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div id="description"
                                         class="tabs tabs-simple tabs-simple-full-width-line tabs-product tabs-dark mb-2">
                                        <ul class="nav nav-tabs justify-content-start">
                                            <li class="nav-item">
                                                <a class="nav-link active font-weight-bold text-3 text-uppercase py-2 px-3"
                                                   href="#productDescription" data-bs-toggle="tab">
                                                    {{ __('routes.Details') }}
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link font-weight-bold text-3 text-uppercase py-2 px-3"
                                                   href="#productInfo" data-bs-toggle="tab">
                                                    {{ __('routes.Additional Information') }}
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link nav-link-reviews font-weight-bold text-3 text-uppercase py-2 px-3"
                                                   href="#productReviews" data-bs-toggle="tab">
                                                    {{ __('routes.reviews') }} ({{ $reviewsCount }})
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content p-0">
                                            <div class="tab-pane px-0 py-3 active" id="productDescription">
                                                {!! $product->product_details !!}
                                            </div>
                                            <div class="tab-pane px-0 py-3" id="productInfo">
                                                <table class="table table-striped m-0">
                                                    <tbody>
                                                    @if (count($sizes) > 0)
                                                        <tr>
                                                            <th class="border-top-0">
                                                                {{ __('routes.SIZE:') }}
                                                            </th>
                                                            <td class="border-top-0">
                                                                @foreach ($sizes as $key => $size)
                                                                    <span>{{ $size->size ?? '' }},</span>
                                                                @endforeach

                                                            </td>
                                                        </tr>
                                                    @endif
                                                    <tr>
                                                        <th>
                                                            {{ __('routes.COLORS:') }}
                                                        </th>
                                                        <td>
                                                            @foreach ($colors as $key => $color)
                                                                <span>{{ $color->name }},</span>
                                                            @endforeach
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="tab-pane px-0 py-3" id="productReviews">
                                                <ul class="comments">
                                                    @foreach ($reviews as $key => $review)
                                                        <li>
                                                            <div class="comment">
                                                                <div
                                                                    class="img-thumbnail border-0 p-0 d-none d-md-block">
                                                                    <img class="avatar rounded-circle" alt=""
                                                                         src="{{ asset($review->user->image_url) }}"
                                                                         style="mix-blend-mode: multiply;">
                                                                </div>
                                                                <div class="comment-block">
                                                                    <div class="comment-arrow"></div>
                                                                    <span class="comment-by">
                                                                        <strong>
                                                                            {{ $review->user->first_name . ' ' . $review->user->last_name }}
                                                                        </strong>
                                                                        <span class="float-end">
                                                                            <div class="pb-0 clearfix">
                                                                                <div title="Rated 3 out of 5"
                                                                                     class="float-start">
                                                                                    <input type="text" class=""
                                                                                           value="{{ $review->rate }}"
                                                                                           title=""
                                                                                           data-plugin-star-rating
                                                                                           data-plugin-options="{'displayOnly': true, 'color': 'primary', 'size':'xs'}">
                                                                                </div>
                                                                            </div>
                                                                        </span>
                                                                    </span>
                                                                    <p>
                                                                        {{ $review->review }}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                                <hr class="solid my-5">
                                                @if (auth('web')->check())
                                                    <h4>{{ __('routes.Add a review') }}</h4>

                                                    <div class="row">
                                                        <div class="col">
                                                            <form
                                                                action="{{ route('products.reviews.store', $product->slug) }}"
                                                                method="post" enctype="multipart/form-data">
                                                                @csrf
                                                                <div class="row">
                                                                    <div class="form-group col pb-2">
                                                                        <label
                                                                            class="form-label required font-weight-bold text-dark">{{ __('routes.Rating') }}</label>
                                                                        <input type="text" class="rating-loading"
                                                                               value="0" title=""
                                                                               data-plugin-star-rating
                                                                               data-plugin-options="{'color': 'primary', 'size':'sm'}"
                                                                               onchange="document.getElementById('rate').value = this.value">
                                                                        <input type="hidden" name="rate"
                                                                               id="rate" value="0">
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="form-group col-lg-6">
                                                                        <label
                                                                            class="form-label required font-weight-bold text-dark">{{ __('routes.name') }}</label>
                                                                        <input type="text" value=""
                                                                               data-msg-required="Please enter your name."
                                                                               maxlength="100" class="form-control"
                                                                               name="name" required>
                                                                    </div>
                                                                    <div class="form-group col-lg-6">
                                                                        <label
                                                                            class="form-label required font-weight-bold text-dark">{{ __('routes.email') }}
                                                                            {{ __('routes.address') }}</label>
                                                                        <input type="email" value=""
                                                                               data-msg-required="Please enter your email address."
                                                                               data-msg-email="Please enter a valid email address."
                                                                               maxlength="100" class="form-control"
                                                                               name="email" required>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="form-group col">
                                                                        <label
                                                                            class="form-label required font-weight-bold text-dark">{{ __('routes.reviews') }}</label>
                                                                        <textarea maxlength="5000"
                                                                                  data-msg-required="Please enter your review."
                                                                                  rows="8" class="form-control"
                                                                                  name="review" id="review"
                                                                                  required></textarea>
                                                                    </div>
                                                                </div>
                                                                <!-- إضافة حقل رفع الصورة -->
                                                                <div class="row">
                                                                    <div class="form-group col">
                                                                        <label
                                                                            class="form-label font-weight-bold text-dark">{{ __('routes.image') }}</label>
                                                                        <input type="file" class="form-control"
                                                                               name="image" accept="image/*" required>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="form-group col mb-0">
                                                                        <input type="submit"
                                                                               value="{{ __('routes.Post Review') }}"
                                                                               class="btn btn-primary btn-modern"
                                                                               data-loading-text="Loading...">
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                @endif


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

            <hr class="my-5">

            <div class="products row">
                @if (count($featuredProducts) > 0)
                    <div class="col-md-6 col-lg-3">
                        <h4 class="font-weight-semibold text-4 mb-3">{{ __('routes.Featured Products') }}</h4>

                        @foreach ($featuredProducts as $key => $featuredProduct)
                            <div class="product row row-gutter-sm align-items-center mb-4">
                                <div class="col-5 col-md-12 col-lg-5">
                                    <div class="product-thumb-info border-0">
                                        <a href="#">
                                            <div class="product-thumb-info-image">
                                                <img alt="IMG" class="img-fluid"
                                                     src="{{ $featuredProduct->getFirstMediaUrl(Helper::PRODUCT_MAIN_IMAGE_COLLECTION) }}">

                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-7 col-md-12 col-lg-7 ms-md-0 ms-lg-0 ps-lg-1 pt-1">
                                    <h3
                                        class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0">
                                        <a href="{{ route('products.show', $featuredProduct->slug) }}"
                                           class="text-color-dark text-color-hover-primary text-decoration-none">
                                            {{ $featuredProduct->name }}
                                        </a>
                                    </h3>
                                    <div title="Rated 5 out of 5">
                                        <input type="text" class="d-none" value="5" title=""
                                               data-plugin-star-rating
                                               data-plugin-options="{'displayOnly': true, 'color': 'dark', 'size':'xs'}">
                                    </div>

                                    <p class="price text-4 mb-0">
                                        <span class="sale text-color-dark font-weight-semi-bold">
                                            {{ Helper::calculatePrice($featuredProduct->sale_price) }}
                                            {{ Helper::currentCurrency()->code }}
                                        </span>
                                        @if ($featuredProduct->sale_price !== $featuredProduct->regular_price)
                                            <span
                                                class="amount">{{ Helper::calculatePrice($featuredProduct->regular_price) }}
                                                {{ Helper::currentCurrency()->code }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        @endforeach


                    </div>
                @endif
                @if (count($bestSaleProducts) > 0)
                    <div class="col-md-6 col-lg-3">
                        <h4 class="font-weight-semibold text-4 mb-3">{{ __('routes.BEST SELLING PRODUCTS') }}</h4>
                        @foreach ($bestSaleProducts as $key => $bestSaleProduct)
                            <div class="product row row-gutter-sm align-items-center mb-4">
                                <div class="col-5 col-md-12 col-lg-5">
                                    <div class="product-thumb-info border-0">
                                        <a href="{{ route('products.show', $bestSaleProduct->slug) }}">
                                            <div class="product-thumb-info-image">
                                                <img alt="" class="img-fluid"
                                                     src="{{ $bestSaleProduct->getFirstMediaUrl(Helper::PRODUCT_MAIN_IMAGE_COLLECTION) }}">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-7 col-md-12 col-lg-7 ms-md-0 ms-lg-0 ps-lg-1 pt-1">
                                    <h3
                                        class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0">
                                        <a href="{{ route('products.show', $bestSaleProduct->slug) }}"
                                           class="text-color-dark text-color-hover-primary text-decoration-none">
                                            {{ $bestSaleProduct->name }}
                                        </a>
                                    </h3>
                                    <div title="Rated 5 out of 5">
                                        <input type="text" class="d-none" value="5" title=""
                                               data-plugin-star-rating
                                               data-plugin-options="{'displayOnly': true, 'color': 'dark', 'size':'xs'}">
                                    </div>
                                    <p class="price text-4 mb-0">
                                        <span class="sale text-color-dark font-weight-semi-bold">
                                            {{ Helper::calculatePrice($bestSaleProduct->sale_price) }}
                                            {{ Helper::currentCurrency()->code }}
                                        </span>
                                        @if ($bestSaleProduct->sale_price !== $bestSaleProduct->regular_price)
                                            <span class="amount">
                                                {{ $bestSaleProduct->regular_price }}
                                                {{ Helper::currentCurrency()->code }}
                                            </span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        @endforeach


                    </div>
                @endif

                @if (count($latestProducts) > 0)
                    <div class="col-md-6 col-lg-3">
                        <h4 class="font-weight-semibold text-4 mb-3">{{ __('routes.LATEST PRODUCTS') }}</h4>
                        @foreach ($latestProducts as $key => $latestProduct)
                            <div class="product row row-gutter-sm align-items-center mb-4">
                                <div class="col-5 col-md-12 col-lg-5">
                                    <div class="product-thumb-info border-0">
                                        <a href="{{ route('products.show', $latestProduct->slug) }}">
                                            <div class="product-thumb-info-image">
                                                <img alt="IMG" class="img-fluid"
                                                     src="{{ $latestProduct->getFirstMediaUrl(Helper::PRODUCT_MAIN_IMAGE_COLLECTION) }}">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-7 col-md-12 col-lg-7 ms-md-0 ms-lg-0 ps-lg-1 pt-1">
                                    <h3
                                        class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0">
                                        <a href="{{ route('products.show', $latestProduct->slug) }}"
                                           class="text-color-dark text-color-hover-primary text-decoration-none">
                                            {{ $latestProduct->name }}
                                        </a>
                                    </h3>
                                    <div title="Rated 5 out of 5">
                                        <input type="text" class="d-none" value="5" title=""
                                               data-plugin-star-rating
                                               data-plugin-options="{'displayOnly': true, 'color': 'dark', 'size':'xs'}">
                                    </div>
                                    <p class="price text-4 mb-0">
                                        <span class="sale text-color-dark font-weight-semi-bold">
                                            {{ Helper::calculatePrice($latestProduct->sale_price) }}
                                            {{ Helper::currentCurrency()->code }}
                                        </span>
                                        <span class="amount">
                                            {{ Helper::calculatePrice($latestProduct->sale_price) }}
                                            {{ Helper::currentCurrency()->code }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        @endforeach


                    </div>
                @endif


            </div>
        </div>
    </section>
@endsection