@extends(get_view('index'))
@section('title'){{ $category->content->name ?? '' }}@endsection
@section('header')

@endsection
@section('content')

<main>
    <!-- section-->
    <div class="mt-4">
        <div class="container">
            <!-- row -->
            <div class="row ">
                <!-- col -->
                <div class="col-12">
                    <!-- breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="/">{{ __('Anasayfa') }}</a></li>

                            @foreach ($category->top_categories as $top_category)
                            <li class="breadcrumb-item"><a href="{{ route('category.detail', ['url' => $top_category->content->url ?? '#']) }}">{{ $top_category->content->name ?? '' }}</a></li>
                            @endforeach

                            <li class="breadcrumb-item active" aria-current="page">{{ $category->content->name ?? '' }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- section -->
    <div class="mt-8 mb-lg-14 mb-8">
        <!-- container -->
        <div class="container">
            <!-- row -->
            <div class="row gx-10">
                <!-- col -->
                <aside class="col-lg-3 col-md-4 mb-6 mb-md-0">
                    <div class="offcanvas offcanvas-start offcanvas-collapse w-md-50 " tabindex="-1"
                        id="offcanvasCategory" aria-labelledby="offcanvasCategoryLabel">

                        <div class="offcanvas-header d-lg-none">
                            <h5 class="offcanvas-title" id="offcanvasCategoryLabel">Filtre</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body ps-lg-2 pt-lg-0">
                            <div class="mb-8">
                                <h5 class="mb-3">Kategoriler</h5>
                                <ul class="nav nav-category" id="categoryCollapseMenu">
                                    
                                    @if ( $category->sub_categories->count() > 0 )
                                        <li class="nav-item border-bottom w-100 ">
                                            <a href="#" class="nav-link collapsed"
                                                data-bs-toggle="collapse" data-bs-target="#categoryFlushOne"
                                                aria-expanded="false" aria-controls="categoryFlushOne">
                                                {{ $category->content->name ?? '' }} <i class="feather-icon icon-chevron-right"></i>
                                            </a>

                                            <!-- accordion collapse -->
                                            <div id="categoryFlushOne" class="accordion-collapse collapse"
                                                data-bs-parent="#categoryCollapseMenu">
                                                <div>

                                                    <!-- nav -->
                                                    <ul class="nav flex-column ms-3">
                                                        @foreach ($category->sub_categories as $sub_category)
                                                        <!-- nav item -->
                                                        <li class="nav-item"><a href="{{ route('category.detail', ['url' => $sub_category->content->url ?? '#']) }}" class="nav-link">{{ $sub_category->content->name ?? '' }}</a></li>
                                                        @endforeach
                                                    </ul>

                                                </div>
                                            </div>
                                        </li>
                                    @else
                                    <li class="nav-item border-bottom w-100 ">
                                        <a href="{{ route('category.detail', ['url' => $category->content->url ?? '#']) }}" class="nav-link">
                                            {{ $category->content->name ?? '' }}
                                        </a>
                                    </li>
                                    @endif

                                </ul>
                            </div>

                            {{-- Filter --}}
                            @include(get_view('components.search.filter'))
                        </div>
                    </div>
                </aside>
                <section class="col-lg-9 col-md-12">
                    <!-- card -->
                    <div class="card mb-4 bg-light border-0">
                        <!-- card body -->
                        <div class="card-body p-9">
                            <h2 class="mb-0 fs-1">{{ $category->content->name ?? '' }}</h2>
                        </div>
                    </div>
                    <!-- list icon -->
                    <div class="d-lg-flex justify-content-between align-items-center">
                        <div class="mb-3 mb-lg-0">
                            <p class="mb-0"> <span class="text-dark">{{ $products->total() }} </span> ürün bulundu</p>
                        </div>

                        <!-- icon -->
                        <div class="d-md-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="ms-2 d-lg-none">
                                    <a class="btn btn-outline-gray-400 text-muted" data-bs-toggle="offcanvas"
                                        href="#offcanvasCategory" role="button"
                                        aria-controls="offcanvasCategory"><svg xmlns="http://www.w3.org/2000/svg"
                                            width="14" height="14" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="feather feather-filter me-2">
                                            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                                        </svg> Filtreler</a>
                                </div>
                            </div>

                            <div class="d-flex mt-2 mt-lg-0">
                                <div class="me-2 flex-grow-1">
                                    <!-- select option -->
                                    <form action="{{ url()->full() }}" method="GET" id="search_paginate_form">
                                        <select name="paginate" class="form-select" id="paginate" onchange="this.form.submit()">
                                            <option selected>Göster: {{ request()->paginate ?? 12 }}</option>
                                            <option value="12">12</option>
                                            <option value="24">24</option>
                                            <option value="36">36</option>
                                            <option value="48">48</option>
                                            <option value="60">60</option>
                                        </select>
                                    </form>
                                </div>
                                <div>
                                    <!-- select option -->
                                    <form action="{{ url()->full() }}" method="GET" id="search_product_form">
                                        <select name="sort_by" class="form-select fs-12" onchange="this.form.submit()">
                                            <option @if(request()->sort_by == "advanced") selected @endif value="advanced">Gelişmiş sıralama</option>
                                            <option @if(request()->sort_by == "min_to_max_price") selected @endif value="min_to_max_price">Fiyata göre (önce en düşük) </option>
                                            <option @if(request()->sort_by == "max_to_min_price") selected @endif value="max_to_min_price">Fiyata göre (önce en yüksek) </option>
                                            <option @if(request()->sort_by == "newest") selected @endif value="newest">Tarihe göre (önce en yeni) </option>
                                            <option @if(request()->sort_by == "oldest") selected @endif value="oldest">Tarihe göre (önce en eski) </option>
                                        </select>
                                    </form>
                                </div>

                            </div>

                        </div>
                    </div>
                    <!-- row -->
                    <div class="row g-4 mt-2">

                        @include(get_view('components.product.list'))

                    </div>
                </section>
            </div>
        </div>
    </div>
</main>




@if ( $category->content->content != null )
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="bg-white p-3">
                {!! $category->content->content !!}
            </div>
        </div>
    </div>
</div>
@endif

@endsection
@section('footer')

<script>
    var priceRange = document.getElementById('price_range');

    noUiSlider.create(priceRange, {
        start: [0, 50000],
        connect: true,
        range: {
            'min': [0],
            '10%': [100, 100],
            '50%': [5000, 500],
            'max': [100000]
        }
    });

    var price_range_value = document.getElementById('price_range-value');
    priceRange.noUiSlider.on('update', function (values) {
        price_range_value.innerHTML = values.join(' - ');
    });
</script>

@endsection