@extends('layouts.app')

@section('title', __('site.search_results.title'))

@section('content')
@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
@endphp

<main dir="{{ $isRtl ? 'rtl' : 'ltr' }}" lang="{{ $locale }}">
<div class="it-hero-2-area">
   <div class="slider">
      <!-- First Slide -->
      <div class="slide active">
         <div class="it-hero-2-overlay fix gray-bg z-index-1" data-background="assets/img/hero/images2.jpg">
            <div class="container">
               <div class="row align-items-center">
                  <div class="col-xl-6 col-lg-6">
                     <div class="it-hero-2-content">
                        
                        <h1 class="it-hero-2-title it-split-in-right">
                           {{ __('site.hero.welcome_title') }}
                        </h1>
                        <h4 class="it-hero-3-subtitle it-split-in-right">
                           <span>{{ __('site.hero.subtitle') }}</span>
                        </h4>

                        <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                           <p class="mb-30"><br/></p>
                        </div>
                        <div class="it-hero-btn d-sm-flex align-items-center">
                           <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                              <a href="#results" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                 <span>
                                    <span class="text-1">{{ __('site.hero.view_results') }}</span>
                                    <span class="text-2">{{ __('site.hero.view_results') }}</span>
                                 </span>
                                 <i>
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                       <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                    </svg>
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                       <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                    </svg>
                                 </i>
                              </a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-6 col-lg-6">
                     <div class="it-contact-form-box z-index-1 p-relative wow img-anim-top" data-wow-duration="1.5s" data-wow-delay="0.1">
                        <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">{{ __('site.search.title') }}</h4>
                        <form action="{{ route('search') }}">
                           <div class="it-contact-input-wrap">
                              <div class="row gx-30">
                                 <div class="col-sm-12 mb-20">
                                    <div class="it-contact-input-box">
                                       <input class="ph" type="text" name="q" value="{{ request('q') }}" placeholder="{{ __('site.search.placeholder') }}" style="color:#FFFFFF;">
                                    </div>
                                 </div>
                              </div>
                              <div class="it-contact-btn">
                                 <button type="submit" class="it-btn-orange">
                                    <span>
                                       <span class="text-1">{{ __('site.search.button') }}</span>
                                       <span class="text-2">{{ __('site.search.button') }}</span>
                                    </span>
                                    <i>
                                       <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                       </svg>
                                       <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                       </svg>
                                    </i>
                                 </button>
                              </div>
                           </div>
                        </form>
                        <img class="it-contact-shape-1" src="assets/img/shape/contact-1-1.png" alt="{{ __('site.no_image_alt') }}">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
    </div>
</div>

