@extends('layout.app')

@section('title')
{!! $productCategory ? $productCategory->title : Translation::transText('breadcrumbs.catalog', 'Catalog') !!}
@endsection

@section('css')

@stop
@section('content')
<div class="wrapper">
    <main>
        @include('parts.header-panel')
        @include('parts.header')

        <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>
                            <span>{!! $productCategory ? $productCategory->title : Translation::trans('breadcrumbs.catalog', 'Catalog') !!}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <section class="catalog">
            <div class="container">
                <div class="catalog-title">


                    <h1>
                        @php
                        if (!empty($productCategory)) {
                            echo !empty($productCategory->h1) ? $productCategory->h1 : $productCategory->title;
                        } else {
                            echo Translation::trans('breadcrumbs.catalog', 'Catalog');
                        }
                        @endphp
                    </h1>
                </div>
            </div>
            <div class="container">
                <div class="catalog__inner">

                    <form class="catalog__inner-asite" action="{{ route('catalog.index') }}" data-component="filter-form">
                        <input type="hidden" value="{{ old('order') }}" name="order" data-component="order-input">

                        <div class="catalog__inner-asite-item">
                            <div class="catalog__inner-asite-item-head">
                                <div class="catalog__inner-asite-item-head-title">
                                    <h6>{!! Translation::trans('catalog.title', 'Kategoria produktu') !!}</h6>
                                </div>
                                <div class="catalog__inner-asite-item-head-arrow">
                                    <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                </div>
                            </div>
                            <div class="catalog__inner-asite-item-box">
                                <div class="checkbox-items">
                                                                    </div>

                            </div>
                        </div>
                        <div class="catalog__inner-asite-item">
                            <div class="catalog__inner-asite-item-head">
                                <div class="catalog__inner-asite-item-head-title">
                                    <h6>{!! Translation::trans('catalog.filter.adhesive-layer', 'Adhesive layer') !!}</h6>
                                </div>
                                <div class="catalog__inner-asite-item-head-arrow">
                                    <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                </div>
                            </div>
                            <div class="catalog__inner-asite-item-box">
                                @php
                                    $glue = $input['glue'] ?? '';
                                    $glueParams = explode(',', $glue);
                                @endphp
                                @foreach($filter['glue'] as $glueItem)
                                    <div class="checkbox-item">
                                        <input class="checkbox-radio" id="glue{{$glueItem->id}}" type="checkbox" value="{{$glueItem->id}}" {{in_array($glueItem->id, $glueParams) ? 'checked' : ''}} />
                                        <label for="glue{{$glueItem->id}}">{{$glueItem->value}}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="catalog__inner-asite-item">
                            <div class="catalog__inner-asite-item-head">
                                <div class="catalog__inner-asite-item-head-title">
                                    <h6>{!! Translation::trans('order.thickness', 'MKM') !!}</h6>
                                </div>
                                <div class="catalog__inner-asite-item-head-arrow">
                                    <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                </div>
                            </div>
                            <div class="catalog__inner-asite-item-box">
                                <div class="checkbox-items">
                                    @php
                                        $thickness = $input['thickness'] ?? '';
                                        $thicknessParams = explode(',', $thickness);
                                    @endphp
                                    @foreach($filter['thickness'] as $thicknessItem)
                                        <div class="checkbox-item">
                                            <input class="checkbox-radio" id="thickness{{$thicknessItem['thickness']}}" type="checkbox" value="{{$thicknessItem['thickness']}}" {{in_array($thicknessItem['thickness'], $thicknessParams) ? 'checked' : ''}} />
                                            <label for="thickness{{$thicknessItem['thickness']}}">{{$thicknessItem['thickness']}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                        </div>
                        <div class="catalog__inner-asite-item">
                            <div class="catalog__inner-asite-item-head">
                                <div class="catalog__inner-asite-item-head-title">
                                    <h6>{!! Translation::trans('catalog.filter.width', 'Szerokość') !!}</h6>
                                </div>
                                <div class="catalog__inner-asite-item-head-arrow">
                                    <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                </div>
                            </div>
                            <div class="catalog__inner-asite-item-box">
                                <div class="checkbox-items">
                                    @php
                                    $width = $input['width'] ?? '';
                                    $widthParams = explode(',', $width);
                                    @endphp
                                    @foreach($filter['width'] as $widthItem)
                                        <div class="checkbox-item">
                                            <input class="checkbox-radio" id="width{{$widthItem['width']}}" type="checkbox" value="{{$widthItem['width']}}" {{in_array($widthItem['width'], $widthParams) ? 'checked' : ''}} />
                                            <label for="width{{$widthItem['width']}}">{{$widthItem['width']}}</label>
                                        </div>
                                    @endforeach
                                    <div class="checkbox-item">
                                        <input class="checkbox-radio" id="width-other" type="checkbox" value="other" {{in_array('other', $widthParams) ? 'checked' : ''}} />
                                        <label for="width-other">{{Translation::transText('choices.other', 'Other')}}</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="catalog__inner-asite-item">
                            <div class="catalog__inner-asite-item-head">
                                <div class="catalog__inner-asite-item-head-title">
                                    <h6>{!! Translation::trans('catalog.filter.length', 'Długość') !!}</h6>
                                </div>
                                <div class="catalog__inner-asite-item-head-arrow">
                                    <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                </div>
                            </div>
                            <div class="catalog__inner-asite-item-box">
                                <div class="checkbox-items">
                                    @php
                                        $length = $input['length'] ?? '';
                                        $lengthParams = explode(',', $length);
                                    @endphp
                                    @foreach($filter['length'] as $lengthItem)
                                        <div class="checkbox-item">
                                            <input class="checkbox-radio" id="length{{$lengthItem['length']}}" type="checkbox" value="{{$lengthItem['length']}}" {{in_array($lengthItem['length'], $lengthParams) ? 'checked' : ''}} />
                                            <label for="length{{$lengthItem['length']}}">{{$lengthItem['length']}}</label>
                                        </div>
                                    @endforeach
                                        <div class="checkbox-item">
                                            <input class="checkbox-radio" id="length-other" type="checkbox" value="other" {{in_array('other', $lengthParams) ? 'checked' : ''}} />
                                            <label for="length-other">{{Translation::transText('choices.other', 'Other')}}</label>
                                        </div>
                                </div>
                            </div>
                        </div>
                        @if(!empty($filter['colors']))
                            <div class="catalog__inner-asite-item">
                                <div class="catalog__inner-asite-item-head">
                                    <div class="catalog__inner-asite-item-head-title">
                                        <h6>{!! Translation::trans('catalog.filter.color', 'Kolor') !!}</h6>
                                    </div>
                                    <div class="catalog__inner-asite-item-head-arrow">
                                        <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt="arrow" />
                                    </div>
                                </div>
                                <div class="catalog__inner-asite-item-box">
                                    <div class="checkbox-items">
                                        @php
                                            $colors = $input['colors'] ?? '';
                                            $colorsParams = explode(',', $colors);
                                        @endphp
                                        @for($i = 0;$i < count($filter['colors']);$i++) <div class="checkbox-item">
                                            <input class="checkbox-radio" id="color{{$filter['colors'][$i]['id']}}" type="checkbox" value="{{$filter['colors'][$i]['id']}}" {{in_array($filter['colors'][$i]['id'], $colorsParams) ? 'checked' : ''}} />
                                            <label for="color{{$filter['colors'][$i]['id']}}">{{$filter['colors'][$i]['title']}}</label>
                                            <span style="background-color: {{ $filter['colors'][$i]['color'] }}"></span>
                                        </div>
                                        @endfor

                                    </div>
                                </div>
                            </div>
                        @endif



{{-- <div class="catalog__inner-asite-item active">--}}
{{-- <div class="catalog__inner-asite-item-head">--}}
{{-- <div class="catalog__inner-asite-item-head-title">--}}
{{-- <h6>{!! Translation::trans('catalog.filter.price', 'Cena') }}</h6>--}}

