@extends('admin.layouts.app')
@section('title', __('admin.menu_banners'))
@section('heading', __('admin.menu_banners'))

@section('content')
    <x-admin.filter-scope>
    @can(\App\Models\Permission::BANNERS_CREATE)
        <x-admin.page-header :title="__('admin.menu_banners')" :create-route="route('admin.banners.create')" :show-filter="true" />
    @else
        <x-admin.page-header :title="__('admin.menu_banners')" :show-filter="true" />
    @endcan

    <x-admin.filter-panel>
        <form method="get" class="admin-filter-form grid gap-3 sm:grid-cols-3">
            <div>
                <label class="admin-label">{{ __('admin.banner_position') }}</label>
                <select name="position" class="admin-input">
                    <option value="">{{ __('admin.all') }}</option>
                    @foreach ($positions as $position)
                        <option value="{{ $position }}" @selected(request('position') === $position)>
                            {{ __("admin.banner_position_{$position}") }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="sm:col-span-2 flex items-end gap-2">
                <button type="submit" class="admin-btn-primary">{{ __('admin.search') }}</button>
                <a href="{{ route('admin.banners.index') }}" class="admin-btn-muted">{{ __('admin.cancel') }}</a>
            </div>
        </form>
    </x-admin.filter-panel>

    <div class="admin-card">
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ __('admin.image') }}</th>
                    <th>{{ __('admin.title') }}</th>
                    <th>{{ __('admin.banner_position') }}</th>
                    <th>{{ __('admin.sort_order') }}</th>
                    <th>{{ __('admin.status') }}</th>
                    <th>{{ __('admin.banner_schedule') }}</th>
                    <th>{{ __('admin.updated_at') }}</th>
                    <th class="admin-table-actions">{{ __('admin.actions') }}</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($banners as $banner)
                    @php
                        $positionClass = match ($banner->position) {
                            'home_top' => ' text-indigo-700',
                            'home_middle' => 'text-sky-700',
                            'home_bottom' => ' text-violet-700',
                            default => 'text-slate-700',
                        };
                    @endphp
                    <tr>
                        <td>{{ $banner->id }}</td>
                        <td>
                            <img src="{{ $banner->imageUrl() }}" alt="{{ $banner->resolvedAltText() }}"
                                 class="h-12 w-20 rounded-lg object-cover ring-1 " loading="lazy" />
                        </td>
                        <td class="min-w-[180px]">
                            <p class="font-semibold text-slate-800">{{ $banner->localizedTitle() }}</p>
                            <p class="text-xs text-slate-500">{{ locale_field($banner, 'alt_text') ?: __('admin.banner_alt_fallback') }}</p>
                        </td>
                        <td>
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-[11px] font-bold {{ $positionClass }}">
                                {{ __("admin.banner_position_{$banner->position}") }}
                            </span>
                        </td>
                        <td>{{ $banner->sort_order }}</td>
                        <td><x-admin.status-badge :active="$banner->is_active" /></td>
                        <td>
                            <div class="text-xs text-slate-600">
                                <p>{{ $banner->starts_at?->format('Y-m-d H:i') ?? '—' }}</p>
                                <p>{{ $banner->ends_at?->format('Y-m-d H:i') ?? '—' }}</p>
                            </div>
                        </td>
                        <td>{{ $banner->updated_at?->diffForHumans() }}</td>
                        <td class="admin-table-actions">
                            <x-admin.table-actions
                                :edit-href="auth()->user()->can(\App\Models\Permission::BANNERS_EDIT) ? route('admin.banners.edit', $banner) : null"
                                :delete-action="auth()->user()->can(\App\Models\Permission::BANNERS_DELETE) ? route('admin.banners.destroy', $banner) : null"
                            />
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="py-10 text-center text-slate-500">
                            {{ __('admin.banner_empty') }}
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $banners->links() }}</div>
    </div>
    </x-admin.filter-scope>
@endsection