<div class="container mt-5 results-section" id="results" dir="{{ $isRtl ? 'rtl' : 'ltr' }}">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">
            {{ __('site.results.header_query') }} <span class="text-danger">{{ $query }}</span>
        </h3>
        <small class="text-muted">
            {{ __('site.results.total_results') }}
            {{ $news->count() + $trophees->count() + $guides->count() }}
        </small>
    </div>

    @if($news->isEmpty() && $trophees->isEmpty() && $guides->isEmpty())
        <div class="alert alert-info text-center">{{ __('site.results.no_results') }}</div>
    @else
        <div class="row gy-4">
            {{-- News --}}
            @if($news->count())
                <div class="col-12">
                    <h4 class="section-title text-danger mb-3">{{ __('site.results.section_news') }}</h4>
                </div>
                @foreach($news as $item)
                    <div class="col-md-6 col-lg-4">
                        <article class="card result-card h-100">
                            <div class="card-body d-flex flex-column">
                                @if(!empty($item->thumbnail))
                                    <img src="{{ asset($item->thumbnail) }}" alt="{{ $item->title ?? __('site.no_image_alt') }}" class="mb-3 rounded" style="width:100%; height:160px; object-fit:cover;">
                                @endif

                                <h5 class="card-title mb-1">
                                    <a href="{{ route('news.show', $item->slug) }}" class="stretched-link text-decoration-none">
                                        {!! highlight($item->title, $query) !!}
                                    </a>
                                </h5>

                                <small class="text-muted mb-2">{{ $item->created_at->format('Y-m-d') }}</small>

                                <p class="card-text mb-3 text-truncate-3">
                                    {!! highlight(strip_tags($item->excerpt ?? \Illuminate\Support\Str::limit($item->content, 150)), $query) !!}
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="badge bg-danger">{{ __('site.badge.news') }}</span>
                                    <a href="{{ route('news.show', $item->slug) }}" class="btn btn-sm btn-outline-primary">{{ __('site.action.read_more') }}</a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            @endif

            {{-- Trophées --}}
            @if($trophees->count())
                <div class="col-12">
                    <h4 class="section-title text-success mb-3">{{ __('site.results.section_trophees') }}</h4>
                </div>
                @foreach($trophees as $item)
                    <div class="col-md-6 col-lg-4">
                        <article class="card result-card h-100">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title mb-1">
                                    <a href="{{ route('trophees.show', $item->slug) }}" class="stretched-link text-decoration-none">
                                        {!! highlight($item->title, $query) !!}
                                    </a>
                                </h5>

                                <small class="text-muted mb-2">{{ $item->created_at->format('Y-m-d') }}</small>

                                <p class="card-text mb-3 text-truncate-3">
                                    {!! highlight(strip_tags($item->excerpt ?? \Illuminate\Support\Str::limit($item->description ?? '', 140)), $query) !!}
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="badge bg-success">{{ __('site.badge.trophees') }}</span>
                                    <a href="{{ route('trophees.show', $item->slug) }}" class="btn btn-sm btn-outline-primary">{{ __('site.action.details') }}</a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            @endif

            {{-- Guides --}}
            @if($guides->count())
                <div class="col-12">
                    <h4 class="section-title text-primary mb-3">{{ __('site.results.section_guides') }}</h4>
                </div>
                @foreach($guides as $item)
                    <div class="col-md-6 col-lg-4">
                        <article class="card result-card h-100">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title mb-2">
                                    <a href="#" class="stretched-link text-decoration-none">
                                        {!! highlight($item->titre_G, $query) !!}
                                    </a>
                                </h5>

                                <p class="card-text mb-3 text-truncate-3">
                                    {!! highlight(strip_tags($item->excerpt ?? \Illuminate\Support\Str::limit($item->description ?? '', 140)), $query) !!}
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="badge bg-primary">{{ __('site.badge.guides') }}</span>
                                    <a href="#" class="btn btn-sm btn-outline-primary">{{ __('site.action.view') }}</a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            @endif
        </div>
    @endif
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</main>

{{-- === JS Swiper === --}}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const swiper = new Swiper('.it-hero-swiper', {
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      speed: 900,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      effect: 'fade',
      fadeEffect: { crossFade: true },
    });
  });
</script>

<style>
/* (kept your styles exactly as before) */
.results-section {
  padding: 48px 36px;
  min-height: 520px;
  background: transparent;
  box-sizing: border-box;
  direction: rtl;
}
@media (max-width: 768px) {
  .results-section { padding: 30px 16px; min-height: 420px; }
}
.it-hero-swiper { height: 510px; position: relative; }
.it-hero-swiper .swiper-slide { display:flex; align-items:center; }
.swiper-slide-overlay { width:100%; height:100%; display:flex; align-items:center; }
.swiper-button-prev, .swiper-button-next { color:#fff; }
.swiper-pagination-bullet { background:#fff; opacity:.8; }
.hero-search-box input::placeholder { color: #ddd; }
@media (max-width: 768px) {
    .it-hero-swiper { height: 340px; }
    .display-5 { font-size: 1.8rem; }
}
.result-card { border: 1px solid rgba(0,0,0,0.05); transition: all .2s ease; }
.result-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
mark { background: #ffd54f; padding: 0 .2rem; border-radius: .15rem; color: #222; }
</style>

@endsection