@extends('shared.front')
@section('content')
    <div class="no-right-bg no-padding">
        <div class="container product-detail-desc">
            <div class="product-detail-img-box">
                <div class="slider slider-big">
                    @if($listImage != null && count($listImage) > 0)
                        @foreach($listImage as $item)
                            <div class="img_big">
                                <img src="{{ asset($item->image) }}" alt="">
                            </div>
                        @endforeach
                    @else
                        <div class="img_big">
                            <img src="{{ asset('front/app/assets/img/product-pre-beer.jpg') }}" alt="">
                        </div>
                    @endif
                </div>
                <div class="slider slider-small">
                    @if($listImage != null && count($listImage ?? []) > 0)
                        @foreach($listImage as $item)
                            <div class="img_small">
                                <img src="{{ asset($item->thumb) }}" alt="">
                            </div>
                        @endforeach
                    @else
                        <div class="img_small">
                            <img src="{{ asset('front/app/assets/img/product-pre-beer.jpg') }}" alt="">
                        </div>
                    @endif
                </div>
            </div>
            <div class="product-detail-info-box" data-product-id="{{ $model->id }}"
                 data-product-name="{{ $model->title }}"
                 data-product-image="{{ asset($model->image) }}" data-product-price="{{ $model->sale_price }}"
                 data-product-priceOrigin="{{ $model->import_price > $model->sale_price ? $model->import_price : '' }}"
                 data-redirect="{{ action('HomeController@checkout') }}">
                <h2>{{ $model->title }}</h2>

                <p class="product__info">
                    {{ $model->title }}
                </p>

                @if($model->import_price > $model->sale_price)
                    <div class="price-discount">
                        <div class="price">{{ \App\Http\Controllers\ProductController::product_price($model->sale_price) }}</div>
                        <div class="sale-off">{{ round(($model->import_price - $model->sale_price) * 100 / $model->import_price) }} %</div>
                        <h3>{{ \App\Http\Controllers\ProductController::product_price($model->import_price) }}</h3>
                    </div>
                @else
                    <div class="price">{{ \App\Http\Controllers\ProductController::product_price($model->sale_price) }}</div>
                @endif

                <div class="quantity">
                    <button class="btn-quan btn-prdetail-decrease">
                        <img src="{{ asset('front/app/assets/img/icon-decrease.svg') }}" alt="decrease">
                    </button>
                    <input type="tel" class="input-quan" id="prdtQuanlity" value="1">
                    <button class="btn-quan btn-prdetail-increase">
                        <img src="{{ asset('front/app/assets/img/icon-add.svg') }}" alt="decrease">
                    </button>
                </div>
                <div class="btn-box">
                    <a href="javascript:void(0);" class="btn cart-btn">{{ __('messages.product_detail.add_to_cart') }}</a>
                    <a href="javascript:void(0);" class="btn order-btn">{{ __('messages.product_detail.buy_now') }}</a>
                </div>
                <div class="delivery-time">
                    <div class="special-note d-flex align-items-center mb-1">
                        <img src="{{ asset('new_front/app/assets/img/deliver-icon.svg') }}" alt="" class="mr-1">
                        <strong>{{ __('messages.product_detail.freeship_in_day') }}</strong>
                    </div>

                    <!-- area tag  -->
                    <ul class="area-tag-list row">
                        <!-- tag item  -->
                        <li class="area-tag-item active" data-id="1">
                            <strong>{{ __('messages.product_detail.hcm') }}</strong>
                        </li>

                        <!-- tag item  -->
                        <li class="area-tag-item" data-id="2">
                            <strong>{{ __('messages.product_detail.hn') }}</strong>
                        </li>
                    </ul>

                    <!-- area content  -->
                    <ul class="area-content-box mt-3">
                        <!-- content item  -->
                        <li class="content-item active" data-id="1">
                            <p>
                                {{ __('messages.product_detail.hcm_time') }}
                            </p>
                            <p>
                                {{ __('messages.product_detail.hcm_area') }}
                            </p>
                        </li>
                        <!-- content item  -->
                        <li class="content-item" data-id="2">
                            <p>
                                {{ __('messages.product_detail.hn_time') }}
                            </p>
                            <p>
                                {{ __('messages.product_detail.hn_area') }}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="container product-detail-detail">
            <h2>{{ __('messages.product_detail.product_detail') }}</h2>
            <div class="detail-content">
                {!!  $model->content  !!}
            </div>
        </div>
        <div class="container product-detail-related">
            <h2>{{ __('messages.product_detail.related_product') }}</h2>
            <div class="related-products product-list">
                <div class="related-products-slider">
                    @if($listOther != null && count($listOther ?? []) > 0)
                        @foreach($listOther as $item)
                            <div>
                                @include('home.elements.product-item',[
                                    'isDiv' => true
                                ])
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection