@extends('layouts.admin')

@section('page-title', 'All Campaign')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 tracking-tight">All Campaign</h2>
                <p class="text-sm text-gray-500 mt-1">You have total <span class="font-semibold text-indigo-600">{{ $campaigns->total() }}</span> Campaigns</p>
            </div>
            <a href="{{ route('admin.campaigns.create') }}" class="inline-flex items-center gap-2 px-4 py-2 border border-indigo-300 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors text-sm font-medium">
                <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="M12 4v16m8-8H4"/></svg>
                Add Campaign
            </a>
        </div>

        {{-- Table Card --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h4 class="text-base font-semibold text-gray-900">Campaign</h4>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-12">#</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Banner</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Start Date</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">End Date</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Featured</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Flash Sale</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Options</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($campaigns as $campaign)
                        <tr class="hover:bg-gray-50/50 transition-colors" id="row_{{ $campaign->id }}">
                            <td class="py-3 px-5 text-sm text-gray-500">{{ $loop->iteration + ($campaigns->currentPage() - 1) * $campaigns->perPage() }}</td>
                            <td class="py-3 px-5">
                                <a href="#" target="_blank" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ $campaign->name }}</a>
                            </td>
                            <td class="py-3 px-5">
                                <img src="{{ $campaign->imageUrl() }}" alt="{{ $campaign->name }}" class="w-10 h-10 rounded-lg object-cover" width="40">
                            </td>
                            <td class="py-3 px-5 text-sm text-gray-700">{{ $campaign->start_date?->format('M d, Y h:i A') ?? '-' }}</td>
                            <td class="py-3 px-5 text-sm text-gray-700">{{ $campaign->end_date?->format('M d, Y h:i A') ?? '-' }}</td>
                            <td class="py-3 px-5 text-center">
                                <form action="{{ route('admin.campaigns.toggle-status', $campaign) }}" method="POST" class="inline toggle-form">
                                    @csrf
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer status-toggle" {{ $campaign->status === 'active' ? 'checked' : '' }} data-url="{{ route('admin.campaigns.toggle-status', $campaign) }}">
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                    </label>
                                </form>
                            </td>
                            <td class="py-3 px-5 text-center">
                                <form action="{{ route('admin.campaigns.toggle-featured', $campaign) }}" method="POST" class="inline toggle-form">
                                    @csrf
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer status-toggle" {{ $campaign->is_featured ? 'checked' : '' }} data-url="{{ route('admin.campaigns.toggle-featured', $campaign) }}">
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                    </label>
                                </form>
                            </td>
                            <td class="py-3 px-5 text-center">
                                <form action="{{ route('admin.campaigns.toggle-flash-sale', $campaign) }}" method="POST" class="inline toggle-form">
                                    @csrf
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer status-toggle" {{ $campaign->is_flash_sale ? 'checked' : '' }} data-url="{{ route('admin.campaigns.toggle-flash-sale', $campaign) }}">
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                    </label>
                                </form>
                            </td>
                            <td class="py-3 px-5">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="{{ route('admin.campaign-requests.index') }}" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-primary-300 text-primary-600 hover:bg-primary-50 transition-colors" title="Campaign Request">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                                    </a>
                                    <a href="{{ route('admin.campaigns.edit', $campaign) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-gray-300 text-gray-600 hover:bg-gray-50 transition-colors" title="Edit">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/></svg>
                                    </a>
                                    <form action="{{ route('admin.campaigns.destroy', $campaign) }}" method="POST" class="inline" onsubmit="return confirm('Delete this campaign?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-red-300 text-red-600 hover:bg-red-50 transition-colors" title="Delete">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="py-16 text-center">
                                <div class="w-16 h-16 mx-auto bg-gray-50 rounded-2xl flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.593 8.25a60.858 60.858 0 00-2.532.342M12 16.5V9.75m0 0a60.858 60.858 0 00-2.532-.342m12.866-6.198a.75.75 0 00-1.055.052L4.962 17.77a.75.75 0 00.052 1.055l1.434 1.094a.75.75 0 001.055-.052l14.307-16.56a.75.75 0 00-.052-1.056l-1.434-1.094z"/></svg>
                                </div>
                                <p class="text-gray-500 font-medium">No campaigns found</p>
                                <p class="text-sm text-gray-400 mt-1">Create your first campaign to get started</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($campaigns->hasPages())
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $campaigns->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.status-toggle').forEach(function(toggle) {
        toggle.addEventListener('change', function() {
            const form = this.closest('.toggle-form');
            const url = this.dataset.url;

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
            }).catch(function() {
                form.submit();
            });
        });
    });
});
</script>
@endpush
@endsection