@extends('layouts.app', [
    'navTitle' => 'Cserélhető játékok',
    'pageTitle' => 'Cserélhető játékok',
    'seoTitle' => 'Cserélhető játékok',
    'seoDesc' => 'Cserélhető játékok',
    'pageImageRelativeUrl' => '',
    'navBackgroundDesktop' => 'exchangeable_toys/nav-background-desktop.webp',
    'navBackgroundMobile' => 'exchangeable_toys/nav-background-mobile.webp',
    'menuIndex' => 0,
])
@section('content')
    <link rel="stylesheet" href="/css/exchangeable-toys.css">
    <script src="/js/exchangeable-toys.js"></script>
    @php
        $childrenAges = Auth::user()->getChildrenAges();
    @endphp
    <div class="container big-padding">
        <div style="color: red; text-align: center;">Az alábbi játékok csak teszt jellegűek</div>
        <div class="row d-flex flex-column flex-lg-row">
            <div class="filter-box">
                <div id="filter-switch" class="filter-switch row no-gutters justify-content-between d-flex d-lg-none">
                    <div class="title">Szűrő</div>
                    <i class="fa-solid fa-chevron-down" style="color:#398300;"></i>
                </div>
                <div class="filter-content">
                    <div class="title">Kategória</div>
                    @foreach ($categories as $category)
                        <input id="category_{{ $category->id }}" name="category_{{ $category->id }}" type="checkbox">
                        <label class="cursor-pointer" for="category_{{ $category->id }}">{{ $category->name }}</label><br>
                    @endforeach
                    <div class="spacer"></div>
                    <div class="title">Életkor szerint</div>
                    @foreach ($ages as $age)
                        <input id="age_{{ $age->id }}" name="age_{{ $age->id }}" type="checkbox"
                            @if ($age->containsAgeFromList($childrenAges)) checked @endif>
                        <label class="cursor-pointer" for="age_{{ $age->id }}">{{ $age->name }}</label><br>
                    @endforeach
                    <div class="spacer"></div>
                    <div class="title">Ár</div>
                    <div class="range-slider">
                        <div class="range-values">
                            <span id="range-min-label">0 Ft</span>
                            <span id="range-max-label">100 000 Ft</span>
                        </div>
                        <div class="slider">
                            <div class="progress"></div>
                        </div>
                        <input type="range" id="range-min" min="0" max="100000" value="0" step="500">
                        <input type="range" id="range-max" min="0" max="100000" value="100000" step="500">
                    </div>
                    <div class="spacer-1"></div>
                    <div class="row no-gutters justify-content-between">
                        <button class="small-padding secondary" onclick="resetFilters();">Alapállapot</button>
                        <button class="small-padding" onclick="search();">Szűrés</button>
                    </div>
                </div>
            </div>
            <div id="products" class="products-row d-flex flex-wrap justify-content-center"></div>
        </div>
        <div class="d-flex justify-content-center">
            <div id="paginator"></div>
        </div>
        <script type="text/javascript">
            let products = [
                @foreach ($products as $product)
                    {
                        id: {{ $product->id }},
                        name: "{{ $product->name }}",
                        price: {{ $product->price }},
                        old_price: {{ $product->old_price }},
                        image_extension: "{{ $product->image_extension }}",
                        category: "{{ $product->categories->first()?->name ?? 'N/A' }}",
                        categoryIds: [
                            @foreach ($product->categories as $cat)
                                {{ $cat->id }},
                            @endforeach
                        ],
                        ageIds: [
                            @foreach ($product->ages as $age)
                                {{ $age->id }},
                            @endforeach
                        ],
                        age: "{{ $product->ages->first()?->name ?? 'N/A' }}",
                    },
                @endforeach
            ];
            renderPaginator(products);
        </script>
    </div>
@endsection