@extends('layout.app')

@section('page-title', $title)
@section('meta_description', $category->meta_description)
@section('canonical-link')
    <link rel="canonical" href="{{ $canonical_link }}" />
@endsection

@if(PROD_ENV === true)
    @section('tracking')
        <!-- BEGIN: wtDataLayer -->
        <script>
            const ecommerce = {
                'items': [
                    @foreach($products as $product)
                        {
                            'item_name': "{{ $product['name'] }}",
                            'price': {{ $product['price'] }},
                            'item_category': "{{ $product['category_name'] }}",
                            'item_id': "{{ $product['product_id'] }}"
                        },
                    @endforeach
                ],
                'purchase_type': '{{ $vv_purchase_type }}'
            }

            dataLayer.push({
                'event': "view_item_list",
                'ecommerce': ecommerce
            });
        </script>
        <!-- END: wtDataLayer -->
    @endsection
@endif

@if(is_array($category_wow_images) && !empty($category_wow_images))
    @section('main-slider')
        <section class="tf-collection-slider wt-pages products-category-page-main-slider-section">
            <div class="container">
                <!-- Slider -->
                <div class="tf-slideshow slider-effect-fade position-relative slider-category-wow">
                    <div dir="ltr" class="swiper tf-sw-slideshow" data-preview="1" data-tablet="1" data-mobile="1"
                         data-centered="true" data-space="0" data-loop="false" data-auto-play="false"
                         data-delay="2000" data-speed="1000"
                    >
                        <div class="swiper-wrapper">
                            @foreach($category_wow_images as $image_path)
                                <div class="swiper-slide" lazy="true">
                                    <div class="wrap-slider slider-category-{{ $categoryId }}">
                                        <img class="lazyload" data-src="{{ $image_path }}"
                                             src="{{ $image_path }}" alt="{{ $category->category_name }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="wrap-pagination sw-absolute-2">
                        <div class="container">
                            <div class="sw-dots sw-pagination-slider"></div>
                        </div>
                    </div>
                    <div class="tf-slideshow-box-content-wrapper">
                        <div class="tf-slideshow-box-content text-end">
                            <h1 class="fade-item fade-item-1">{{ $category->category_name }}</h1>
                        </div>
                    </div>
                </div>
                <!-- /Slider -->
            </div>
        </section>
    @endsection
@endif

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">{{ $title }}</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    @if(count($products) > 0)
        <section class="tf-collection mb_60 products-category-page-section">
            <div class="container">
                @if(!empty($category->category_description))
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <p class="description mt_0 pb_20 category-description">{!! empty($category->category_description)? $category->category_name : $category->category_description !!}</p>
                    </div>
                @endif
                @include('partials._product_list_layout', ['products' => $products, 'category' => $category])
            </div>
        </section>
    @else
        <section class="page-404-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title">
                            Coming soon!
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@if($GLOBALS['session']->admin)
    @section('admin-panel')
        <li class="nav-mb-item">
            <a href="{{ url('admin/products_category_editor.php?cat_id=' . $categoryId) }}" target="_blank" class="mb-menu-link">
                Thumbnail Manager
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="{{ url('admin/category_edit.php?category_id=' . $categoryId) }}" target="_blank" class="mb-menu-link">
                Edit Category
            </a>
        </li>
        <li class="nav-mb-item">
            <a href="#" class="mb-menu-link" data-bs-dismiss="offcanvas" id="clicks-report-link">Clicks Report</a>
        </li>
    @endsection
@endif

@section('modals')
    @if(count($products) > 0)
        <!-- modal quick_view -->
        @include('partials.modals._quick_view')
        <!-- /modal quick_view -->
        <!-- Filter -->
        @include('partials._filter')
        <!-- End Filter -->
    @endif
    @if($GLOBALS['session']->admin)
        <!-- modal clicks_report -->
        @include('partials.admin._clicks_report_form')
        <!-- /modal clicks_report -->
        <!-- modal admin_product -->
        @include('partials.modals._admin_product')
        <!-- /modal admin_product -->
    @endif
@endsection

@if(count($products) > 0)
    @push('after-foot-non-admin-js')
        <!-- Connexity Tag 2 - Register pageview or conversion event via cnxtag -->
        <script>
            cnxtag('event', 'pageview', {
                'product_ids':['<br />
<b>Warning</b>:  array_column() expects parameter 1 to be array, null given in <b>/home/staging/wt-git/wt/new-design/views/products.blade.php</b> on line <b>167</b><br />
<br />
<b>Warning</b>:  join(): Invalid arguments passed in <b>/home/staging/wt-git/wt/new-design/views/products.blade.php</b> on line <b>167</b><br />
'],
                'category_name':'{{ $category->category_name }}',
                'category_id':'{{ $categoryId }}'
            });
        </script>
    @endpush

    @push('after-foot-js')
        <script type="text/javascript" src="{{ asset('new-design/js/nouislider.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('new-design/js/shop.js') }}"></script>
        <script type="text/javascript" src="{{ asset('new-design/js/product.js') }}"></script>
        <script>
            $(document).ready(function () {
                ProductQuickViewHandler.init();
                Products.init({!! json_encode($products) !!});
            });
        </script>
    @endpush
@endif