<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-4xl font-black text-slate-900 tracking-tight font-outfit">Ad Management</h1>
                <p class="text-slate-400 font-medium mt-1 italic uppercase tracking-widest text-[10px]">Managing site-wide advertisements</p>
            </div>
            <a href="{{ route('admin.advertisements.create') }}" class="btn btn-indigo gap-2 px-6">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" /></svg>
                New Advertisement
            </a>
        </div>
    </x-slot>

    @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-100 text-emerald-600 rounded-2xl font-bold text-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden flex flex-col">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-slate-50/50">
                        <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Preview</th>
                        <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Details</th>
                        <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Placement & Size</th>
                        <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Status</th>
                        <th class="px-8 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse($advertisements as $ad)
                        <tr class="hover:bg-slate-50/80 transition-colors group">
                            <td class="px-8 py-5">
                                <div class="w-20 h-12 bg-slate-100 rounded-lg overflow-hidden border border-slate-200">
                                    <img src="{{ asset('storage/' . $ad->image_path) }}" alt="{{ $ad->title }}" class="w-full h-full object-cover">
                                </div>
                            </td>
                            <td class="px-8 py-5">
                                <p class="text-sm font-bold text-slate-800">{{ $ad->title }}</p>
                                <p class="text-[10px] text-slate-400 truncate max-w-[150px]">{{ $ad->target_url }}</p>
                            </td>
                            <td class="px-8 py-5">
                                <span class="text-[10px] font-black text-indigo-500 bg-indigo-50 px-2 py-1 rounded-md uppercase mr-2">
                                    {{ str_replace('_', ' ', $ad->placement) }}
                                </span>
                                <span class="text-[10px] font-black text-slate-500 bg-slate-100 px-2 py-1 rounded-md uppercase">
                                    {{ $ad->size }}
                                </span>
                            </td>
                            <td class="px-8 py-5">
                                @if($ad->is_active)
                                    <div class="flex items-center gap-1.5">
                                        <span class="w-2 h-2 bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
                                        <span class="text-[10px] font-bold text-emerald-600 uppercase">Active</span>
                                    </div>
                                @else
                                    <div class="flex items-center gap-1.5 opacity-50">
                                        <span class="w-2 h-2 bg-slate-400 rounded-full"></span>
                                        <span class="text-[10px] font-bold text-slate-400 uppercase">Inactive</span>
                                    </div>
                                @endif
                            </td>
                            <td class="px-8 py-5">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.advertisements.edit', $ad) }}" class="p-2 bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-white hover:shadow-md rounded-lg transition-all">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                                    </a>
                                    <form action="{{ route('admin.advertisements.destroy', $ad) }}" method="POST" onsubmit="return confirm('Delete this advertisement permanently?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 bg-slate-50 text-slate-400 hover:text-red-600 hover:bg-white hover:shadow-md rounded-lg transition-all">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-8 py-12 text-center">
                                <p class="text-slate-400 font-bold italic">No advertisements found. Create your first one!</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($advertisements->hasPages())
            <div class="p-8 border-t border-slate-50 bg-slate-50/30">
                {{ $advertisements->links() }}
            </div>
        @endif
    </div>
</x-app-layout>
