@extends('site.layouts.app')
@section('style')
    <!-- slick slider -->
    <link rel="stylesheet" href="{{ asset('main-site') }}/assets/css/vendors/slick_slider/slick.css">
    <link rel="stylesheet" href="{{ asset('main-site') }}/assets/css/vendors/slick_slider/slick-theme.css">
@endsection
@section('content')
    <section class="product-details-area sec-padding bg-grey">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="pdetails-images d-flex gap-2">

                        <div class="thumbs-wrapper d-md-block d-none">
                            <div class="pdetails-thumbs">
                                @foreach ($item->attachments as $attachment)
                                    <div class="pdetails-singlethumb">
                                        <img src="{{ asset($attachment->path) }}" alt="product thumb">
                                    </div>
                                @endforeach

                            </div>
                        </div>

                        <div class="slider-container">
                            <div class="pdetails-largeimages">
                                @foreach ($item->attachments as $attachment)
                                    <div class="pdetails-singleimage">
                                        <img src="{{ asset($attachment->path) }}" alt="product image">
                                    </div>
                                @endforeach
                                {{-- <div class="pdetails-singleimage">
                                    <img src="assets/img/products/product-details-lg.png" alt="product image">
                                </div>
                                <div class="pdetails-singleimage">
                                    <img src="assets/img/products/product-details-lg.png" alt="product image">
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="details-content">
                        <h6 class="primary-color fw-600 mb-25">{{ $item->user->name }}</h6>
                        <h1 class="fw-600 dark-color mb-25">{{ $item->name }}</h1>
                        <h5 class="dark-color fw-600 mb-3">{{ __("site.Navbar.Nav_2") }}</h5>
                        <p class="dark-color mb-45 small-text">
                            {{ $item->description }}
                        </p>
                        <div>
                            @if ($item->options && count($item->options))
                                <h5 class="fw-600 dark-color mb-3">{{ __("site.Navbar.Nav_3") }}</h5>
                                <ul class="props-list mb-5">
                                    @foreach ($item->options as $option)
                                        <li class="d-flex dark-color gap-2 mb-2"><span
                                                class="prop">{{ $option->name }}:</span> <span>{{ \App\Http\Helpers\HelperApp::convert_numbers($option->value) }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                            <a href="{{ route("site.chat.list").'?user_id='.$item->user_id.'&product_id='.$item->id }}" class="main-btn px-5">{{ __("site.Navbar.Nav_4") }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- products -->
    <section class="products-section sec-padding-bottom bg-grey">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between gap-2 border-bottom pb-35 mb-45">
                <h5 class="dark-color fw-600 mb-0">{{ __("site.Navbar.Nav_1") }}</h5>
                <a href="{{ route('saudi.products', ['type' => 'product']) }}" class="primary-color fs-5 fw-600">{{ __("messages_301.More") }}</a>
            </div>
            <div class="row gx-lg-45">
                @include('site.inc.products', ['data' => $related_products, 'type' => 'product'])
            </div>
        </div>
    </section>
@endsection


@section('script')
    <script src="{{ asset('main-site/assets/js/vendors/slick.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var checkRTL = $("html").attr("dir") === "rtl";
            // Product Details Slider
            $('.pdetails-largeimages').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                dots: false,
                fade: true,
                rtl: checkRTL,
                asNavFor: '.pdetails-thumbs',
                swipe: false,
                responsive: [{
                    breakpoint: 767,
                    settings: {
                        swipe: true,
                        dots: true
                    }
                }]
            });

            $('.pdetails-thumbs').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                asNavFor: '.pdetails-largeimages',
                arrows: false,
                dots: false,
                focusOnSelect: true,
                vertical: true
            });
        })
    </script>
@endsection