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

@section('content')
<div class="news-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">News</span>
    </div>

    <form method="GET" action="{{ route('admin.news.index') }}" class="filter-bar">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search news...">
        <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 News</h3>
        <a href="{{ route('admin.news.create') }}" class="create-news-btn">+ Create News</a>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Media</th>
                    <th>Title</th>
                    <th>League</th>
                    <th>Status</th>
                    <th>Published</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($news as $item)
                    <tr>
                        <td>
                            @if ($item->media_type == \App\Models\News::MEDIA_IMAGE && $item->mediaUrl())
                                <img src="{{ $item->mediaUrl() }}" alt="" class="post-thumb">
                            @elseif ($item->media_type == \App\Models\News::MEDIA_VIDEO)
                                <div class="post-thumb-video">▶ Video</div>
                            @else
                                <div class="post-thumb-video">—</div>
                            @endif
                        </td>
                        <td>
                            <div class="post-title">{{ $item->title }}</div>
                            <div style="color:#888;font-size:12px;">{{ \Illuminate\Support\Str::limit($item->short_description, 60) }}</div>
                        </td>
                        <td>{{ $item->league->name ?? '—' }}</td>
                        <td>
                            <span class="badge {{ $item->status == \App\Models\News::STATUS_ACTIVE ? 'badge-active' : 'badge-inactive' }}">
                                {{ \App\Models\News::STATUS_LABELS[$item->status] ?? 'Unknown' }}
                            </span>
                        </td>
                        <td>{{ $item->published_at ? $item->published_at->format('d M Y, H:i') : '—' }}</td>
                        <td>
                            <a href="{{ route('admin.news.edit', $item->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_news_edit_{{ $item->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_news_edit_{{ $item->id }}">
                                            <rect width="28" height="28" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <form action="{{ route('admin.news.destroy', $item->id) }}" method="POST" class="news-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_news_delete_{{ $item->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_news_delete_{{ $item->id }}">
                                                <rect width="28" height="28" fill="white"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="empty-row">No news found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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

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