@extends('website.layout.master')

@section('title')
    Details
@endsection

@section('content')

    <!-- Start Page Title -->
    <div class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <h2>Product Details</h2>
                <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Product Details</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Title -->


    <!-- Start Product Details Area -->
    <section class="product-details-area pt-100 pb-70">
        <div class="container">
            <div class="products-details-image-slider owl-carousel owl-theme">
                <div class="image">
                    <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}" alt="image" style="width: 100%;min-height: 430px;max-height: 430px">
                </div>

                @forelse($product->images as $image)
                    <div class="image">
                        <img src="{{ URL::asset('admin/assets/uploads/'.$image->image) }}" alt="image" style="width: 100%;min-height: 430px;max-height: 430px">
                    </div>
                @empty
                @endforelse

            </div>

            <div class="products-details-desc">
                <h3>{{ $product->name }}</h3>

                <div class="price">
                    @if(!empty($product->cut_price))
                        <span class="old-price">{{ "$".$product->cut_price }}</span>
                    @endif
                    <span class="new-price">{{ "$".$product->price }}</span>
                </div>

                <ul class="products-info">
                    <li><span>Category:</span> <a>{{ $product->category->name }}</a></li>
                    <li><span>Stock:</span> <a>{{ $product->stock }}</a></li>
                    <li><span>Tags:</span> <a>{{ $product->tags }}</a></li>
                </ul>

                <div class="products-add-to-cart mt-4">

                    <a href="{{route('appointment')}}" type="submit" class="default-btn"><i
                                class="fas fa-cart-plus"></i> Book Appointment</a>
                </div>

            </div>

            <div class="tab products-details-tab">
                <div class="tab-content">
                    {!! $product->description !!}
                </div>
            </div>
        </div>

    </section>
    <!-- End Product Details Area -->

    <!-- Start Facility Area -->
    <section class="facility-area ">
        <div class="container">
            <div class="facility-slides owl-carousel owl-theme">
                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-tracking'></i>
                    </div>
                    <h3>Free Shipping</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-return'></i>
                    </div>
                    <h3>Easy Online Booking</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-shuffle'></i>
                    </div>
                    <h3>Authentic Moroccan Styles</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-sale'></i>
                    </div>
                    <h3>Flexible Rental Options</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-credit-card'></i>
                    </div>
                    <h3>Expert Style Assistance</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-location'></i>
                    </div>
                    <h3>Quality Guarantee Assured</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-customer-service'></i>
                    </div>
                    <h3>Seamless Return Process</h3>
                </div>
            </div>
        </div>
    </section>
    <!-- End Facility Area -->

@endsection

@section('script')
    <script src="{{ URL::asset('website/js/vendor/waypoints.js') }}"></script>

@endsection