{{-- </div>--}}
{{-- <div class="catalog__inner-asite-item-head-arrow">--}}
{{-- <img src="/front/dist/img/catalog/catalog-sort-arrow.svg" alt=""/>--}}
{{-- </div>--}}
{{-- </div>--}}
{{-- <div class="catalog__inner-asite-item-box">--}}
{{-- <div class="range-wrap">--}}
{{-- <div class="range-value" id="rangeV"></div>--}}
{{-- <input id="range" type="range" min="0" max="2500" value="700" step="1"/>--}}
{{-- <div class="range-value-point range-value-point-start">--}}
{{-- 0--}}
{{-- </div>--}}
{{-- <div class="range-value-point range-value-point-finish">--}}
{{-- 2500--}}
{{-- </div>--}}
{{-- </div>--}}

{{-- </div>--}}
{{-- </div>--}}
<div class="catalog__inner-asite-btn">
    <button type="submit" class="golden-btn arrow" id="filter_button">{!! Translation::transText('catalog.filter.search', 'Rzucać') !!}</button>
    <div class="catalog__inner-asite-btn-close">
        <img src="/front/dist/img/close-filter-icon.svg" loading="lazy" alt="close icon" />
    </div>
</div>
{{-- --}}

</form>

<div class="catalog__inner-products">
    <div class="catalog__inner-products-sort">
        <div class="catalog__inner-products-sort-sowing">
            <div class="catalog__inner-products-sort-filter">
                <img src="/front/dist/img/filter-icon.svg" loading="lazy" alt="filter" />
            </div>
            <div>
                {!! Translation::trans('catalog.filter.shown', 'Wyświetlanie') !!}
                <span>{{ (($products->currentPage() -1)*$products->perPage()) + count($products)}}</span> {!! Translation::trans('catalog.filter.from', 'z') !!}
                <span>{{$products->total()}}</span> {!! Translation::trans('catalog.filter.products', 'produktów') !!}
            </div>
        </div>
        <div class="catalog__inner-products-sort-select">
            <span>{!! Translation::trans('catalog.filter.sorting', 'Sortowanie') !!}:</span>
            <div class="custom-select">
                @php
                $sort = $input['sort'] ?? '';

                @endphp
                <select id="sort_select">
                    <option {{!$sort || $sort === 'alf_asc' ? 'selected' : ''}} value="alf_asc">{!! Translation::transText('catalog.filter.cheapest', 'Nazwa A-Z') !!}</option>
                    <option {{$sort === 'alf_desc' ? 'selected' : ''}} value="alf_desc">{!! Translation::transText('catalog.filter.expensive', 'Nazwa Z-A') !!}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="catalog__inner-products-items">
        @foreach($translatedProducts as $product)
        <div class="catalog-item">
            <a href="{{ route('catalog.show', ['product' => $product->getModel()]) }}">
                <div class="catalog-item-item-img">
                    <picture>
                        <img src="{{ asset( $product->preview) }}" loading="lazy" alt="{{ $product->title }}" />
                    </picture>
                </div>
                <div class="catalog-item-item-info">
                    <h4>{{ $product->title }}</h4>
                    <ul>
                        <li>{!! Translation::transText('catalog.filter.length', 'Długość') !!}
                            – {{ $product->length }}</li>
                        <li>{!! Translation::transText('catalog.filter.mkm', 'MKM') !!}
                            - {{ $product->thickness }}</li>
                        <li>{!! Translation::transText('catalog.filter.width', 'Szerokość') !!}
                            – {{ $product->width }}.
                        </li>
                    </ul>
                </div>
            </a>
            <div class="catalog-item-item-order">
                @if($product->price)
                <div class="catalog-item-order-prise">{{ $product->price }} {!! Translation::transText('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 class="catalog-pagination">
        @if($products->linkCollection()->count() > 3)
        <ul>
            @foreach($products->withQueryString()->linkCollection() as $link)

            @if($link['label'] === 'pagination.previous')
            <li class="catalog-pagination-prev {{ !empty($link['url']) ? '' : 'disabled' }}">
                <a href="{{ $link['url'] }}">
                    <img src="/front/dist/img/pagination-prev-icon.svg" alt="icon prev" />
                </a>
            </li>
            @elseif($link['label'] === 'pagination.next')
            <li class="catalog-pagination-next {{ !empty($link['url']) ? '' : 'disabled' }}">
                <a href="{{ $link['url'] }}">
                    <img src="/front/dist/img/pagination-next-icon.svg" alt="icon next" />
                </a>
            </li>
            @else
            <li class="catalog-pagination-page {{ $link['active'] ? 'active' : '' }}">
                <a href="{{ $link['url'] }}">{{ $link['label'] }}</a>
            </li>
            @endif

            @endforeach

        </ul>
        @endif
    </div>
</div>
</div>
</div>
</section>
</main>
</div>

@endsection
@section('javascript')
<script src="/front/dist/files/js/custom-select.js"></script>
<script src="/front/dist/files/js/filter.js"></script>
<script src="/front/dist/files/js/catalog.js"></script>
@endsection