@extends('member.layouts.app')

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

@section('content')
    @php
        $hasMembership = request()->boolean('membership', true);
        $offers = [
            ['partner' => 'Hilton Colombo', 'offer' => 'Up to 20% off dining', 'category' => 'Dining', 'badge' => 'bg-orange-100 text-orange-700', 'description' => 'Valid for lunch and dinner buffet at Graze Kitchen.', 'validUntil' => 'Mar 31, 2026'],
            ['partner' => 'Odel', 'offer' => '15% off all purchases', 'category' => 'Shopping', 'badge' => 'bg-blue-100 text-blue-700', 'description' => 'Applicable on clothing and accessories.', 'validUntil' => 'Dec 31, 2026'],
            ['partner' => 'Jetwing Hotels', 'offer' => '25% off room rates', 'category' => 'Travel', 'badge' => 'bg-green-100 text-green-700', 'description' => 'Valid for double and triple room bookings.', 'validUntil' => 'Apr 30, 2026'],
            ['partner' => 'Laugfs', 'offer' => '10% off fuel', 'category' => 'Services', 'badge' => 'bg-gray-100 text-gray-700', 'description' => 'Minimum fill of Rs. 5000 required.', 'validUntil' => 'Dec 31, 2026'],
            ['partner' => 'Softlogic', 'offer' => '12% off electronics', 'category' => 'Shopping', 'badge' => 'bg-blue-100 text-blue-700', 'description' => 'Valid on Samsung, Panasonic and Dell products.', 'validUntil' => 'Jun 30, 2026'],
            ['partner' => 'Spa Ceylon', 'offer' => '30% off treatments', 'category' => 'Health', 'badge' => 'bg-purple-100 text-purple-700', 'description' => 'Valid for all 90 minute treatments.', 'validUntil' => 'Dec 31, 2026'],
        ];
    @endphp

    <div class="space-y-6">
        <div><h1 class="text-2xl font-bold text-gray-900">Offers & Deals</h1><p class="text-gray-600">Explore exclusive discounts from our partners.</p></div>
        <div class="flex flex-col sm:flex-row gap-4"><div class="relative flex-1"><i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i><input type="text" placeholder="Search offers or partners..." class="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200"></div><button class="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-xl text-gray-700"><i data-lucide="filter" class="w-5 h-5"></i>Filters</button></div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($offers as $offer)
                <div class="relative bg-white p-5 rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                    <div class="{{ !$hasMembership ? 'blur-[3px] opacity-50 pointer-events-none select-none' : '' }}">
                        <div class="flex justify-between items-start mb-4"><div class="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center text-gray-400 text-xs font-bold border border-gray-100">LOGO</div><span class="text-[10px] font-bold px-2.5 py-1 rounded-full {{ $offer['badge'] }}">{{ $offer['category'] }}</span></div>
                        <h3 class="font-bold text-lg text-gray-900 mb-1">{{ $offer['partner'] }}</h3>
                        <p class="text-[#F5A623] font-bold text-lg mb-2">{{ $offer['offer'] }}</p>
                        <p class="text-sm text-gray-500 mb-4">{{ $offer['description'] }}</p>
                        <div class="pt-4 border-t border-gray-50"><span class="text-xs text-gray-400">Valid until {{ $offer['validUntil'] }}</span><button class="w-full mt-3 py-2.5 text-sm font-medium text-white bg-[#0d4a4a] rounded-lg">View Details</button></div>
                    </div>
                    @if(!$hasMembership)
                        <div class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-white/20"><div class="bg-white/90 backdrop-blur-md p-4 rounded-xl shadow-lg text-center max-w-[80%]"><i data-lucide="lock" class="w-6 h-6 text-[#0d4a4a] mx-auto mb-2"></i><p class="font-bold text-gray-900 text-sm mb-2">Member Exclusive</p><button class="text-xs bg-[#0d4a4a] text-white px-3 py-1.5 rounded-lg font-medium">Unlock Offer</button></div></div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endsection