@extends('layouts.app')

@section('content')
    <style>
        .dropdown-hover {
            position: relative;
            display: inline-block;
        }

        .dropdown-menu-custom {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            z-index: 999;
        }

        .dropdown-menu-custom a {
            display: block;
            padding: 10px 14px;
            text-decoration: none;
            color: #333;
            font-weight: 500;
        }

        .dropdown-menu-custom a:hover {
            background: #ffc107;
            /* warning */
            color: #000;
        }

        .dropdown-hover:hover .dropdown-menu-custom {
            display: block;
        }
    </style>
    <!-- Page Title -->
    <div class="page-title accent-background">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Scopri tutti i nostri servizi</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="index.html">Home</a></li>
                    <li class="current">Servizi</li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Filtra per categoria</h2>
            </div>
            <div class="col-12 d-flex gap-2 flex-wrap">

                @foreach ($categorie as $categoria)
                    <div class="dropdown-hover">
                        <!-- Link categoria -->
                        <a class="btn btn-warning" href="{{ route('promotions.categoria', $categoria->slug) }}">
                            {{ $categoria->nome }}
                        </a>

                        <!-- Dropdown sottocategorie -->
                        @if ($categoria->sottocategorie->count())
                            <div class="dropdown-menu-custom">
                                @foreach ($categoria->sottocategorie as $sub)
                                    <a href="{{ route('promotions.sottocategoria', [$categoria->slug, $sub->slug]) }}">
                                        {{ $sub->nome }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endforeach

            </div>
        </div>
    </div>
    <!-- Services Section -->
    <section id="services" class="services section light-background">

        <div class="container">

            <div class="row gy-4">
                @foreach ($promotions as $item)
                    <div class="col-lg-3 col-md-6 mb-5">
                        <div class="promo-card h-100 d-flex flex-column">

                            <!-- Immagine come sfondo -->
                            <div class="promo-image"
                                style="background-image: url('/storage/{{ $item->image }}');height: 200px;overflow: hidden;background-size: cover;background-position: center;">
                            </div>

                            <!-- Contenuto -->
                            <div class="promo-content d-flex flex-column flex-grow-1">
                                <h3 class="promo-title">{{ $item->title }}</h3>

                                <p class="promo-description">
                                    {{ Str::limit($item->description, 100) }}
                                </p>

                                <!-- Bottone sempre in basso -->
                                <a href="{{ route('promozioni.promodetail', $item->id) }}" class="btn btn-warning mt-auto">
                                    Scopri
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>

        </div>

    </section><!-- /Services Section -->

    <!-- Features Section -->
    <section id="features" class="features section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Recenti</h2>
            <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
        </div><!-- End Section Title -->

        <div class="container">

            <div class="row gy-4">
                @foreach ($promotions as $item)
                    <div class="col-lg-3 col-md-6 mb-5">
                        <div class="promo-card h-100 d-flex flex-column">

                            <!-- Immagine come sfondo -->
                            <div class="promo-image"
                                style="background-image: url('/storage/{{ $item->image }}');height: 200px;overflow: hidden;background-size: cover;background-position: center;">
                            </div>

                            <!-- Contenuto -->
                            <div class="promo-content d-flex flex-column flex-grow-1">
                                <h3 class="promo-title">{{ $item->title }}</h3>

                                <p class="promo-description">
                                    {{ Str::limit($item->description, 100) }}
                                </p>

                                <!-- Bottone sempre in basso -->
                                <a href="{{ route('promozioni.promodetail', $item->id) }}" class="btn btn-warning mt-auto">
                                    Scopri
                                </a>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>

        </div>

    </section><!-- /Features Section -->
@endsection