@extends('layouts.admin')

@section('content')
    <section class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3 mb-4">
        <div>
            <p class="small text-success fw-bold text-uppercase mb-2" style="letter-spacing: .08em;"><span data-admin-en="Media" data-admin-as="মিডিয়া">Media</span></p>
            <h1 class="h3 fw-bold admin-text mb-1"><span data-admin-en="Featured Videos" data-admin-as="বিশেষ ভিডিঅ'সমূহ">Featured Videos</span></h1>
            <p class="small admin-muted mb-0"><span data-admin-en="Manage YouTube videos used across the frontend experience." data-admin-as="ফ্ৰণ্টএণ্ডত ব্যৱহৃত YouTube ভিডিঅ'সমূহ পৰিচালনা কৰক।">Manage YouTube videos used across the frontend experience.</span></p>
        </div>
        <a class="btn btn-success d-inline-flex align-items-center gap-2 rounded-4 px-3 py-2 fw-semibold shadow-sm" href="{{ route('admin.featured-videos.create') }}">
            <i data-lucide="plus-circle" width="16" height="16"></i>
            <span data-admin-en="Add Video" data-admin-as="ভিডিঅ' যোগ কৰক">Add Video</span>
        </a>
    </section>

    @if (session('success'))
        <div class="alert alert-success rounded-4">{{ session('success') }}</div>
    @endif

    <section class="glass-card rounded-4 p-3 p-lg-4 mb-4">
        <form class="row g-3 align-items-end" method="GET" action="{{ route('admin.featured-videos.index') }}">
            <div class="col-12 col-lg-6">
                <label class="form-label small fw-semibold admin-muted"><span data-admin-en="Search" data-admin-as="সন্ধান">Search</span></label>
                <input class="form-control admin-input rounded-4" type="search" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search title or YouTube URL" data-admin-placeholder-en="Search title or YouTube URL" data-admin-placeholder-as="শিৰোনাম বা YouTube URL সন্ধান কৰক">
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <label class="form-label small fw-semibold admin-muted"><span data-admin-en="Status" data-admin-as="স্থিতি">Status</span></label>
                <select class="form-select admin-input rounded-4" name="status">
                    <option value="" data-admin-en="All statuses" data-admin-as="সকলো স্থিতি">All statuses</option>
                    @foreach ($selectOptions['statuses'] ?? [] as $value => $label)
                        @php
                            $statusAs = ['draft' => 'খচৰা', 'published' => 'প্ৰকাশিত', 'archived' => 'আৰ্কাইভ কৰা'][$value] ?? $label;
                        @endphp
                        <option value="{{ $value }}" @selected(($filters['status'] ?? '') === $value) data-admin-en="{{ $label }}" data-admin-as="{{ $statusAs }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-6 col-lg-3 d-flex gap-2">
                <button class="btn btn-success rounded-4 px-4 fw-semibold" type="submit"><span data-admin-en="Filter" data-admin-as="ফিল্টাৰ">Filter</span></button>
                <a class="btn glass-card admin-text rounded-4 px-4" href="{{ route('admin.featured-videos.index') }}"><span data-admin-en="Reset" data-admin-as="ৰিছেট">Reset</span></a>
            </div>
        </form>
    </section>

    <section class="glass-card rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 admin-crud-table">
                <thead>
                    <tr>
                        <th class="small text-uppercase admin-muted-strong"><span data-admin-en="Title" data-admin-as="শিৰোনাম">Title</span></th>
                        <th class="small text-uppercase admin-muted-strong"><span data-admin-en="Status" data-admin-as="স্থিতি">Status</span></th>
                        <th class="small text-uppercase admin-muted-strong"><span data-admin-en="Featured" data-admin-as="বিশেষ">Featured</span></th>
                        <th class="small text-uppercase admin-muted-strong"><span data-admin-en="Order" data-admin-as="ক্ৰম">Order</span></th>
                        <th class="small text-uppercase admin-muted-strong text-end"><span data-admin-en="Actions" data-admin-as="কাৰ্য্য">Actions</span></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="admin-text">
                                @php
                                    $titleEn = $record->title_en ?: '-';
                                    $titleAs = $record->title_as ?: $titleEn;
                                @endphp
                                <strong data-admin-en="{{ $titleEn }}" data-admin-as="{{ $titleAs }}">{{ $titleEn }}</strong>
                                @if ($record->title_as)
                                    <div class="small admin-muted">{{ $record->title_as }}</div>
                                @endif
                                <div class="small admin-muted">{{ $record->youtube_url }}</div>
                            </td>
                            <td>
                                @php
                                    $statusEn = str($record->status ?? '-')->replace('_', ' ')->title()->toString();
                                    $statusAs = ['draft' => 'খচৰা', 'published' => 'প্ৰকাশিত', 'archived' => 'আৰ্কাইভ কৰা'][$record->status ?? ''] ?? $statusEn;
                                @endphp
                                <span class="admin-badge text-success" style="background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .24);" data-admin-en="{{ $statusEn }}" data-admin-as="{{ $statusAs }}">{{ $statusEn }}</span>
                            </td>
                            <td class="admin-text"><span data-admin-en="{{ $record->is_featured ? 'Yes' : 'No' }}" data-admin-as="{{ $record->is_featured ? 'হয়' : 'নহয়' }}">{{ $record->is_featured ? 'Yes' : 'No' }}</span></td>
                            <td class="admin-text">{{ $record->featured_order }}</td>
                            <td class="text-end">
                                <a class="btn btn-sm glass-card admin-text rounded-3" href="{{ route('admin.featured-videos.show', $record) }}" title="View" aria-label="View">
                                    <i data-lucide="eye" width="15" height="15"></i>
                                </a>
                                <a class="btn btn-sm glass-card admin-text rounded-3" href="{{ route('admin.featured-videos.edit', $record->id) }}" title="Edit" aria-label="Edit">
                                    <i data-lucide="pencil" width="15" height="15"></i>
                                </a>
                                <form class="d-inline" method="POST" action="{{ route('admin.featured-videos.destroy', $record) }}" onsubmit="return confirm('Delete this video?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger rounded-3" type="submit" title="Delete" aria-label="Delete">
                                        <i data-lucide="trash-2" width="15" height="15"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center admin-muted py-5" colspan="5"><span data-admin-en="No featured videos found." data-admin-as="বিশেষ ভিডিঅ' পোৱা নগ'ল।">No featured videos found.</span></td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="p-3 border-top" style="border-color: var(--admin-border) !important;">
            {{ $records->links() }}
        </div>
    </section>
@endsection