@extends('admin.layouts.dashboard')

@section('title', 'Offers')

@section('content')
    @php
        $statusClasses = [
            'active' => 'bg-green-500/10 text-green-400',
            'expiring_soon' => 'bg-amber-500/10 text-amber-400',
            'paused' => 'bg-gray-500/10 text-gray-400',
        ];
    @endphp

    <div class="space-y-6">
        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4">
            <div>
                <h1 class="text-2xl font-bold text-white">Offers</h1>
                <p class="text-gray-400 text-sm mt-1">Manage all partner offers from one place.</p>
            </div>
            <div class="flex gap-2">
                <form method="get" action="{{ route('admin.offers.index') }}" class="flex gap-2">
                    <input type="text" name="q" value="{{ $search }}" placeholder="Search offers" class="px-3 py-2 rounded-lg bg-[#1e293b] border border-gray-700 text-sm text-white">
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Search</button>
                </form>
                <a href="{{ route('admin.offers.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Create Offer</a>
            </div>
        </div>

        @if (session('status'))
            <div class="rounded-xl border border-emerald-700 bg-emerald-900/20 px-4 py-3 text-sm text-emerald-300">{{ session('status') }}</div>
        @endif

        <div class="bg-[#1e293b] rounded-xl border border-gray-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="text-xs text-gray-500 uppercase bg-[#0f172a]">
                        <tr>
                            <th class="px-5 py-3">Title</th>
                            <th class="px-5 py-3">Partner</th>
                            <th class="px-5 py-3">Discount</th>
                            <th class="px-5 py-3">Validity</th>
                            <th class="px-5 py-3">Redemptions</th>
                            <th class="px-5 py-3">Status</th>
                            <th class="px-5 py-3 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-800">
                        @forelse ($offers as $offer)
                            <tr class="hover:bg-gray-800/50">
                                <td class="px-5 py-4">
                                    <p class="font-medium text-white">{{ $offer->title }}</p>
                                    <p class="text-xs text-gray-500">{{ $offer->category }}</p>
                                </td>
                                <td class="px-5 py-4 text-gray-300">{{ $offer->partner?->company_name ?: $offer->partner?->name ?: 'N/A' }}</td>
                                <td class="px-5 py-4 text-amber-400 font-medium">{{ $offer->discount_label }}</td>
                                <td class="px-5 py-4 text-gray-400 text-xs">
                                    <p>{{ $offer->valid_from?->format('M d, Y') }}</p>
                                    <p>{{ $offer->valid_until?->format('M d, Y') }}</p>
                                </td>
                                <td class="px-5 py-4 text-gray-300">{{ number_format((int) ($offer->verified_redemptions_count ?? 0)) }}</td>
                                <td class="px-5 py-4"><span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $statusClasses[$offer->status] ?? 'bg-gray-500/10 text-gray-400' }}">{{ ucfirst(str_replace('_', ' ', $offer->status)) }}</span></td>
                                <td class="px-5 py-4 text-right">
                                    <div class="flex justify-end gap-2">
                                        <a href="{{ route('admin.offers.show', $offer) }}" class="p-1 text-gray-400 hover:text-white"><i data-lucide="eye" class="w-4 h-4"></i></a>
                                        <a href="{{ route('admin.offers.edit', $offer) }}" class="p-1 text-gray-400 hover:text-blue-400"><i data-lucide="edit" class="w-4 h-4"></i></a>
                                        <form action="{{ route('admin.offers.destroy', $offer) }}" method="post" onsubmit="return confirm('Delete this offer?');">
                                            @csrf
                                            @method('delete')
                                            <button type="submit" class="p-1 text-gray-400 hover:text-red-400"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-5 py-6 text-center text-gray-400">No offers found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div>{{ $offers->links() }}</div>
    </div>
@endsection