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

@include(get_view('components.pages.page-title'), [
    'title' => $product->content->name ?? __('Product'),
    'breadcrumb_links' => [
        [
            'title' => $product->category->content->name ?? __('Category'),
            'url' => url('category/'.$product->category->content->url ?? '')
        ]
    ]
])

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

            <div class="productImageListSmall text-center mt-2 mb-2">
                @foreach ($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_small_image($product->id, $value->name) }}" alt="{{ $product->content->name }}" class="img-thumbnail" width="110">
                </button>
                @endforeach
            </div>
        </div>

        <div class="col-sm-5 col-12">
            <div class="pb-2">
                <h2 class="fw-bold">{{ $product->content->name ?? __('Product') }}</h2>
                <p>{{ $product->category->content->name ?? __('Category') }}</p>
            </div>

            <div class="bg-light pl-4 pr-5 pt-3 pb-3 mb-3 text-center">
                <h6>{{ __('Paylaş') }}</h6>
                <a href="http://www.facebook.com/share.php?u={{ url()->current() }}" target="_blank"
                    rel="noreferrer" class="d-inline p-2"><i class="fab fa-facebook"></i></a>
                <a href="https://twitter.com/share?url={{ url()->current() }}&amp;text={{ Site::get_site_title() }}"
                    target="_blank" rel="noreferrer" class="d-inline p-2"><i class="fab fa-twitter"></i></a>
                <a href="https://web.whatsapp.com/send?text={{ url()->current() }}" target="_blank"
                    rel="noreferrer" class="d-inline p-2"><i class="fab fa-whatsapp"></i></a>
                <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{ url()->current() }}"
                    target="_blank" rel="noreferrer" class="d-inline p-2"><i class="fab fa-linkedin"></i></a>
            </div>


            <h6>{{ __('Ürün Açıklaması') }}</h6>
            <hr>

            @if ( $product != null )
                @if ( $product->content != null )
                    @if ( $product->content->description != null )
                    <div class="col-sm-12 col-12">
                        <div class="product-description-area">
                            {!! $product->content->description !!}
                        </div>
                    </div>
                    @else
                    <p>{{ __('Veri Bulunamadı') }}</p>
                    @endif
                @endif
            @endif

        </div>
    </div>

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

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