@extends(get_view('index'))
@section('title')
{{ $product->name . ' - ' ?? '' }}
@endsection
@section('header')
<link rel="stylesheet" href="{{ asset('templates/default/css/lightbox/lightbox.min.css') }}">
@endsection
@section('content')

@include(get_view('components.pages.page-title'), ['title' => $product->name ?? translate('product')])

<div class="container">
    <div class="row mt-2 mb-2">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ translate('homepage') }}</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ url('category/'.$product->product->category->content->url ?? '') }}">{{ $product->product->category->content->name ?? translate('category') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $product->name ?? translate('product') }}
                    </li>
                </ol>
            </nav>
        </div>
    </div><!-- row -->

    <div class="row">
        <div class="col-sm-12 col-12">
            <div id="productImagesSlider" class="carousel slide shadow-sm" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <span class='zoom'>
                    @foreach ($product->product->all_images as $key => $value)
                    <div class="carousel-item @if($key == 0) active @endif">
                        <a href="{{ Common::get_product_original_image($product->product->id, $value->name) }}" data-lightbox="image-1" data-title="{{ $product->name }}">
                            <span style="display: block;" class="ex">
                                <img src="{{ Common::get_product_large_image($product->product->id, $value->name) }}" class="d-block w-100" alt="{{ $product->name }}">
                            </span>
                        </a>
                    </div>
                    @endforeach
                    </span>
                </div>
            </div>

            <div class="productImageListSmall text-center mt-2 mb-2">
                @foreach ($product->product->all_images as $key => $value)
                <button type="button" class="btn btn-link p-1" data-bs-target="#productImagesSlider" data-bs-slide-to="{{ $key }}">
                    <img src="{{ Common::get_product_large_image($product->product->id, $value->name) }}" alt="{{ $product->name }}" class="img-thumbnail" width="110">
                </button>
                @endforeach
            </div>
        </div>

        @if ( $product->description != null )
        <div class="col-sm-12 col-12">
            <div class="bg-white p-4 shadow-sm product-description-area">
                <h2>{{ translate('product_description') }}</h2>
                <div class="page-title-line"></div>
                <br>
                {!! $product->description !!}
            </div>
        </div>
        @endif
    </div>

</div><!-- container -->

@endsection
@section('footer')
<script src="{{ asset('templates/default/js/zoom/jquery.zoom.min.js') }}"></script>
<script src="{{ asset('templates/default/js/lightbox/lightbox.min.js') }}"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
<script>
    $(document).ready(function(){
        $('.ex').zoom();
    });
</script>
@endsection