@extends('front.layouts.app')

@section('content')
    <div class="container-lg text-lg-center pt-3">
        @include('front.partials.breadcrumbs')
        <h1 class="display-5 text-body-emphasis text-center font-family-zilla-slab mb-4">
            @if (!is_null($category))
                Discover <span class="bg-highlighter-yellow fw-bold px-2">{{ $category->name }} AI Tools</span> Today
            @else
                Discover over <span class="bg-highlighter-yellow fw-bold px-2">{{ $tools_count }} AI Tools</span> Today
            @endif
        </h1>
        <div class="row justify-content-center">

            <div class="col-12 col-md-9 col-lg-8 col-xl-7 mx-auto mb-4">
                @include('front.partials.search')
            </div>
        </div>
    </div>

    <div class="container-lg pb-5">

        <div class="accordion mb-3 sticky-top shadow rounded-2" style="top:1em;" id="accordionCategory">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseCategory" aria-controls="collapseCategory">
                        <span class="h5 mb-0">Filter by {{ $parent_categories->count() }} AI Tool Categories </span>
                    </button>
                </h2>
                <div id="collapseCategory" class="accordion-collapse collapse" data-bs-parent="#accordionCategory">
                    <div class="accordion-body d-inline-flex justify-content-center flex-wrap gap-1">
                        <h3 class="d-inline mb-0">
                            <a href="{{ route('front.discover.home') }}"
                                class="btn btn-outline-dark text-decoration-none btn-sm border-2 fw-bold mb-0 rounded-pill px-3 {{ is_null($category) ? 'active' : '' }}">All
                                Categories</a>
                        </h3>
                        @foreach ($parent_categories as $parent_category)
                            <h3 class="d-inline mb-0">
                                <a href="{{ route('front.discover.category', ['category_slug' => $parent_category->slug]) }}"
                                    class="btn btn-outline-dark text-decoration-none btn-sm border-2 fw-bold mb-0 rounded-pill px-3 {{ !is_null($category) && $category->slug == $parent_category->slug ? 'active' : '' }}">{{ $parent_category->name }}
                                    {{ $parent_category->emoji }}</a>
                            </h3>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        @if ($ai_tools->count() > 0)
            <div class="row justify-content-center g-3 mb-4">
                @foreach ($ai_tools as $ai_tool)
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                        @include('front.partials.ai-tool-card')
                    </div>
                @endforeach
            </div>
        @else
            <div class="card">
                <div class="card-body text-center p-5">
                    <p class="h4 fw-bold">😱 Yikes!</p>
                    <p class="h5 mb-3">This is embarassing, there are no AI tools in this category yet.<br> We will find
                        more AI to add here. In the meantime:</p>
                    <a class="btn btn-primary btn-lg rounded-pill px-4 text-decoration-none"
                        href="{{ route('front.discover.home') }}">See more AI Tools</a>

                </div>
            </div>
        @endif

        <div class="mb-2">
            @if ($ai_tools instanceof \Illuminate\Pagination\LengthAwarePaginator)
                @if ($ai_tools->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $ai_tools->onEachSide(1)->links('pagination::bootstrap-5-pagination-limit-10') }}
                    </div>
                @endif
            @elseif ($ai_tools instanceof \Illuminate\Pagination\CursorPaginator)
                @if ($ai_tools->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $ai_tools->links('pagination::simple-bootstrap-5') }}
                    </div>
                @endif
            @endif
        </div>
        <div class="d-flex justify-content-center text-center text-secondary">
            <small>Use <b>Search</b> to discover AI tools by brand, task or features.</small>
        </div>


    </div>
@endsection