<div class="ml-[280px] min-h-screen space-y-10">

    <!-- ================= HEADER ================= -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-[26px] font-semibold tracking-tight text-gray-900">
                Projects
            </h1>
            <p class="text-sm text-gray-500">
                Manage all projects / works
            </p>
        </div>

        <div class="flex gap-3 items-center">
            <input type="text"
                   wire:model.live.debounce.300ms="search"
                   placeholder="Search projects…"
                   class="w-64 rounded-xl border border-gray-200 px-4 py-2 text-sm
                          focus:ring-2 focus:ring-[#f38121]/30 focus:outline-none" />

            <a href="{{ route('admin.projects.create') }}"
               class="bg-[#f38121] hover:bg-[#e37218]
                      transition text-white px-5 py-2 rounded-xl
                      text-sm font-medium shadow-sm">
                + Add Project
            </a>
        </div>
    </div>

    <!-- ================= SUCCESS MESSAGE ================= -->
    @if (session()->has('success'))
        <div class="bg-emerald-50 border border-emerald-200
                    text-emerald-700 px-4 py-3 rounded-xl text-sm">
            {{ session('success') }}
        </div>
    @endif

    <!-- ================= PROJECT LIST ================= -->
    <div class="space-y-5">

        @forelse($projects as $project)
            <div wire:key="project-{{ $project->id }}"
                 class="relative bg-white rounded-[24px] p-6
                        border border-gray-100
                        shadow-[0_18px_40px_-28px_rgba(0,0,0,0.18)]
                        transition hover:shadow-[0_28px_60px_-30px_rgba(0,0,0,0.25)]">

                <!-- top hairline -->
                <div class="absolute inset-x-0 top-0 h-px bg-gray-200/60"></div>

                <div class="grid grid-cols-12 gap-6 items-center">

                    <!-- PROJECT INFO -->
                    <div class="col-span-12 lg:col-span-4">
                        <h3 class="text-[16px] font-semibold text-gray-900">
                            {{ $project->title }}
                        </h3>

                        @if ($project->mini_text)
                            <p class="text-sm text-gray-500 mt-1">
                                {{ $project->mini_text }}
                            </p>
                        @endif

                        <span
                            class="inline-flex items-center gap-1 mt-3
                                   text-xs px-3 py-1 rounded-full
                                   {{ $project->status
                                        ? 'bg-emerald-100 text-emerald-700'
                                        : 'bg-red-100 text-red-700' }}">
                            {{ $project->status ? 'Active' : 'Inactive' }}
                        </span>
                    </div>

                    <!-- HERO MEDIA -->
                    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
                        @if ($project->hero_media_type === 'image' && $project->hero_media)
                            <img src="{{ asset($project->hero_media) }}"
                                 class="w-full max-w-[200px] h-[120px]
                                        object-cover rounded-xl border border-gray-200"
                                 alt="">
                        @elseif ($project->hero_media_type === 'video' && $project->hero_media)
                            <video class="w-full max-w-[200px] h-[120px]
                                          rounded-xl border border-gray-200"
                                   controls>
                                <source src="{{ $project->hero_media }}" type="video/mp4">
                            </video>
                        @else
                            <div
                                class="w-[200px] h-[120px]
                                       flex items-center justify-center
                                       text-gray-400 border border-dashed rounded-xl">
                                No Media
                            </div>
                        @endif
                    </div>

                    <!-- ROTATING TEXT -->
                    <div class="col-span-12 sm:col-span-4 lg:col-span-3">
                        <p class="text-[11px] uppercase tracking-widest text-gray-400 mb-2">
                            Rotating Text
                        </p>

                        @if (is_array($project->rotating_text))
                            <div class="flex flex-wrap gap-2">
                                @foreach ($project->rotating_text as $text)
                                    <span
                                        class="text-xs px-3 py-1 rounded-full
                                               bg-gray-100 text-gray-700">
                                        {{ $text }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <span class="text-sm text-gray-400">—</span>
                        @endif
                    </div>

                    <!-- ACTIONS -->
                    <div class="col-span-12 lg:col-span-2 flex lg:flex-col gap-2">
                        <a href="{{ route('admin.projects.edit', $project->id) }}"
                           class="text-sm px-3 py-2 rounded-xl text-center
                                  bg-blue-50 text-blue-700
                                  hover:bg-blue-100 transition">
                            Edit
                        </a>

                        <button wire:click="confirmDelete({{ $project->id }})"
                                class="text-sm px-3 py-2 rounded-xl
                                       bg-red-50 text-red-700
                                       hover:bg-red-100 transition">
                            Delete
                        </button>
                    </div>

                </div>
            </div>
        @empty
            <div class="text-center py-24 text-gray-400">
                No projects found
            </div>
        @endforelse

    </div>

    <!-- ================= PAGINATION ================= -->
@if ($projects->hasPages())
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between
                gap-4 mt-8 px-2">

        <!-- LEFT INFO -->
        <p class="text-sm text-gray-500">
            Showing {{ $projects->firstItem() }}
            to {{ $projects->lastItem() }}
            of {{ $projects->total() }} results
        </p>

        <!-- RIGHT PAGINATION -->
        <div class="flex items-center gap-1">

            {{-- Previous --}}
            @if ($projects->onFirstPage())
                <span class="w-8 h-8 flex items-center justify-center
                             border rounded-md text-gray-400">
                    ‹
                </span>
            @else
                <button
                    wire:click="previousPage"
                    class="w-8 h-8 flex items-center justify-center
                           border rounded-md text-gray-600 hover:bg-gray-50">
                    ‹
                </button>
            @endif

            {{-- Smart Page Range --}}
            @php
                $start = max(1, $projects->currentPage() - 1);
                $end   = min($projects->lastPage(), $projects->currentPage() + 1);
            @endphp

            {{-- First --}}
            @if ($start > 1)
                <button
                    wire:click="gotoPage(1)"
                    class="w-8 h-8 flex items-center justify-center
                           border rounded-md text-gray-600 hover:bg-gray-50">
                    1
                </button>

                @if ($start > 2)
                    <span class="px-2 text-gray-400">…</span>
                @endif
            @endif

            {{-- Middle --}}
            @for ($page = $start; $page <= $end; $page++)
                @if ($page == $projects->currentPage())
                    <span
                        class="w-8 h-8 flex items-center justify-center
                               rounded-md border
                               bg-[#f38121]/10 text-[#f38121] font-medium">
                        {{ $page }}
                    </span>
                @else
                    <button
                        wire:click="gotoPage({{ $page }})"
                        class="w-8 h-8 flex items-center justify-center
                               border rounded-md text-gray-600 hover:bg-gray-50">
                        {{ $page }}
                    </button>
                @endif
            @endfor

            {{-- Last --}}
            @if ($end < $projects->lastPage())
                @if ($end < $projects->lastPage() - 1)
                    <span class="px-2 text-gray-400">…</span>
                @endif

                <button
                    wire:click="gotoPage({{ $projects->lastPage() }})"
                    class="w-8 h-8 flex items-center justify-center
                           border rounded-md text-gray-600 hover:bg-gray-50">
                    {{ $projects->lastPage() }}
                </button>
            @endif

            {{-- Next --}}
            @if ($projects->hasMorePages())
                <button
                    wire:click="nextPage"
                    class="w-8 h-8 flex items-center justify-center
                           border rounded-md text-gray-600 hover:bg-gray-50">
                    ›
                </button>
            @else
                <span class="w-8 h-8 flex items-center justify-center
                             border rounded-md text-gray-400">
                    ›
                </span>
            @endif

        </div>
    </div>
@endif


    <!-- ================= DELETE MODAL ================= -->
    @if ($deleteId)
        <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div class="bg-white rounded-[22px] p-6 w-[360px] shadow-xl">
                <h3 class="text-lg font-semibold mb-2">
                    Delete Project?
                </h3>
                <p class="text-sm text-gray-500 mb-6">
                    This action cannot be undone.
                </p>

                <div class="flex justify-end gap-3">
                    <button wire:click="$set('deleteId', null)"
                            class="px-4 py-2 text-sm rounded-xl border">
                        Cancel
                    </button>

                    <button wire:click="deleteProject"
                            class="px-4 py-2 text-sm rounded-xl
                                   bg-red-600 text-white">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    @endif

</div>
