@extends('front.layouts.app')

@section('content')
    <div class="container-lg pt-3 mb-3">
        @include('front.partials.breadcrumbs')

        <div class="mb-3">
            @include('front.partials.search')
        </div>

        <h1 class="h2 text-body-emphasis font-family-zilla-slab">
            <i class="bi bi-search"></i> <span class="fw-bold">{{ $query }}</span> AI tools
        </h1>

    </div>

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

        <div class="row">
            <div class="col-12 col-lg-8 col-xl-9">
                @foreach ($results as $result)
                    <div class="card mb-4 hover-grow shadow">
                        <div class="card-body p-3 p-lg-3">
                            <div class="row g-2 overflow-hidden flex-md-row h-md-250 position-relative">
                                <div class="col-3 col-lg-3 d-none d-lg-flex" style="height:100%;">
                                    <div class="align-self-center p-1">
                                        <img class="img-fluid rounded-3 shadow-sm"
                                            src="{{ $result->ai_tool->screenshot_img }}" alt="{{ $result->tool_name }}">
                                    </div>
                                </div>
                                <div class="col-12 col-lg-9 d-flex flex-column position-static">
                                    <a class="fw-bold" href="#">
                                        <h3 class="h5 fw-bold line-clamp-1">{{ $result->ai_tool->tool_name }}</h3>
                                    </a>
                                    <p class="line-clamp-2 mb-2">
                                        @foreach (str_extract_sentences($result->ai_tool->summary, 2) as $sentence)
                                            {!! $sentence !!}
                                        @endforeach
                                    </p>

                                    <div class="mb-3 d-flex gap-1">
                                        <span class="badge rounded-pill text-bg-highlighter-yellow">
                                            <i class="bi bi-currency-dollar"></i> {{ $result->ai_tool->pricing_type }}
                                        </span>
                                        <span class="badge rounded-pill text-bg-highlighter-orange">
                                            <i class="bi bi-globe"></i>
                                            @if ($result->ai_tool->is_app_web_both == 'both')
                                                App & Web
                                            @else
                                                {{ ucwords($result->ai_tool->is_app_web_both) }}
                                            @endif
                                        </span>
                                    </div>



                                    <div class="d-flex flex-wrap gap-1">
                                        @foreach ($result->ai_tool->keywords as $keyword)
                                            @if ($loop->iteration <= 3)
                                                <a href="{{ get_route_search_result($keyword->value_lowercased) }}"
                                                    class="btn btn-outline-dark btn-sm border-2 px-2 py-1 rounded-pill text-decoration-none text-nowrap">{{ $keyword->value }}</a>
                                            @else
                                                <a href="{{ route('front.discover.home') }}"
                                                    class="btn btn-outline-dark btn-sm border-2 px-2 py-1 rounded-pill text-decoration-none text-nowrap">
                                                    + {{ $result->ai_tool->keywords->count() - 3 }} more
                                                </a>
                                            @break
                                        @endif
                                    @endforeach
                                </div>

                            </div>
                        </div>



                    </div>
                </div>
            @endforeach

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

        </div>

        <div class="col-12 col-lg-4 col-xl-3">
            @include('front.partials.sidebar')
        </div>
    </div>



</div>
@endsection