@extends('layouts.admin')
@section('title', 'Offres Spéciales')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-extrabold text-gray-800">Offres Spéciales</h1>
        <p class="text-sm text-gray-500 mt-1">Gérez les bannières promotionnelles de la page d'accueil</p>
    </div>
    <a href="{{ route('admin.promotions.create') }}"
       class="inline-flex items-center gap-2 bg-blue-700 hover:bg-blue-800 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors shadow">
        <i class="fas fa-plus"></i> Nouvelle offre
    </a>
</div>

@if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-800 rounded-xl px-4 py-3 mb-5 flex items-center gap-2">
        <i class="fas fa-check-circle text-green-500"></i> {{ session('success') }}
    </div>
@endif

@if($promotions->isEmpty())
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-14 text-center">
        <div class="w-16 h-16 bg-amber-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-tag text-amber-400 text-2xl"></i>
        </div>
        <p class="text-gray-500 mb-4">Aucune offre spéciale pour l'instant.</p>
        <a href="{{ route('admin.promotions.create') }}"
           class="inline-flex items-center gap-2 bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-xl hover:bg-blue-800 transition-colors">
            <i class="fas fa-plus"></i> Créer la première offre
        </a>
    </div>
@else
    <div class="space-y-4">
        @foreach($promotions as $promo)
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col sm:flex-row">

            {{-- Preview image --}}
            <div class="w-full sm:w-48 h-36 sm:h-auto flex-shrink-0 relative overflow-hidden bg-gray-50">
                @if($promo->image_url)
                    <img src="{{ $promo->image_url }}" alt="{{ $promo->title }}"
                         class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <i class="fas fa-image text-gray-300 text-3xl"></i>
                    </div>
                @endif
                @if($promo->discount_text)
                    <span class="absolute top-2 left-2 bg-red-500 text-white text-xs font-extrabold px-2.5 py-1 rounded-full shadow">
                        {{ $promo->discount_text }}
                    </span>
                @endif
            </div>

            {{-- Info --}}
            <div class="flex-1 p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        @if($promo->subtitle)
                            <p class="text-amber-600 text-xs font-bold uppercase tracking-wide mb-1">{{ $promo->subtitle }}</p>
                        @endif
                        <h3 class="text-base font-extrabold text-gray-800">{{ $promo->title }}</h3>
                        @if($promo->description)
                            <p class="text-sm text-gray-500 mt-1 line-clamp-2">{{ $promo->description }}</p>
                        @endif
                    </div>
                    <div class="flex-shrink-0">
                        <form action="{{ route('admin.promotions.toggle', $promo) }}" method="POST">
                            @csrf @method('PATCH')
                            <button type="submit"
                                    class="text-xs font-bold px-3 py-1.5 rounded-full border transition-colors
                                           {{ $promo->is_active
                                              ? 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100'
                                              : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100' }}">
                                <i class="fas fa-circle text-[8px] mr-1"></i>
                                {{ $promo->is_active ? 'Active' : 'Inactive' }}
                            </button>
                        </form>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-4 mt-4 text-xs text-gray-400">
                    @if($promo->starts_at || $promo->ends_at)
                        <span class="inline-flex items-center gap-1">
                            <i class="fas fa-calendar"></i>
                            {{ $promo->starts_at?->format('d/m/Y') ?? '...' }}
                            →
                            {{ $promo->ends_at?->format('d/m/Y') ?? '∞' }}
                        </span>
                    @endif
                    @if($promo->link_url)
                        <span class="inline-flex items-center gap-1">
                            <i class="fas fa-link"></i>
                            <span class="truncate max-w-[200px]">{{ $promo->link_url }}</span>
                        </span>
                    @endif
                    <span class="inline-flex items-center gap-1">
                        <i class="fas fa-sort-numeric-up"></i> Ordre : {{ $promo->sort_order }}
                    </span>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex sm:flex-col items-center justify-center gap-2 px-4 py-3 sm:py-5 bg-gray-50 border-t sm:border-t-0 sm:border-l border-gray-100">
                <a href="{{ route('admin.promotions.edit', $promo) }}"
                   class="w-9 h-9 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-xl flex items-center justify-center transition-colors" title="Modifier">
                    <i class="fas fa-pen text-sm"></i>
                </a>
                <form action="{{ route('admin.promotions.destroy', $promo) }}" method="POST"
                      onsubmit="return confirm('Supprimer cette offre ?')">
                    @csrf @method('DELETE')
                    <button type="submit"
                            class="w-9 h-9 bg-red-50 hover:bg-red-100 text-red-500 rounded-xl flex items-center justify-center transition-colors" title="Supprimer">
                        <i class="fas fa-trash text-sm"></i>
                    </button>
                </form>
            </div>

        </div>
        @endforeach
    </div>
@endif
@endsection