@extends('layout.app')

@section('title')
{{ $product->title }}
@endsection

@section('css')
<link rel="stylesheet" href="/front/dist/files/css/swiper-bundle.min.css" />
@stop
@section('content')
<div class="wrapper">
    <main>
        @include('parts.header-panel')
        @include('parts.header')

        @php
            $currentLocale = LaravelLocalization::getCurrentLocale();
        @endphp

        <div class="breadcrumbs">
            <div class="container">
                <div class="breadcrumbs__inner">
                    <ul class="breadcrumbs__list">
                        <li><a href="/">{!! Translation::trans('breadcrumbs.home', 'Home') !!}</a></li>
                        <li><a href="{{ route('catalog.index') }}">{!! Translation::trans('breadcrumb.products', 'Products') !!}</a></li>
                        <li><a href="{{  route('catalog.index', ['productCategory' => $product->category])  }}">{{ $product->category->translate(LaravelLocalization::getCurrentLocale())->title }}</a></li>
                        <li><span>{{ $product->title }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <section class="catalog-detail">
            <div class="container">
                <div class="catalog-detail__inner">
                    <div class="catalog-detail__inner-gallery">
                        <div class="swiper mySwiper2">
                            <div class="swiper-wrapper">
                                @if($product->preview)
                                <div class="swiper-slide">
                                    <picture>
                                        <img src="{{ asset($product->preview) }}" loading="lazy" alt="{{ $product->title }}" />
                                    </picture>
                                </div>
                                @endif
                                @php
                                $slides = $product->getModel()->getSlides();
                                @endphp
                                @foreach($slides as $slide)
                                <div class="swiper-slide">
                                    <picture>
                                        <img src="{{ asset($slide) }}" loading="lazy" alt="{{ $product->title }}" />
                                    </picture>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div thumbsSlider="" class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                @if($product->preview)
                                <div class="swiper-slide">
                                    <picture>
                                        <img src="{{ asset($product->preview) }}" loading="lazy" alt="{{ $product->title }}" />
                                    </picture>
                                </div>
                                @endif
                                @foreach($slides as $slide)
                                <div class="swiper-slide">
                                    <picture>
                                        <img src="{{ asset($slide) }}" loading="lazy" alt="{{ $product->title }}" />
                                    </picture>
                                </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-next">
                                <img src="/front/dist/img/pagination-next-icon.svg" alt="icon next" />
                            </div>
                            <div class="swiper-button-prev">
                                <img src="/front/dist/img/pagination-prev-icon.svg" alt="icon prev" />
                            </div>
                        </div>

                    </div>
                    <form class="catalog-detail__inner-info" method="GET" action="{{ route('order.index') }}">
                        <input type="hidden" name="product" value="{{ $product->id }}">
                        <h1>{{ !empty($product->h1) ? $product->h1 : $product->title }}</h1>
                        <ul>
                            <li>
                                <span>{!! Translation::trans('catalog.filter.length', 'Długość') !!}</span>
                                <select name="length" class="select-default" data-role="length-select">
                                    @foreach($lengthes as $length)
                                    <option value="{{ $length->id }}">{{ $length->value }}</option>
                                    @endforeach
                                    <option value="other">{{ Translation::transText('choices.other', 'Other') }}</option>
                                </select>
                                <input class="input-default" type="text" name="custom_length" data-role="length-input">
                            </li>
                            <li>
                                <span>{!! Translation::trans('catalog.filter.mkm', 'MKM') !!}</span>
                                <select name="thikness" class="select-default">
                                    @foreach($thiknesses as $thikness)
                                    <option value="{{ $thikness->id }}">{{ $thikness->value }}</option>
                                    @endforeach

                                </select>
                            </li>
                            <li>
                                <span>{!! Translation::trans('catalog.filter.width', 'Szerokość') !!}</span>
                                <select name="width" class="select-default">
                                    @foreach($widthes as $width)
                                    <option value="{{ $width->id }}">{{ $width->value }}</option>
                                    @endforeach
                                    <option value="">{{ Translation::transText('choices.other', 'Other') }}</option>
                                </select>
                            </li>
                            <li>
                                <span>{!! Translation::trans('catalog.filter.adhesive-layer', 'Adhesive layer') !!}</span>
                                <select name="glue" class="select-default">
                                    @foreach($glues as $glue)
                                    <option value="{{ $glue->id }}">{{ $glue->value }}</option>
                                    @endforeach
                                </select>
                            </li>
                            <li>
                                <span>{!! Translation::trans('order.packs', 'Ilość w zamówieniu, pudełka') !!}</span>
                                <input class="input-default" type="text" name="count" value="1">
                            </li>
                        </ul>
                        @if(!$product->colors->isEmpty())
                        <div class="catalog-detail__inner-info-color">
                            <div class="catalog-detail__inner-info-color-label">
                                {!! Translation::trans('product.color', 'Colory') !!}:
                            </div>
                            <div class="catalog-detail__inner-info-color-items">
                                @foreach($product->colors->translate($currentLocale) as $color)
                                <label class="catalog-detail__inner-info-color-item"
                                       data-tippy-content="{{ $color->title }}"
                                       style="background-color: {{ $color->color }}">
                                    <input type="radio" name="color" value="{{ $color->id }}">
                                </label>
                                @endforeach
                            </div>
                        </div>
                        @endif
                        <div class="catalog-detail__inner-info-order">
                            @if($product->price)
                            <div class="catalog-item-order-prise">{{ $product->price / 100 }} {!! Translation::trans('produc.price.сurrency', '₴') !!}</div>
                            @endif
                            <button type="submit" class="btn button golden-btn arrow">
                                {!! Translation::trans('product.order', 'Zamówić') !!}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <div class="tabs">
            <div class="tabs__inner">
                <div class="container">
                    <nav class="tabs__inner-nav">
                        <li class="active"><a href="#tab1">{!! Translation::trans('product.tabs.summary', 'Opis') !!}</a></li>
                        <li><a href="#tab2">{!! Translation::trans('product.tabs.description', 'Dodatkowe informacje') !!}</a></li>
                    </nav>
                </div>
                <div class="tabs__inner-contents">
                    <div class="container">
                        <div id="tab1" class="tabs__inner-content active">
                            <div class="description">
                                {!! $product->description !!}
                            </div>
                        </div>
                        <div id="tab2" class="tabs__inner-content">
                            <div class="description">
                                {!! $product->long_description !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section class="products-more">
            <div class="container">
                <div class="products-more__inner">
                    <h2>{!! Translation::trans('product.additional-products', 'Inne produkty z tej kategorii') !!}</h2>
                    <div class="products-more__inner-items">
                        @foreach($relatedProducts as $relatedProduct)
                        <div class="catalog-item">
                            <a href="{{ route('catalog.show', ['product' => $relatedProduct->getModel()]) }}">
                                <div class="catalog-item-item-img">
                                    <picture>
                                        <img src="{{ asset($relatedProduct->preview) }}" loading="lazy" alt="{{ $relatedProduct->title }}" />
                                    </picture>
                                </div>
                                <div class="catalog-item-item-info">
                                    <h4>{{ $relatedProduct->title }}</h4>
                                    <ul>
                                        <li><span>{!! Translation::transText('catalog.filter.length', 'Długość') !!}</span> – {{ $relatedProduct->length }}</li>
                                        <li><span>{!! Translation::transText('catalog.filter.mkm', 'MKM') !!}</span> - {{ $relatedProduct->thickness }}</li>
                                        <li><span>{!! Translation::transText('catalog.filter.width', 'Szerokość') !!}</span> – {{ $relatedProduct->width }}.</li>
                                    </ul>
                                </div>
                            </a>
                            <div class="catalog-item-item-order">
                                @if($product->price)
                                <div class="catalog-item-order-prise">{{ $product->price }} {!! Translation::trans('produc.price.сurrency', '₴') !!} </div>
                                @endif

                                <a href="{{route('order.index', ['product' => $product->id])}}" class="golden-btn arrow">{!! Translation::transText('catalog.product.buy', 'Zamówić') !!}</a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>
@endsection
@section('javascript')
<script src="/front/dist/files/js/swiper-bundle.min.js"></script>
<script src="/front/dist/files/js/catalog-detail.js"></script>

@stop