@extends('welcome')
@section('title', __('search.seo_title', ['query' => $query]))
@section('meta_description', __('search.meta_description', ['query' => $query]))
@section('content')

<!--==============================
    Breadcumb
============================== -->
<div class="breadcumb-wrapper"
     data-bg-src="{{ asset('images/banners/search.jpg') }}"
     style="background-image: url('{{ asset('images/banners/search.jpg') }}');">
    <div class="container">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">{{ __('search.page_title') }}</h1>
            <ul class="breadcumb-menu">
                <li>
                    <a href="{{ route('welcome') }}"
                       data-track-click="breadcrumb_inicio"
                       data-track-type="navegacao"
                       data-track-meta="pagina_pesquisa">
                        {{ __('search.home') }}
                    </a>
                </li>
                <li>{{ __('search.page_title') }}</li>
            </ul>
        </div>
    </div>
</div>

<!--==============================
    Search Results
============================== -->
<section class="overflow-hidden space-top" id="search-results-sec">
    <div class="container">

        <!-- Search Stats -->
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 col-md-10">
                <div class="search-stats text-center">
                    <div class="search-query-display mb-4">
                        <h2 class="sec-title" style="color: var(--verde-dona); font-size: 2.2rem;">
                            "{{ $query }}"
                        </h2>

                        <div class="results-count" style="font-size: 1.2rem; color: var(--castanho-texto);">
                            @if($totalResults > 0)
                                {{ trans_choice('search.results_found', $totalResults, ['count' => $totalResults]) }}
                            @else
                                {{ __('search.no_results_found', ['query' => $query]) }}
                            @endif
                        </div>
                    </div>

                    <!-- Search Again -->
                    <div class="search-again mt-4">
                        <form action="{{ route('products.search') }}"
                              method="GET"
                              class="search-form"
                              data-track-click="submeter_pesquisa"
                              data-track-type="form"
                              data-track-meta="pagina_resultados_pesquisa"
                              style="max-width: 500px; margin: 0 auto;">
                            <div class="input-group" style="border: 2px solid var(--border-color); border-radius: 50px; overflow: hidden; background-color: white;">
                                <input type="text"
                                       name="q"
                                       value="{{ $query }}"
                                       class="form-control"
                                       placeholder="{{ __('search.search_placeholder') }}"
                                       data-track-click="campo_pesquisa"
                                       data-track-type="input"
                                       data-track-meta="pagina_resultados_pesquisa"
                                       style="border: none; padding: 15px 20px; font-size: 1rem; outline: none;">
                                <button type="submit"
                                        class="btn"
                                        data-track-click="executar_pesquisa"
                                        data-track-type="cta"
                                        data-track-meta="pagina_resultados_pesquisa"
                                        style="background-color: var(--verde-dona); color: white; padding: 0 25px; border: none; font-weight: 600;">
                                    <i class="fas fa-search"></i>
                                    <span class="d-none d-md-inline ms-2">{{ __('search.search_button') }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @if($totalResults > 0)

            <!-- Result Tabs -->
            <div class="row justify-content-center mb-4">
                <div class="col-lg-10">
                    <div class="result-tabs" id="search-tabs" style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">

                        <!-- All Results Tab -->
                        <a href="{{ route('products.search', ['q' => $query]) }}"
                           class="tab-btn {{ !$activeTab || $activeTab === 'all' ? 'active' : '' }}"
                           data-track-click="filtrar_resultados_todos"
                           data-track-type="pesquisa"
                           data-track-meta="query: {{ $query }}"
                           style="padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s;
                                  {{ !$activeTab || $activeTab === 'all' ? 'background-color: var(--verde-dona); color: white;' : 'background-color: var(--bege-claro); color: var(--castanho-texto);' }}">
                            <i class="fas fa-layer-group me-2"></i>
                            {{ __('search.all_results') }} ({{ $totalResults }})
                        </a>

                        <!-- Packs Tab -->
                        @if(isset($counts['packs']) && $counts['packs'] > 0)
                        <a href="{{ route('products.search', ['q' => $query, 'tab' => 'packs']) }}"
                           class="tab-btn {{ $activeTab === 'packs' ? 'active' : '' }}"
                           data-track-click="filtrar_resultados_packs"
                           data-track-type="pesquisa"
                           data-track-meta="query: {{ $query }}"
                           style="padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s;
                                  {{ $activeTab === 'packs' ? 'background-color: var(--verde-dona); color: white;' : 'background-color: var(--bege-claro); color: var(--castanho-texto);' }}">
                            <i class="fas fa-box me-2"></i>
                            {{ __('search.packs') }} ({{ $counts['packs'] }})
                        </a>
                        @endif

                        <!-- Vouchers Tab -->
                        @if(isset($counts['vouchers']) && $counts['vouchers'] > 0)
                        <a href="{{ route('products.search', ['q' => $query, 'tab' => 'vouchers']) }}"
                           class="tab-btn {{ $activeTab === 'vouchers' ? 'active' : '' }}"
                           data-track-click="filtrar_resultados_vouchers"
                           data-track-type="pesquisa"
                           data-track-meta="query: {{ $query }}"
                           style="padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s;
                                  {{ $activeTab === 'vouchers' ? 'background-color: var(--verde-dona); color: white;' : 'background-color: var(--bege-claro); color: var(--castanho-texto);' }}">
                            <i class="fas fa-gift me-2"></i>
                            {{ __('search.vouchers') }} ({{ $counts['vouchers'] }})
                        </a>
                        @endif

                        <!-- Avulsos Tab -->
                        @if(isset($counts['avulsos']) && $counts['avulsos'] > 0)
                        <a href="{{ route('products.search', ['q' => $query, 'tab' => 'avulsos']) }}"
                           class="tab-btn {{ $activeTab === 'avulsos' ? 'active' : '' }}"
                           data-track-click="filtrar_resultados_avulsos"
                           data-track-type="pesquisa"
                           data-track-meta="query: {{ $query }}"
                           style="padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s;
                                  {{ $activeTab === 'avulsos' ? 'background-color: var(--verde-dona); color: white;' : 'background-color: var(--bege-claro); color: var(--castanho-texto);' }}">
                            <i class="fas fa-utensils me-2"></i>
                            {{ __('search.avulsos') }} ({{ $counts['avulsos'] }})
                        </a>
                        @endif

                    </div>
                </div>
            </div>

            <!-- Results Grid -->
            <div class="row gy-40 justify-content-center" id="search-results-grid">

                @forelse($results as $result)

                    @php
                        $resultType = $result['type'] ?? 'product';
                        $item = $result['item'];

                        if ($resultType === 'product') {
                            $imageUrl = $item->pro_img
                                ? asset('images/product/' . $item->pro_img)
                                : asset('assets/img/icon/category_card_1.svg');

                            $title = $item->title ?? $item->description() ?? $item->pro_description_pt ?? '';                            
                            $url = $item->pro_slug ? route('packs.show', $item->category->cat_slug) : '#';
                            $category = $item->category?->description() ?? '';
                            $categoryType = $item->category?->cat_type ?? '';

                            $icon = 'fa-box';
                            $iconColor = 'var(--verde-dona)';
                            $badgeColor = 'var(--verde-dona)';

                            if ($categoryType === 'Voucher') {
                                $icon = 'fa-gift';
                                $iconColor = 'var(--laranja-cta)';
                                $badgeColor = 'var(--laranja-cta)';
                                $url = '#';
                            } elseif (in_array($categoryType, ['Sopa', 'Sobremesa', 'Sumo'])) {
                                $icon = 'fa-utensils';
                                $iconColor = 'var(--verde-oliva)';
                                $badgeColor = 'var(--verde-oliva)';
                                $url = '#';
                            }

                            $price = null;
                            $priceFormatted = null;

                            if ($categoryType === 'Voucher') {
                                if (isset($item->voucher_price) && $item->voucher_price > 0) {
                                    $price = $item->voucher_price;
                                    $priceFormatted = $item->voucher_price_formatted ?? number_format($price, 2, ',', ' ') . ' €';
                                } elseif ($item->relationLoaded('voucherPricePtm') && $item->voucherPricePtm) {
                                    $price = $item->voucherPricePtm->ptm_price ?? null;
                                    $priceFormatted = $price ? number_format($price, 2, ',', ' ') . ' €' : null;
                                }
                            } elseif ($item->relationLoaded('typeMeals') && $item->typeMeals->isNotEmpty()) {
                                $firstPivot = $item->typeMeals->first()?->pivot;
                                $price = $firstPivot?->ptm_price ?? null;
                                $priceFormatted = $price ? number_format($price, 2, ',', ' ') . ' €' : null;
                            }
                        } else {
                            $imageUrl = asset('assets/img/icon/category_card_1.svg');
                            $title = '';
                            $url = '#';
                            $category = '';
                            $categoryType = '';
                            $icon = 'fa-box';
                            $iconColor = 'var(--verde-dona)';
                            $badgeColor = 'var(--verde-dona)';
                            $price = null;
                            $priceFormatted = null;
                        }
                    @endphp

                    <div class="col-xl-4 col-md-6">
                        <div class="service-card search-result-card"
                             style="background-color: var(--card-bg); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; height: 100%; border: 1px solid var(--border-color); position: relative;">

                            <!-- Type Badge -->
                            <div class="type-badge"
                                 style="position: absolute; top: 15px; left: 15px; background-color: {{ $badgeColor }}; color: white; padding: 5px 15px; border-radius: 25px; font-weight: 600; font-size: 0.85rem; z-index: 4; text-transform: uppercase; letter-spacing: 0.5px;">
                                <i class="fas {{ $icon }}" style="margin-right: 5px; font-size: 0.8rem;"></i>
                                @if($categoryType === 'Voucher')
                                    {{ __('search.voucher') }}
                                @elseif(in_array($categoryType, ['Sopa', 'Sobremesa', 'Sumo']))
                                    {{ $categoryType }}
                                @else
                                    {{ __('search.pack') }}
                                @endif
                            </div>

                            <!-- Image Link -->
                            <a href="{{ $url }}"
                               data-track-click="ver_resultado_pesquisa"
                               data-track-type="pesquisa"
                               data-track-meta="tipo: {{ $resultType }} | titulo: {{ $title }} | query: {{ $query }}"
                               style="text-decoration: none; display: block;">

                                <div class="box-img" style="height: 220px; overflow: hidden; position: relative;">
                                    <img src="{{ $imageUrl }}"
                                         alt="{{ $title }}"
                                         style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;">

                                    <div class="img-overlay"
                                         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.2));"></div>
                                </div>
                            </a>

                            <!-- Icon -->
                            <a href="{{ $url }}"
                               data-track-click="ver_resultado_pesquisa_icone"
                               data-track-type="pesquisa"
                               data-track-meta="tipo: {{ $resultType }} | titulo: {{ $title }} | query: {{ $query }}"
                               style="text-decoration: none; display: inline-block;">
                                <div class="box-icon"
                                     style="width: 60px; height: 60px; background-color: {{ $iconColor }}; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -30px; margin-left: 20px; position: relative; z-index: 2; box-shadow: 0 5px 15px rgba(0,0,0,0.2);">
                                    <i class="fas {{ $icon }}" style="color: white; font-size: 1.5rem;"></i>
                                </div>
                            </a>

                            <!-- Content -->
                            <div class="box-content" style="padding: 1.5rem 1.5rem 2rem; background-color: var(--card-bg);">

                                <!-- Title -->
                                <h3 class="box-title"
                                    style="color: var(--castanho-texto); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3;">
                                    <a href="{{ $url }}"
                                       data-track-click="ver_resultado_pesquisa_titulo"
                                       data-track-type="pesquisa"
                                       data-track-meta="tipo: {{ $resultType }} | titulo: {{ $title }} | query: {{ $query }}"
                                       style="color: inherit; text-decoration: none; transition: color 0.3s;">
                                        {{ $title }}
                                    </a>
                                </h3>

                                <!-- Category -->
                                @if($category)
                                <p class="box-category"
                                   style="color: var(--verde-oliva); font-weight: 500; margin-bottom: 1rem; font-size: 0.9rem;">
                                    {{ $category }}
                                </p>
                                @endif

                                <!-- Highlight matched terms -->
                                @if(isset($result['matches']) && !empty($result['matches']))
                                <div class="matched-terms mb-3"
                                     style="background-color: var(--bege-claro); padding: 10px 12px; border-radius: 8px; font-size: 0.9rem;">
                                    <span style="color: var(--castanho-texto); font-weight: 600;">{{ __('search.matches') }}:</span>
                                    <span style="color: var(--verde-dona);">
                                        @foreach($result['matches'] as $match)
                                            <span class="match-badge" style="display: inline-block; background-color: white; padding: 2px 8px; border-radius: 15px; margin: 2px; font-size: 0.8rem;">
                                                {{ $match }}
                                            </span>
                                        @endforeach
                                    </span>
                                </div>
                                @endif

                                <!-- Price and Action -->
                                <div class="d-flex align-items-center justify-content-between mt-3">

                                    <div class="result-price">
                                        @if($price && $price > 0)
                                            <span class="price"
                                                  style="color: {{ $iconColor }}; font-size: 1.5rem; font-weight: 700;">
                                                {{ $priceFormatted ?? number_format($price, 2, ',', ' ') . ' €' }}
                                            </span>
                                        @endif
                                    </div>

                                    {{-- Packs → abrir página --}}
                                    @if(!in_array($categoryType, ['Voucher','Sopa','Sobremesa','Sumo']))

                                        <a href="{{ $url }}"
                                           class="icon-btn"
                                           data-track-click="abrir_resultado_pesquisa"
                                           data-track-type="cta"
                                           data-track-meta="tipo: {{ $resultType }} | titulo: {{ $title }} | query: {{ $query }}"
                                           style="width: 45px; height: 45px; background-color: {{ $iconColor }}; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: all 0.3s; margin: 5px 10px 0 0; text-decoration: none;">
                                            <i class="fas fa-arrow-right"></i>
                                        </a>

                                    {{-- Outros produtos → adicionar ao carrinho --}}
                                    @else

                                        <button type="button"
                                                class="icon-btn add-to-cart-btn"
                                                data-product-id="{{ $item->pro_id }}"
                                                data-product-type="{{ strtolower($categoryType) }}"
                                                data-product-name="{{ $title }}"
                                                data-product-price="{{ $price }}"
                                                data-track-click="Adicionar produto ao carrinho"
                                                data-track-type="carrinho"
                                                data-track-meta="Produto: {{ $title }} | ID: {{ $item->pro_id }} | Preço: {{ $price }}€"
                                                style="width: 50px; height: 50px; background-color: var(--laranja-cta); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: all 0.3s; margin: 5px 10px 0 0; border: none; cursor: pointer;">
                                            <i class="fas fa-cart-plus"></i>
                                        </button>

                                    @endif

                                </div>

                            </div>
                        </div>
                    </div>

                @empty

                    <!-- No results for this tab -->
                    <div class="col-12 text-center py-4">
                        <p style="color: var(--text-secondary); font-size: 1.1rem;">
                            {{ __('search.no_results_in_tab') }}
                        </p>
                    </div>

                @endforelse

            </div>
        @else

            <!-- No Results - Suggestions -->
            <div class="row justify-content-center mt-5">
                <div class="col-lg-8 col-md-10">
                    <div class="no-results-suggestions text-center">

                        <div class="suggestions-icon mb-4">
                            <i class="fas fa-search" style="font-size: 5rem; color: var(--bege-medio);"></i>
                        </div>

                        <h3 style="color: var(--castanho-texto); margin-bottom: 1.5rem;">
                            {{ __('search.suggestions_title') }}
                        </h3>

                        <div class="suggestions-list" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 2rem;">
                            <span class="suggestion-badge" style="background-color: var(--bege-claro); padding: 8px 20px; border-radius: 30px; color: var(--castanho-texto); font-weight: 500;">
                                <i class="fas fa-box me-2" style="color: var(--verde-dona);"></i> {{ __('search.packs') }}
                            </span>
                            <span class="suggestion-badge" style="background-color: var(--bege-claro); padding: 8px 20px; border-radius: 30px; color: var(--castanho-texto); font-weight: 500;">
                                <i class="fas fa-gift me-2" style="color: var(--laranja-cta);"></i> {{ __('search.vouchers') }}
                            </span>
                            <span class="suggestion-badge" style="background-color: var(--bege-claro); padding: 8px 20px; border-radius: 30px; color: var(--castanho-texto); font-weight: 500;">
                                <i class="fas fa-utensils me-2" style="color: var(--verde-oliva);"></i> {{ __('search.soups') }}
                            </span>
                            <span class="suggestion-badge" style="background-color: var(--bege-claro); padding: 8px 20px; border-radius: 30px; color: var(--castanho-texto); font-weight: 500;">
                                <i class="fas fa-cake me-2" style="color: var(--verde-oliva);"></i> {{ __('search.desserts') }}
                            </span>
                            <span class="suggestion-badge" style="background-color: var(--bege-claro); padding: 8px 20px; border-radius: 30px; color: var(--castanho-texto); font-weight: 500;">
                                <i class="fas fa-wine-bottle me-2" style="color: var(--verde-oliva);"></i> {{ __('search.juices') }}
                            </span>
                        </div>

                        <p style="color: var(--text-secondary); margin-bottom: 2rem;">
                            {{ __('search.try_different_keywords') }}
                        </p>

                        <a href="{{ route('packs.list') }}"
                           data-track-click="explorar_packs_sem_resultados"
                           data-track-type="cta"
                           data-track-meta="query: {{ $query }}"
                           class="btn"
                           style="background-color: var(--verde-dona); color: white; padding: 12px 35px; border-radius: 30px; text-decoration: none; display: inline-block; font-weight: 600;">
                            <i class="fas fa-box me-2"></i>
                            {{ __('search.browse_packs') }}
                        </a>

                    </div>
                </div>
            </div>

        @endif

    </div>
