@extends('layouts.admin.app')
@section('title', 'Banners')
@push('style')
<style>
    .banner-index .filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 20px 0;
        max-width: 280px;
    }
    .banner-index .filter-bar select {
        width: 100%;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        color: #fff;
        font-size: 13px;
    }
    .banner-index .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .banner-index .section-head h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0; }
    .banner-index .create-btn {
        background: #22c55e;
        color: #fff;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }
    .banner-index table { width: 100%; border-collapse: collapse; }
    .banner-index thead th {
        text-align: left;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .banner-index tbody td {
        color: #ddd;
        font-size: 13px;
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }
    .banner-index .banner-thumb {
        width: 120px;
        height: 56px;
        border-radius: 8px;
        object-fit: cover;
        background: #222;
    }
    .banner-index .banner-thumb-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
        font-size: 11px;
        width: 120px;
        height: 56px;
        border-radius: 8px;
        background: #222;
    }
    .banner-index .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }
    .banner-index .badge-active { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .banner-index .badge-inactive { background: rgba(248, 113, 113, 0.15); color: #f87171; }
    .banner-index .action-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        color: #aaa;
        text-decoration: none;
        font-size: 13px;
    }
    .banner-index .action-btn.delete { color: #f87171; }
    .banner-index .empty-row { text-align: center; color: #888; padding: 32px; }
    .banner-index .pagination-wrap { margin-top: 18px; }
    .banner-index .pagination-wrap a, .banner-index .pagination-wrap span { color: #fff; }
</style>
@endpush

@section('content')
<div class="banner-index content_area users_list">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <span class="active">Banners</span>
    </div>

    <form method="GET" action="{{ route('admin.banners.index') }}" class="filter-bar">
        <select name="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="1" @selected(request('status') === '1')>Active</option>
            <option value="0" @selected(request('status') === '0')>Inactive</option>
        </select>
    </form>

    <div class="section-head">
        <h3>All Banners</h3>
        <a href="{{ route('admin.banners.create') }}" class="create-btn">+ Add Banner</a>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Banner</th>
                    <th>Display Order</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($banners as $banner)
                    <tr>
                        <td>
                            @if ($banner->bannerUrl())
                                <img src="{{ $banner->bannerUrl() }}" alt="" class="banner-thumb">
                            @else
                                <div class="banner-thumb-empty">No image</div>
                            @endif
                        </td>
                        <td>{{ $banner->display_order }}</td>
                        <td>
                            <span class="badge {{ $banner->is_active == \App\Models\Banner::STATUS_ACTIVE ? 'badge-active' : 'badge-inactive' }}">
                                {{ \App\Models\Banner::STATUS_LABELS[$banner->is_active] ?? 'Unknown' }}
                            </span>
                        </td>
                        <td>{{ $banner->created_at?->format('d M Y, H:i') }}</td>
                        <td>
                            <a href="{{ route('admin.banners.edit', $banner->id) }}" title="Edit">
                                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip_banner_edit_{{ $banner->id }})">
                                        <path d="M14.6665 20H19.9998" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M20.1161 10.5442C20.8496 9.81088 20.8498 8.62002 20.1165 7.88652C19.3831 7.15303 18.1923 7.15288 17.4588 7.88619L8.56146 16.7855C8.40667 16.9399 8.2922 17.1299 8.22813 17.3389L7.34746 20.2402C7.31236 20.3577 7.34457 20.4849 7.43132 20.5715C7.51808 20.6581 7.64539 20.6902 7.76279 20.6549L10.6648 19.7749C10.8736 19.7114 11.0636 19.5976 11.2181 19.4435L20.1161 10.5442" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip_banner_edit_{{ $banner->id }}">
                                            <rect width="28" height="28" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <form action="{{ route('admin.banners.destroy', $banner->id) }}" method="POST" class="banner-delete-form" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" title="Delete" style="background:none;border:none;padding:0;cursor:pointer;line-height:0;">
                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip_banner_delete_{{ $banner->id }})">
                                            <path d="M12.6665 13.3359V17.3359" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M15.3335 13.3359V17.3359" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M18.6668 10V19.3333C18.6668 20.0692 18.0694 20.6667 17.3335 20.6667H10.6668C9.93094 20.6667 9.3335 20.0692 9.3335 19.3333V10" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M8 10H20" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path d="M11.3335 10.0026V8.66927C11.3335 7.93338 11.9309 7.33594 12.6668 7.33594H15.3335C16.0694 7.33594 16.6668 7.93338 16.6668 8.66927V10.0026" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                            <clipPath id="clip_banner_delete_{{ $banner->id }}">
                                                <rect width="28" height="28" fill="white"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="empty-row">No banners found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="pagination-wrap">
        {{ $banners->links() }}
    </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).on('submit', '.banner-delete-form', function (e) {
        if (!confirm('Delete this banner?')) {
            e.preventDefault();
        }
    });
</script>
@endpush