@extends('layouts.admin')

@section('title', 'Banner Management')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Banner Management</h1>
            <a href="{{ route('admin.banners.create') }}" 
               class="bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors">
                <i data-feather="plus" class="w-5 h-5 inline mr-2"></i>
                Add New Banner
            </a>
        </div>

        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Title
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Position
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Status
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Sort Order
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($banners->count() > 0)
                            @foreach($banners as $banner)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center space-x-3">
                                            @if($banner->image)
                                                <img src="{{ $banner->image_url }}" alt="{{ $banner->title }}" 
                                                     class="w-16 h-12 object-cover rounded-lg">
                                            @endif
                                            <div>
                                                <div class="font-medium text-gray-900">{{ $banner->title }}</div>
                                                @if($banner->subtitle)
                                                    <div class="text-sm text-gray-500">{{ $banner->subtitle }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs rounded-full {{ $banner->position === 'hero' ? 'bg-orange-100 text-orange-800' : 'bg-blue-100 text-blue-800' }}">
                                            {{ $banner->position }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs rounded-full {{ $banner->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ $banner->status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        {{ $banner->sort_order }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <a href="{{ route('admin.banners.edit', $banner->id) }}" 
                                               class="text-orange-600 hover:text-orange-800 font-medium">
                                                <i data-feather="edit" class="w-4 h-4"></i>
                                            </a>
                                            <button onclick="toggleBannerStatus({{ $banner->id }})" 
                                                    class="text-{{ $banner->is_active ? 'red' : 'green' }}-600 hover:text-{{ $banner->is_active ? 'red' : 'green' }}-800 font-medium">
                                                <i data-feather="{{ $banner->is_active ? 'eye-off' : 'eye' }}" class="w-4 h-4"></i>
                                            </button>
                                            <form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" 
                                                  onsubmit="return confirm('Are you sure you want to delete this banner?')">
                                                @csrf
                                                <button type="submit" class="text-red-600 hover:text-red-800 font-medium">
                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                                    No banners found.
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function toggleBannerStatus(bannerId) {
    fetch(`/admin/banners/${bannerId}/toggle`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
@endsection
