<x-app-layout>

    <x-module-hero
        title="Hero Slider"
        description="Manage homepage hero slider images and titles"
        icon="fa-images"
    >
        <x-slot name="tabs">
            @role('Manager|Super Manager')
            <a href="{{ route('admin.sliders.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.sliders.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> All Sliders
            </a>
            <a href="{{ route('admin.sliders.create') }}"
               class="module-hero-tab {{ request()->routeIs('admin.sliders.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-plus text-sm"></i> Add Slider
            </a>
            <a href="{{ route('admin.hero-cards.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.hero-cards.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-th-large text-sm"></i> Hero Cards
            </a>
            @endrole
            @can('manage what we do images')
            <a href="{{ route('admin.what-we-do-images.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.what-we-do-images.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-image text-sm"></i> What We Do Images
            </a>
            @endcan
            @can('view pages')
            <a href="{{ route('admin.pages.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.pages.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-file-alt text-sm"></i> Pages
            </a>
            @endcan
        </x-slot>
        <x-slot name="actions">
            <a href="{{ route('admin.sliders.create') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-white/90 transition">
                <i class="fas fa-plus"></i> Add Slider
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">

        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
            </div>
        @endif

        <!-- Stats Section -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
                        <i class="fas fa-images text-indigo-600 text-lg"></i>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium uppercase">Total Sliders</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $sliders->count() }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fas fa-globe text-green-600 text-lg"></i>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium uppercase">Published</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $sliders->where('status', 'published')->count() }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
                        <i class="fas fa-pencil-alt text-yellow-600 text-lg"></i>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium uppercase">Drafts</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $sliders->where('status', 'draft')->count() }}</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-cloud-upload-alt text-purple-600 text-lg"></i>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 font-medium uppercase">Uploaded</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $sliders->where('image_source', 'upload')->count() }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters Section -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
            <form method="GET" class="flex flex-wrap items-end gap-4" x-data="{ open: false }">
                <div class="flex-1 min-w-64">
                    <label for="search" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-search mr-2"></i> Search
                    </label>
                    <input type="text" id="search" name="search" value="{{ request('search') }}"
                           placeholder="Search by title..."
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                </div>

                <div>
                    <label for="status_filter" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-filter mr-2"></i> Status
                    </label>
                    <select id="status_filter" name="status"
                            class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        <option value="">All Statuses</option>
                        <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Published</option>
                        <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="archived" {{ request('status') === 'archived' ? 'selected' : '' }}>Archived</option>
                    </select>
                </div>

                <div>
                    <label for="source_filter" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-images mr-2"></i> Image Source
                    </label>
                    <select id="source_filter" name="source"
                            class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        <option value="">All Sources</option>
                        <option value="upload" {{ request('source') === 'upload' ? 'selected' : '' }}>Uploaded</option>
                        <option value="url" {{ request('source') === 'url' ? 'selected' : '' }}>URL Link</option>
                    </select>
                </div>

                <div>
                    <button type="submit"
                            class="px-6 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">
                        <i class="fas fa-search mr-2"></i> Filter
                    </button>
                </div>

                @if(request()->has('search') || request()->has('status') || request()->has('source'))
                    <div>
                        <a href="{{ route('admin.sliders.index') }}"
                           class="px-6 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition">
                            <i class="fas fa-times mr-2"></i> Clear
                        </a>
                    </div>
                @endif
            </form>
        </div>

        <!-- Empty State -->
        @if($sliders->isEmpty())
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                <i class="fas fa-images text-5xl text-gray-300 mb-4 block"></i>
                <h3 class="text-lg font-semibold text-gray-700 mb-2">No sliders found</h3>
                <p class="text-gray-500 mb-6">{{ request()->has('search') || request()->has('status') || request()->has('source') ? 'Try adjusting your filters' : 'Add your first hero slider to get started.' }}</p>
                <a href="{{ route('admin.sliders.create') }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-plus"></i> Add Slider
                </a>
            </div>
        @else
            <!-- Grid View -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($sliders as $slider)
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow group">

                        <!-- Image Container -->
                        <div class="relative w-full h-40 bg-gray-100 overflow-hidden">
                            <img src="{{ $slider->getImageUrl() }}"
                                 alt="{{ $slider->title }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                 onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22%3E%3Crect fill=%22%23e5e7eb%22 width=%22400%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 font-size=%2224%22 fill=%22%239ca3af%22 text-anchor=%22middle%22 dy=%22.3em%22%3ENo Image%3C/text%3E%3C/svg%3E'">

                            <!-- Status Badge -->
                            <div class="absolute top-3 right-3">
                                @if($slider->status === 'published')
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                        <i class="fas fa-circle" style="font-size:6px"></i> Published
                                    </span>
                                @elseif($slider->status === 'archived')
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
                                        <i class="fas fa-circle" style="font-size:6px"></i> Archived
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-circle" style="font-size:6px"></i> Draft
                                    </span>
                                @endif
                            </div>

                            <!-- Image Source Badge -->
                            <div class="absolute top-3 left-3">
                                @if($slider->isUploadedImage())
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                        <i class="fas fa-cloud-upload-alt"></i> Upload
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800">
                                        <i class="fas fa-link"></i> URL
                                    </span>
                                @endif
                            </div>

                            <!-- Quick Actions Overlay -->
                            <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                <a href="{{ route('admin.sliders.edit', $slider) }}"
                                   class="w-10 h-10 rounded-full bg-white text-indigo-600 flex items-center justify-center hover:bg-indigo-600 hover:text-white transition"
                                   title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.sliders.destroy', $slider) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Delete this slider?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="w-10 h-10 rounded-full bg-white text-red-600 flex items-center justify-center hover:bg-red-600 hover:text-white transition"
                                            title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Content Section -->
                        <div class="p-4">
                            <!-- Title -->
                            <h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-indigo-600 cursor-pointer">
                                <a href="{{ route('admin.sliders.edit', $slider) }}">{{ $slider->title }}</a>
                            </h3>

                            <!-- Image Info -->
                            <div class="mb-3 space-y-1 text-xs text-gray-600">
                                @if($slider->isUploadedImage())
                                    <p><i class="fas fa-file-image mr-2 text-blue-600"></i> {{ $slider->image_filename }}</p>
                                    <p><i class="fas fa-database mr-2 text-blue-600"></i> {{ $slider->getFormattedFileSize() }}</p>
                                @else
                                    <p><i class="fas fa-link mr-2 text-purple-600"></i> External URL</p>
                                    <p class="truncate"><i class="fas fa-globe mr-2 text-purple-600"></i> {{ Str::limit($slider->image_path, 40) }}</p>
                                @endif
                            </div>

                            <!-- Order -->
                            <div class="mb-4 p-2 bg-gray-50 rounded text-sm text-gray-700">
                                <i class="fas fa-sort mr-2 text-gray-600"></i> Order: <span class="font-semibold">{{ $slider->order }}</span>
                            </div>

                            <!-- Actions -->
                            <div class="grid grid-cols-2 gap-2 pt-3 border-t border-gray-100">
                                <a href="{{ route('admin.sliders.edit', $slider) }}"
                                   class="flex items-center justify-center gap-2 px-3 py-2 bg-indigo-50 text-indigo-700 text-sm font-medium rounded-lg hover:bg-indigo-100 transition">
                                    <i class="fas fa-edit"></i> Edit
                                </a>

                                <form action="{{ route('admin.sliders.destroy', $slider) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Delete this slider?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-red-50 text-red-700 text-sm font-medium rounded-lg hover:bg-red-100 transition">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 text-xs text-gray-500">
                            <i class="fas fa-calendar-alt mr-2"></i> Updated: {{ $slider->updated_at->diffForHumans() }}
                        </div>

                    </div>
                @endforeach
            </div>

            <!-- Pagination Section (if implemented) -->
            @if(method_exists($sliders, 'links'))
                <div class="mt-6">
                    {{ $sliders->links() }}
                </div>
            @endif

        @endif

    </div>

</x-app-layout>
