@extends('layouts.app_web')

@section('title', __('search.title') . ': ' . $query)

@section('content')

    <style>
        .search-page-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 40px 100px;
        }

        .search-page-header {
            margin-bottom: 0;
        }

        .search-page-header h1 {
            font-family: 'Open Sans', sans-serif;
            font-size: clamp(26px, 3.5vw, 38px);
            font-weight: 300;
            color: #2d3748;
            letter-spacing: -0.3px;
            line-height: 1.25;
            margin-bottom: 20px;
        }

        .search-page-header h1 span {
            font-weight: 600;
            color: #1a202c;
        }

        .search-divider {
            height: 2px;
            background: linear-gradient(to right, #00A19A, #e5e7eb);
            border: none;
            margin: 0 0 32px 0;
        }

        .search-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 36px;
        }

        .search-meta {
            font-size: 13px;
            color: #9ca3af;
            font-family: 'Open Sans', sans-serif;
        }

        .search-meta strong {
            color: #4a5568;
            font-weight: 600;
        }

        .search-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .filter-pill {
            font-family: 'Open Sans', sans-serif;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s ease;
            user-select: none;
        }

        .filter-pill:hover {
            border-color: #00A19A;
            color: #00A19A;
        }

        .filter-pill.active {
            background: #00A19A;
            border-color: #00A19A;
            color: #fff;
        }

        .search-results-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .search-result-item {
            padding: 26px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            gap: 20px;
            align-items: flex-start;
            animation: fadeSlideIn 0.3s ease both;
        }

        .search-result-item:first-child {
            border-top: 1px solid #f0f0f0;
        }

        @keyframes fadeSlideIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .search-result-item:nth-child(1) {
            animation-delay: 0.03s;
        }

        .search-result-item:nth-child(2) {
            animation-delay: 0.06s;
        }

        .search-result-item:nth-child(3) {
            animation-delay: 0.09s;
        }

        .search-result-item:nth-child(4) {
            animation-delay: 0.12s;
        }

        .search-result-item:nth-child(5) {
            animation-delay: 0.15s;
        }

        .search-result-item:nth-child(n+6) {
            animation-delay: 0.18s;
        }

        .result-body {
            flex: 1;
            min-width: 0;
        }

        .result-breadcrumb {
            font-family: 'Open Sans', sans-serif;
            font-size: 11px;
            color: #00A19A;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            font-weight: 600;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .result-breadcrumb span {
            color: #c1c9d2;
        }

        .result-title {
            font-family: 'Open Sans', sans-serif;
            font-size: 17px;
            font-weight: 600;
            color: #1a202c;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 8px;
            transition: color 0.2s;
            line-height: 1.35;
        }

        .result-title:hover {
            color: #00A19A;
        }

        .result-excerpt {
            font-family: 'Open Sans', sans-serif;
            font-size: 13.5px;
            color: #6b7280;
            line-height: 1.8;
            max-width: 820px;
            margin: 0;
        }

        .result-excerpt mark {
            background: #ccfaf8;
            color: #00706b;
            padding: 1px 3px;
            border-radius: 3px;
            font-weight: 700;
            font-style: normal;
        }

        .result-match-count {
            font-family: 'Open Sans', sans-serif;
            font-size: 11px;
            color: #b0b8c4;
            margin-top: 8px;
        }

        .search-no-results {
            text-align: center;
            padding: 80px 20px;
        }

        .search-no-results-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            background: #f9fafb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-no-results-icon svg {
            width: 28px;
            height: 28px;
            stroke: #d1d5db;
            fill: none;
            stroke-width: 1.5;
        }

        .search-no-results h2 {
            font-family: 'Open Sans', sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .search-no-results p {
            font-family: 'Open Sans', sans-serif;
            font-size: 13px;
            color: #b0b8c4;
        }

        .search-result-item.hidden {
            display: none;
        }

        .pagination-link {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            color: #00A19A;
            text-decoration: none;
            transition: color 0.2s;
        }

        .pagination-link:hover {
            color: #00706b;
        }

        @media (max-width: 768px) {
            .search-page-wrap {
                padding: 40px 20px 60px;
            }

            .search-toolbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .result-icon {
                display: none;
            }
        }
    </style>

    <div class="search-page-wrap">
        <div class="search-page-header">
            <h1>
                {{ __('search.results_for') }} <span>"{{ $query }}"</span>
            </h1>
        </div>

        <hr class="search-divider">

        @if(!empty($query))
            <div class="search-toolbar">
                <p class="search-meta">
                    @if(count($results) > 0)
                        <strong>{{ count($results) }}</strong> {{ __('search.results_found') }}
                        &ldquo;{{ $query }}&rdquo;
                    @else
                        {{ __('search.no_results') }}
                    @endif
                </p>
            </div>
        @endif

        @if(count($results) > 0)
            <ul class="search-results-list" id="searchResultsList">
                @foreach($paginatedResults as $result)
                    <li class="search-result-item">
                        <div class="result-body">

                            {{--
                            URL sudah di-generate RouteTranslator::getUrl() di controller
                            → sudah benar per locale (/id/tentang-kami, /ja/会社概要, dll)
                            → tidak perlu tambah ?lang= lagi
                            --}}
                            <a href="{{ $result['url'] }}" class="result-title">
                                {{ $result['title'] }}
                            </a>

                            <p class="result-excerpt">{!! $result['excerpt'] !!}</p>

                            @if($result['match_count'] > 1)
                                <p class="result-match-count">
                                    {{ $result['match_count'] }}
                                    {{ $result['match_count'] > 1 ? __('search.matches') : __('search.match') }}
                                </p>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ul>

            <div class="search-pagination"
                style="display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px;">
                <div>
                    @if (!$paginatedResults->onFirstPage())
                        <a href="{{ $paginatedResults->previousPageUrl() }}" class="pagination-link">&laquo;
                            {{ __('search.previous_entries', ['default' => 'Previous Entries']) }}</a>
                    @endif
                </div>
                <div>
                    @if ($paginatedResults->hasMorePages())
                        <a href="{{ $paginatedResults->nextPageUrl() }}"
                            class="pagination-link">{{ __('search.next_entries', ['default' => 'Next Entries']) }} &raquo;</a>
                    @endif
                </div>
            </div>
        @elseif(!empty($query))
            <div class="search-no-results">
                <div class="search-no-results-icon">
                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8" />
                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
                    </svg>
                </div>
                <h2>{{ __('search.no_results') }}</h2>
                <p>{{ __('search.try_different') }}</p>
            </div>
        @endif
    </div>

@endsection