</section>

<!-- Espaçamento final -->
<div class="" style="margin-top: 50px;"></div>

<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@if($results->hasPages())
    <div id="search-load-more-sentinel"
         style="width: 100%; height: 1px; margin-top: 30px;"></div>

    <div id="search-pagination-data"
         data-next-page="{{ $results->currentPage() + 1 }}"
         data-last-page="{{ $results->lastPage() }}"
         data-query="{{ $query }}"
         data-tab="{{ $activeTab }}">
    </div>
@endif

@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/search.css') }}?v={{ config('app.version') }}">
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const sentinel = document.getElementById('search-load-more-sentinel');
    const paginationData = document.getElementById('search-pagination-data');
    const resultsGrid = document.getElementById('search-results-grid');
    const loader = document.getElementById('dm-loader');

    if (!sentinel || !paginationData || !resultsGrid) {
        return;
    }

    let isLoading = false;

    const loadMoreResults = async function () {
        if (isLoading) {
            return;
        }

        const nextPage = parseInt(paginationData.dataset.nextPage || '1', 10);
        const lastPage = parseInt(paginationData.dataset.lastPage || '1', 10);
        const query = paginationData.dataset.query || '';
        const tab = paginationData.dataset.tab || 'all';

        if (nextPage > lastPage) {
            observer.disconnect();
            return;
        }

        isLoading = true;

        if (loader) {
            loader.style.display = 'block';
        }

        try {
            const url = new URL(window.location.href);
            url.searchParams.set('page', nextPage);
            url.searchParams.set('q', query);

            if (tab && tab !== 'all') {
                url.searchParams.set('tab', tab);
            } else {
                url.searchParams.delete('tab');
            }

            const response = await fetch(url.toString(), {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            if (!response.ok) {
                throw new Error('Failed to load more results.');
            }

            const data = await response.json();
            if (data.items && data.items.trim() !== '') {
                resultsGrid.insertAdjacentHTML('beforeend', data.items);
                paginationData.dataset.nextPage = String(nextPage + 1);
            } else {
                observer.disconnect();
            }

            if (nextPage >= lastPage) {
                observer.disconnect();
            }
        } catch (error) {
            console.error(error);
        } finally {
            if (loader) {
                loader.style.display = 'none';
            }

            isLoading = false;
        }
    };

    const observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                loadMoreResults();
            }
        });
    }, {
        root: null,
        rootMargin: '0px 0px 600px 0px',
        threshold: 0
    });

    observer.observe(sentinel);
    
    
    $(document).on('click', '#search-tabs a', function(e){
        e.preventDefault();

        let url = $(this).attr('href');

        $('#dm-loader').fadeIn(200);

        $.ajax({
            url: url,
            method: "GET",
            dataType: "json",
            success: function(response){
                $('#search-tabs').replaceWith(response.tabs);
                $('#search-results-grid').html(response.items);

                $('#search-pagination-data')
                    .data('next-page', response.pagination.nextPage)
                    .data('last-page', response.pagination.lastPage);

                $('#dm-loader').fadeOut(200);

                window.scrollTo({
                    top: $('#search-results-sec').offset().top - 100,
                    behavior: 'smooth'
                });
            },
            error: function(){
                $('#dm-loader').fadeOut(200);
            }
        });
    });
});
</script>
@endpush