@extends('admin.master')

@section('content')
<div class="px-3 py-4">

    {{-- Header --}}
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-[20px] font-bold text-slate-800">
                <i class="fa-solid fa-images mr-2 text-[#156994]"></i>
                Admin Banners
            </h1>
            <p class="mt-1 text-[13px] text-slate-500">
                Manage product banner list
            </p>
        </div>

        <a href="{{ route('admin.banners.create') }}"
           class="inline-flex items-center justify-center rounded-lg bg-[#2f91c8] px-4 py-2 text-[13px] font-bold text-white shadow-sm transition hover:bg-[#2179aa]">
            <i class="fa-solid fa-plus mr-2"></i>
            Add Banner
        </a>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
        <div class="mb-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-[13px] font-semibold text-green-700">
            <i class="fa-solid fa-circle-check mr-2"></i>
            {{ session('success') }}
        </div>
    @endif

    {{-- Table Card --}}
    <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">

        <div class="overflow-x-auto">
            <table class="min-w-full border-collapse text-[12px] text-slate-900">

                <thead>
                    <tr class="bg-[#156994] text-white">
                        <th class="border-r border-[#d8e0e7] px-2 py-3 text-left font-bold">
                            #
                        </th>

                        <th class="border-r border-[#d8e0e7] px-2 py-3 text-left font-bold">
                            <i class="fa-solid fa-image mr-1"></i>
                            Image
                        </th>

                        <th class="border-r border-[#d8e0e7] px-2 py-3 text-left font-bold">
                            <i class="fa-solid fa-box mr-1"></i>
                            Product
                        </th>

                        <th class="border-r border-[#d8e0e7] px-2 py-3 text-left font-bold">
                            <i class="fa-solid fa-toggle-on mr-1"></i>
                            Status
                        </th>

                        <th class="px-2 py-3 text-center font-bold">
                            <i class="fa-solid fa-gear mr-1"></i>
                            Action
                        </th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($banners as $key => $banner)
                        <tr class="border-b border-slate-200 bg-slate-100 transition hover:bg-slate-200">
                            <td class="border-r border-slate-200 px-2 py-3 align-middle">
                                {{ $banners->firstItem() + $key }}
                            </td>

                            <td class="border-r border-slate-200 px-2 py-3 align-middle">
                                <img src="{{ asset('storage/' . $banner->image) }}"
                                     alt="Banner"
                                     class="h-[52px] w-[115px] rounded-md border border-slate-300 object-cover">
                            </td>

                            <td class="border-r border-slate-200 px-2 py-3 align-middle font-medium">
                                {{ $banner->product->name ?? 'No Product Selected' }}
                            </td>

                            <td class="border-r border-slate-200 px-2 py-3 align-middle">
                                @if($banner->status === 'active')
                                    <span class="inline-flex items-center rounded-full border border-green-300 bg-green-50 px-3 py-1 text-[11px] font-bold text-green-700">
                                        Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center rounded-full border border-orange-300 bg-orange-50 px-3 py-1 text-[11px] font-bold text-orange-600">
                                        Inactive
                                    </span>
                                @endif
                            </td>

                            <td class="px-2 py-3 text-center align-middle">
                                <div class="flex items-center justify-center gap-2">

                                    <a href="{{ route('admin.banners.edit', $banner->id) }}"
                                       class="inline-flex items-center rounded-lg bg-[#2f91c8] px-3 py-2 text-[12px] font-bold text-white transition hover:bg-[#2179aa]">
                                        <i class="fa-solid fa-pen-to-square mr-1"></i>
                                        Edit
                                    </a>

                                    <form action="{{ route('admin.banners.destroy', $banner->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Are you sure you want to delete this banner?')">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                class="inline-flex items-center rounded-lg bg-red-500 px-3 py-2 text-[12px] font-bold text-white transition hover:bg-red-600">
                                            <i class="fa-solid fa-trash mr-1"></i>
                                            Delete
                                        </button>
                                    </form>

                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr class="bg-slate-100">
                            <td colspan="5" class="px-3 py-8 text-center text-[13px] font-semibold text-slate-500">
                                <i class="fa-solid fa-folder-open mr-2"></i>
                                No banner found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

        {{-- Pagination --}}
        <div class="border-t border-slate-200 bg-slate-50 px-3 py-3 text-[12px]">
            {{ $banners->links() }}
        </div>
    </div>

</div>
@endsection