@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 required 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)
        @php
            $title   = trans_field($item, 'title');
            $content = trans_field($item, 'content');
        @endphp

        <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="{{ $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($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($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-success">
                            {{ __('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)
        @php
            $title = trans_field($item, 'title'); // titre multilangue
            $description = trans_field($item, 'description'); // description multilangue
        @endphp

        <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($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($description ?? '', 140)
                            ),
                            $query
                        ) !!}
                    </p>

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

                </div>
            </article>
        </div>
    @endforeach
@endif


{{-- Guides --}}
@if($guides->count())
    <div class="col-12">
        <h4 class="section-title text-danger mb-3">
            {{ __('site.results.section_guides') }}
        </h4>
    </div>

    @foreach($guides as $item)
        @php
            $title = trans_field($item, 'titre'); // titre multilangue
            $description = trans_field($item, 'description'); // description multilangue
            $target = $item->open_new_tab ? ' target="_blank"' : '';

            // Déterminer l'URL de redirection selon le type de guide
            if($item->type_contenu === 'builder' && $item->builder_id) {
                $url = route('front.builder', ['id' => $item->builder_id]);
            } elseif($item->type_contenu === 'lien' && filter_var($item->lien, FILTER_VALIDATE_URL)) {
                $url = $item->lien;
            } elseif($item->type_contenu === 'lien') {
                $url = url($item->lien);
            } else {
                $url = route('guide.redirect', $item->id_G);
            }
        @endphp

        <div class="col-md-6 col-lg-4">
            <article class="card result-card h-100">
                <div class="card-body d-flex flex-column">

                    {{-- Titre avec redirection --}}
                    <h5 class="card-title mb-2">
                        <a href="{{ $url }}" class="stretched-link text-decoration-none" {!! $target !!}>
                            {!! highlight($title, $query) !!}
                        </a>
                    </h5>

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

                    {{-- Badge + bouton Voir --}}
                    <div class="mt-auto d-flex justify-content-between align-items-center">
                        <span class="badge bg-danger">
                            {{ __('site.badge.guides') }}
                        </span>

                        <a href="{{ $url }}" class="btn btn-success" {!! $target !!}>
                            {{ __('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