@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-4">
                    <ul class="breadcrumb breadcrumb-style-2 d-block text-4 mb-4">
                        <li><a href="{{ route('home') }}"
                                class="text-color-default text-color-hover-primary text-decoration-none">{{ __('routes.Home') }}</a>
                        </li>
                        <li><a href="{{ route('package.index') }}"
                                class="text-color-default text-color-hover-primary text-decoration-none">{{ __('routes.Packages') }}</a>
                        </li>
                        <li>
                            {{ $package->name }}
                        </li>
                    </ul>

                </div>
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-5 col-md-5 mb-5 mb-md-0" id="product-images-render">
                                    <div id="packageCarousel" class="carousel slide" data-bs-ride="carousel">
                                        <div class="carousel-inner">
                                            @foreach ($packageImages as $index => $image)
                                                <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                    <img src="{{ $image->getUrl() }}" class="d-block w-100"
                                                        alt="Package Image">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-7">

                                    <div class="summary entry-summary position-relative">

                                        <h1 class="mb-0 font-weight-bold text-7">
                                            {{ $package->name }}
                                        </h1>

                                        <span class="mb-0 font-weight text-4">
                                            {{ $package->product->name }}
                                        </span>

                                        <div class="pb-0 clearfix d-flex align-items-center">
                                            <div title="Rated 3 out of 5" class="float-start">
                                                <input type="text" class="d-none" value="3" title=""
                                                    data-plugin-star-rating
                                                    data-plugin-options="{'displayOnly': true, 'color': 'primary', 'size':'xs'}">
                                            </div>

                                            <div class="review-num">
                                                <a href="#description"
                                                    class="text-decoration-none text-color-default text-color-hover-primary"
                                                    data-hash data-hash-offset="0" data-hash-offset-lg="75"
                                                    data-hash-trigger-click=".nav-link-reviews"
                                                    data-hash-trigger-click-delay="1000">
                                                    <span class="count text-color-inherit"
                                                        itemprop="ratingCount">({{ $reviewsCount }}</span>
                                                    {{ __('routes.reviews') }})
                                                </a>
                                            </div>
                                        </div>



                                        <p class="price mb-3">
                                            <span class="sale text-color-dark">{{ $package->sale_price }}
                                                {{ Helper::currentCurrency()->code }}</span>
                                            @if ($package->sale_price !== $package->purchase_price)
                                                <span class="amount">
                                                    {{ $package->purchase_price }} {{ Helper::currentCurrency()->code }}
                                                </span>
                                            @endif
                                        </p>

                                        <p class="text-3-5 mb-3">
                                            {{ $package->description }}
                                        </p>



                                        <form enctype="multipart/form-data" method="post" class="cart"
                                            action="{{ route('cart.add-package-to-cart', $package->slug) }}">
                                            @csrf

                                            <hr>
                                            <div class="quantity quantity-lg">
                                                <input type="button"
                                                    class="minus text-color-hover-light bg-color-hover-primary border-color-hover-primary"
                                                    value="-">
                                                <input type="text" class="input-text qty text" title="Qty"
                                                    value="1" name="quantity" min="1" step="1">
                                                <input type="button"
                                                    class="plus text-color-hover-light bg-color-hover-primary border-color-hover-primary"
                                                    value="+">
                                            </div>

                                            <button type="submit"
                                                @if (auth('web')->check()) id="add-to-cart-btn"
        @else
            data-bs-toggle="modal" data-bs-target="#authModal" @endif
                                                class="btn btn-dark btn-modern text-uppercase bg-color-hover-primary border-color-hover-primary">
                                                {{ __('routes.Add to cart') }}
                                            </button>

                                            <hr>
                                        </form>


                                        <div class="d-flex align-items-center">
                                            <ul
                                                class="social-icons social-icons-medium social-icons-clean-with-border social-icons-clean-with-border-border-grey social-icons-clean-with-border-icon-dark me-3 mb-0">
                                                <!-- Facebook -->
                                                <li class="social-icons-facebook">
                                                    <a href="http://www.facebook.com/sharer.php?u={{ url()->current() }}"
                                                        target="_blank" data-bs-toggle="tooltip" data-bs-animation="false"
                                                        data-bs-placement="top" title="Share On Facebook">
                                                        <i class="fab fa-facebook-f"></i>
                                                    </a>
                                                </li>
                                                <!-- Google+ -->
                                                <li class="social-icons-googleplus">
                                                    <a href="https://twitter.com/share?url={{ url()->current() }}"
                                                        target="_blank" data-bs-toggle="tooltip" data-bs-animation="false"
                                                        data-bs-placement="top" title="Share On Twitter">
                                                        <i class="fab fa-x-twitter"></i>
                                                    </a>
                                                </li>

                                                <!-- Email -->
                                                @if (Auth::guard('web')->check())
                                                    <li class="social-icons-email">
                                                        <a href="mailto:{{ Auth::guard('web')->user()->email }}?Subject=Lilian Store: {{ $package->name }} on this link now {{ url()->current() }}&amp;Body={{ url()->current() }}"
                                                            data-bs-toggle="tooltip" data-bs-animation="false"
                                                            data-bs-placement="top" title="Share By Email">
                                                            <i class="far fa-envelope"></i>
                                                        </a>
                                                    </li>
                                                @endif
                                            </ul>



                                        </div>


                                    </div>

                                </div>
                            </div>
                        </div>
                    </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.Description') }}
                                            </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">
                                            <p>
                                                {{ $package->package_details }}
                                            </p>
                                        </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('package.reviews.store', $package->slug) }}"
                                                            method="post">
                                                            @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 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>
    </section>
@endsection