@extends('layouts.app')

@section('title', 'Deals & Discounts')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Deals & Discounts</h1>
            <p class="text-gray-600">Save big on quality products from verified suppliers</p>
        </div>

        @if($topDeal)
            <!-- Top Deal Banner -->
            <div class="bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl p-8 mb-8 text-white">
                <div class="flex flex-col md:flex-row items-center gap-8">
                    <div class="w-48 h-48 bg-white rounded-xl overflow-hidden flex-shrink-0">
                        @if($topDeal->image_url)
                            <img src="{{ $topDeal->image_url }}" alt="{{ $topDeal->name }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-6xl text-gray-300">📦</div>
                        @endif
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <span class="inline-block bg-yellow-400 text-yellow-900 text-sm font-bold px-3 py-1 rounded-full mb-3">
                            TOP DEAL
                        </span>
                        <h2 class="text-2xl font-bold mb-2">{{ $topDeal->name }}</h2>
                        <p class="text-white/80 mb-4">{{ Str::limit($topDeal->description, 100) }}</p>
                        <div class="flex items-baseline gap-3 justify-center md:justify-start mb-4">
                            <span class="text-4xl font-bold">R {{ number_format($topDeal->price, 2) }}</span>
                            <span class="text-xl text-white/60 line-through">R {{ number_format($topDeal->compare_price, 2) }}</span>
                            @php $discount = round((($topDeal->compare_price - $topDeal->price) / $topDeal->compare_price) * 100); @endphp
                            <span class="bg-white text-red-600 text-sm font-bold px-2 py-1 rounded">-{{ $discount }}%</span>
                        </div>
                        <a href="{{ route('products.show', $topDeal->id) }}" class="inline-block bg-white text-red-600 px-8 py-3 rounded-xl font-bold hover:bg-gray-100 transition">
                            View Deal
                        </a>
                    </div>
                </div>
            </div>
        @endif

        <!-- All Deals -->
        @if($deals->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($deals as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>

            <div class="mt-8">
                {{ $deals->links() }}
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm p-12 text-center">
                <div class="text-6xl mb-4">🏷️</div>
                <h2 class="text-2xl font-bold text-gray-900 mb-2">No deals available</h2>
                <p class="text-gray-600 mb-6">Check back soon for amazing discounts!</p>
                <a href="{{ route('products.index') }}" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
                    Browse All Products
                </a>
            </div>
        @endif
    </div>
</div>
@endsection