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

<div class="breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-content">
            <ul>
                <li><a href="{{ url('/') }}">{{ translate('homepage') }}</a></li>

                @foreach (Site::get_category_three($product->category_id)[0] as $topCategory)
                <li><a href="{{ route('category.detail', ['url' => $topCategory->content->url]) }}">{{ $topCategory->content->name ?? translate('category') }}</a></li>
                @endforeach
                <li><a href="{{ route('category.detail', ['url' => $product->category->content->url ?? '']) }}">{{ $product->category->content->name ?? translate('category') }}</a></li>

                <li class="active" aria-current="page">{{ $product->content->name ?? translate('product') }}</li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="row mt-30 mb-30">
        <div class="col-sm-6 col-12">
            @if ( $product != null )
                @if ( $product->all_images != null && count($product->all_images) > 0 )
                <div id="productImagesSlider" class="carousel slide shadow-sm border" data-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_large_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-target="#productImagesSlider" data-slide-to="{{ $key }}">
                        <img src="{{ Common::get_product_small_image($product->id, $value->name) }}" alt="{{ $product->content->name }}" class="img-thumbnail" width="80">
                    </button>
                    @endforeach
                </div>
                @else

                <div class="bg-light p-3 text-center d-flex justify-content-center align-items-center border" style="height: 300px; width: 100%;">
                    {{ translate('product_image_not_found') }}
                </div>

                @endif
            @endif
        </div>

        <div class="col-sm-6 col-12">
            <h2>{{ $product->content->name ?? translate('product') }}</h2>
            <p>{{ $product->category->content->name ?? translate('category') }}</p>
            <p class="text-dark fw-bold m-0" style="font-weight: bold; font-size: 20px;">
                {{ $product->get_price(false) }}
            </p>

            <form action="#" class="cart-quantity bg-light p-3 shadow-sm border">
                <div class="form-group d-flex  align-items-center ">
                    <label for="" class="m-0 p-0 mr-2">Adet: </label>
                    <input type="number" name="quantity" id="cart_add_product_quantity" class="border" value="1" style="max-width: 100px">
                </div>
                
                <button class="btn btn-primary btn-lg" type="button" style="min-width: 150px" onclick="cart_add(this)" data-product-id="{{ $product->id }}">{{ translate('add_to_cart') }}</button>
                <button class="btn btn-outline-primary btn-lg" type="button" onclick="cart_add_quickly(this)" data-product-id="{{ $product->id }}" style="min-width: 125px;">{{ translate('buy_now') }}</button>
                <button class="btn btn-lg @if(Auth::check() && Auth::user()->favorite_products->where('product_id', $product->id)->first()) btn-danger @else btn-outline-primary @endif" type="button" onclick="add_favorite_product(this)" data-product-id="{{ $product->id }}"><i class="fa fa-heart-o"></i></button>
            </form>
        </div>

        <div class="col-12 mt-40">
            <!-- Begin Product Area -->
            <div class="product-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="li-product-tab">
                                <ul class="nav li-product-menu">
                                   <li><a class="active" data-toggle="tab" href="#description"><span>{{ translate('product_description') }}</span></a></li>
                                   <li><a data-toggle="tab" href="#reviews"><span>{{ translate('product_comments') }} <span class="badge badge-secondary">0</span></span></a></li>
                                   <li><a data-toggle="tab" href="#cargo-details"><span>{{ translate('cargo_informations') }}</span></a></li>
                                </ul>               
                            </div>
                            <!-- Begin Li's Tab Menu Content Area -->
                        </div>
                    </div>
                    <div class="tab-content">
                        <div id="description" class="tab-pane active show" role="tabpanel">
                            @if ( $product->content->description != null )
                            <div class="product-description">
                                {!! $product->content->description !!}
                            </div>
                                @else
                            <div class="row">
                                <div class="col-12">
                                    <div class="bg-white py-3">
                                        <p>Satıcı ürün hakkında ekstra açıklama girmemiş.</p>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                        <div id="reviews" class="tab-pane" role="tabpanel">

                            <div class="row">
                                <div class="col-12">
                                    <div class="bg-white py-3">
                                        <h6 class="text-muted">{{ translate('product_comment_not_found') }}</h6>
                                        <p>Bu ürüne henüz yorum yapmılmamış</p>
                                    </div>
                                </div>
                            </div>
                            
                            {{--
                            <div class="product-reviews">
                                <div class="product-details-comment-block">
                                        <div class="comment-review mb-3">
                                        <span>Ersel Hekim</span>
                                        <ul class="rating">
                                            <li><i class="fa fa-star-o"></i></li>
                                            <li><i class="fa fa-star-o"></i></li>
                                            <li><i class="fa fa-star-o"></i></li>
                                            <li class="no-star"><i class="fa fa-star-o"></i></li>
                                            <li class="no-star"><i class="fa fa-star-o"></i></li>
                                        </ul>
                                        <p class="m-0 p-0">Ürün zamanında teslim edilmedi ve eksik gönderildi.</p>
                                        <em>3 gün önce</em>
                                    </div>

                                    <a href="#" class="btn btn-link btn-sm text-primary mb-4"><i class="fa fa-plus"></i> Daha fazla göster</a>
                                </div>
                            </div>
                            --}}

                        </div>
                        <div id="cargo-details" class="tab-pane" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="bg-white py-3">
                                        <h6 class="text-muted">{{ translate('cargo_information_not_found') }}</h6>
                                        <p>Satıcı kargo hakkında ekstra açıklama girmemiş.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Product Area End Here -->

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

@endsection
@section('footer')
<script src="{{ get_asset('plugins/zoom/jquery.zoom.min.js') }}"></script>
<script src="{{ get_asset('plugins/lightbox/lightbox.min.js') }}"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
<script>
    $(document).ready(function(){
        $('.ex').zoom();
    });
</script>
<!-- error messages -->
@if ($errors->any())
@foreach ($errors->all() as $error)
<script>
    toastr.error('{{ $error }}');
</script>
@endforeach
@endif

<!-- success messages -->
@if


@endsection