@extends('layouts.app')

@section('content')
    {{--     @php
        use Carbon\Carbon;

        $now = Carbon::now();
        $isNew = $promotion->created_at->diffInDays($now) <= 7;
        $isExpiring = $promotion->end_date && Carbon::parse($promotion->end_date)->diffInDays($now) <= 7;
    @endphp --}}

    <!-- PAGE TITLE -->
    <style>
        .sticky-box {
            position: sticky;
            top: 100px;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        .promo-badges {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }

        .promo-badges .badge {
            margin-right: 5px;
        }

        .promo-image-box img {
            transition: transform 0.3s ease;
        }

        .promo-image-box:hover img {
            transform: scale(1.03);
        }

        .promo-description img {
            max-width: 100% !important;
            height: auto !important;
            display: block;
        }

        .promo-description iframe,
        .promo-description video {
            max-width: 100%;
        }
    </style>
    <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">{{ $promotion->title }}</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li><a href="{{ route('promotions.index') }}">Promozioni</a></li>
                    <li class="current">{{ $promotion->title }}</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- /PAGE TITLE -->

    <section class="section">
        <div class="container">

            <div class="row gy-4 align-items-start">

                <!-- COLONNA 1: IMMAGINE + BADGE -->
                <div class="col-lg-4" data-aos="fade-up">
                    <div class="promo-image-box position-relative">

                        {{--                         <div class="promo-badges">
                            @if ($isNew)
                                <span class="badge bg-success">Nuovo</span>
                            @endif
                            @if ($isExpiring)
                                <span class="badge bg-danger">In scadenza</span>
                            @endif
                        </div> --}}

                        <a href="#" data-bs-toggle="modal" data-bs-target="#imageLightbox">
                            <img src="{{ asset('storage/' . $promotion->image) }}" class="img-fluid rounded"
                                alt="{{ $promotion->title }}">
                        </a>

                    </div>
                </div>

                <!-- COLONNA 2: CONTENUTO -->
                <div class="col-lg-5" data-aos="fade-up" data-aos-delay="100">
                    <div class="promo-content bg-white p-4 rounded shadow-sm">
                        <h2 class="mb-3">{{ $promotion->title }}</h2>

                        <div class="promo-description">
                            {!! $promotion->content !!}
                        </div>
                    </div>
                </div>

                <!-- COLONNA 3: DETTAGLI + CTA STICKY -->
                <div class="col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="promo-info-box sticky-box">

                        <h4 class="mb-3">Dettagli promozione</h4>

                        <ul class="list-unstyled mb-4">
                            <li><strong>Categoria:</strong> {{ $promotion->category ?? '—' }}</li>
                            <li><strong>Inizio:</strong> {{ $promotion->start_date ?? '—' }}</li>
                            <li><strong>Fine:</strong> {{ $promotion->end_date ?? '—' }}</li>
                        </ul>

                        <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#subscribeModal">
                            Iscriviti
                        </button>

                    </div>
                </div>

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

    <!-- MODAL LIGHTBOX IMMAGINE -->
    <div class="modal fade" id="imageLightbox" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-transparent border-0">
                <img src="{{ asset('storage/' . $promotion->image) }}" class="img-fluid rounded">
            </div>
        </div>
    </div>

    <!-- MODAL ISCRIZIONE -->
    <div class="modal fade" id="subscribeModal" tabindex="-1">
        <div class="modal-dialog">
            <form method="POST" action="">
                @csrf

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Iscriviti alla promozione</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Nome</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-primary w-100">
                            Conferma iscrizione
                        </button>
                    </div>
                </div>

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

    <div class="container">
        <h2 class="text-center mb-4">Prodotti correlati</h2>
        <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-primary mt-auto">
                                Scopri
                            </a>
                        </div>

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

    </div>
@endsection