@extends('layouts.user')
@section('title')
    @lang('User Dashboard')
@endsection
@section('breadcrumb')
    @lang('Dashboard')
@endsection
@section('content')
<div class="nk-content-body">
    @include('user.partials.breadcrumb',['btitle'=>'Shopping'])
    <div class="nk-block">
        <div class="nk-block">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="row pb-5">
                        <div class="col-lg-6">
                            <div class="product-gallery me-xl-1 me-xxl-5">
                                <div class="slider-init" id="sliderFor" data-slick='{"arrows": false, "fade": true, "asNavFor":"#sliderNav", "slidesToShow": 1, "slidesToScroll": 1}'>
                                    @if($product->p_image1)
                                    <div class="slider-item rounded">
                                        <img src="{{getProductPicture($product->p_image1)}}" class="rounded w-100" alt="">
                                    </div>
                                    @endif
                                        @if($product->p_image2)
                                    <div class="slider-item rounded">
                                        <img src="{{getProductPicture($product->p_image2)}}" class="rounded w-100" alt="">
                                    </div>
                                    @endif
                                        @if($product->p_image3)
                                    <div class="slider-item rounded">
                                        <img src="{{getProductPicture($product->p_image3)}}" class="rounded w-100" alt="">
                                    </div>
                                    @endif
                                        @if($product->p_image4)
                                    <div class="slider-item rounded">
                                        <img src="{{getProductPicture($product->p_image4)}}" class="rounded w-100" alt="">
                                    </div>
                                    @endif

                                </div><!-- .slider-init -->
                                <div class="slider-init slider-nav" id="sliderNav" data-slick='{"arrows": false, "slidesToShow": 5, "slidesToScroll": 1, "asNavFor":"#sliderFor", "centerMode":true, "focusOnSelect": true,
                                "responsive":[ {"breakpoint": 1539,"settings":{"slidesToShow": 4}}, {"breakpoint": 768,"settings":{"slidesToShow": 3}}, {"breakpoint": 420,"settings":{"slidesToShow": 2}} ]
                            }'>
                                    @if($product->p_image1)
                                    <div class="slider-item">
                                        <div class="thumb">
                                            <img src="{{getProductPicture($product->p_image1)}}" class="rounded" alt="">
                                        </div>
                                    </div>
                                    @endif
                                        @if($product->p_image2)
                                    <div class="slider-item">
                                        <div class="thumb">
                                            <img src="{{getProductPicture($product->p_image2)}}" class="rounded" alt="">
                                        </div>
                                    </div>
                                    @endif
                                        @if($product->p_image3)
                                    <div class="slider-item">
                                        <div class="thumb">
                                            <img src="{{getProductPicture($product->p_image3)}}" class="rounded" alt="">
                                        </div>
                                    </div>
                                    @endif
                                        @if($product->p_image4)
                                    <div class="slider-item">
                                        <div class="thumb">
                                            <img src="{{getProductPicture($product->p_image4)}}" class="rounded" alt="">
                                        </div>
                                    </div>
                                    @endif

                                </div><!-- .slider-nav -->
                            </div><!-- .product-gallery -->
                        </div><!-- .col -->
                        <div class="col-lg-6">
                            <div class="product-info mt-5 me-xxl-5">
                                <h4 class="product-price text-primary">{{$product->currency. numFormat($product->price, 2)}} </h4>
                                <h2 class="product-title">{{$product->product_name}}</h2>

                                <div class="product-excrept text-soft">
                                    <p class="lead">{{$product->product_description}}</p>
                                </div>

                                <div class="product-meta">
                                    <ul class="d-flex flex-wrap ailgn-center g-2 pt-1">

                                        <li>
                                            <button class="btn btn-primary">Contact Us</button>
                                        </li>
                                        <li class="ms-n1">
                                            <button class="btn btn-icon btn-trigger text-primary"><em class="icon ni ni-heart"></em></button>
                                        </li>
                                    </ul>
                                </div><!-- .product-meta -->
                            </div><!-- .product-info -->
                        </div><!-- .col -->
                    </div><!-- .row -->
                    <hr class="hr border-light">

                </div>
            </div>
        </div><!-- .nk-block -->

    </div>
    </div><!-- .nk-block -->

</div>
@endsection