@extends('layouts.app')
@section('title', 'Merit List')

@section('breadcrumb')
    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <span>Merit list</span>
@endsection

@section('content')

<section class="hero-banner animate-fade-up">
    <div class="hero-blob hero-blob-1"></div>
    <div class="hero-blob hero-blob-2"></div>
    <div class="hero-grid-overlay"></div>
    <div class="hero-content">
        <div class="hero-meta">
            <span class="hero-chip">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9z"/></svg>
                Official merit rankings
            </span>
            <span class="hero-chip hero-chip-live"><span class="live-dot"></span>Auto-updated</span>
        </div>
        <h1 class="hero-title">Merit <span class="gradient-text">list</span></h1>
        <p class="hero-subtitle">Select a post to view the ranked list of completed exam attempts.</p>

        <div class="merit-search-wrap">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input type="text" id="meritPostSearch" placeholder="Search posts by title or code…" aria-label="Search posts">
        </div>
    </div>
    <div class="hero-illustration">
        <svg class="hero-svg animate-float" viewBox="0 0 220 180">
            <defs>
                <linearGradient id="meritG1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FBBF24"/><stop offset="100%" stop-color="#F59E0B"/></linearGradient>
                <radialGradient id="meritGlow"><stop offset="0%" stop-color="rgba(251,191,36,.4)"/><stop offset="100%" stop-color="rgba(251,191,36,0)"/></radialGradient>
            </defs>
            <circle cx="110" cy="90" r="75" fill="url(#meritGlow)"/>
            <g transform="translate(110 90)">
                <path d="M-30 -10 L-16 -28 L16 -28 L30 -10 L0 28 Z" fill="url(#meritG1)"/>
                <path d="M-30 -10 L-16 -28 L16 -28 L30 -10 L0 28 Z" fill="none" stroke="white" stroke-width="2" opacity=".3"/>
                <text x="0" y="5" text-anchor="middle" fill="white" font-size="20" font-weight="700" font-family="Space Grotesk">1</text>
            </g>
            <circle cx="60" cy="130" r="5" fill="#22D3EE" opacity=".8"/>
            <circle cx="160" cy="50" r="4" fill="#A78BFA" opacity=".8"/>
            <circle cx="45" cy="55" r="3" fill="#F472B6" opacity=".7"/>
        </svg>
    </div>
</section>

@if($posts->isEmpty())
    <div class="chart-card">
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9z"/></svg>
            </div>
            <div class="empty-state-title">No posts available</div>
            <div class="empty-state-text">Merit lists will appear once posts are created and exams are completed.</div>
        </div>
    </div>
@else
    <div id="meritGrid" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px;">
        @foreach($posts as $post)
            <article class="merit-post-card" data-search="{{ strtolower($post->title . ' ' . $post->code) }}">
                <div class="merit-post-card-head">
                    <span class="status-pill s-neutral">{{ $post->code }}</span>
                    <span class="status-pill
                        @if(strtolower($post->status_label ?? '') === 'active') s-success @else s-neutral @endif">{{ $post->status_label }}</span>
                </div>

                <div>
                    <h2 class="merit-post-card-title">{{ $post->title }}</h2>
                    <div class="merit-post-card-meta" style="margin-top:4px;">
                        BPS-{{ $post->bps }} · {{ number_format($post->total_seats) }} seats
                    </div>
                </div>

                <div class="merit-post-card-footer">
                    <span class="status-pill s-info">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="11" height="11" style="margin-right:4px;"><path d="M6 3h12l4 6-10 13L2 9z"/></svg>
                        {{ $post->completed_exams_count }} ranked
                    </span>
                    @if($post->completed_exams_count > 0)
                        <a href="{{ route('admin.merit.post', $post) }}" class="btn btn-primary btn-sm">
                            View
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </a>
                    @else
                        <span class="cell-mono">No exams yet</span>
                    @endif
                </div>
            </article>
        @endforeach
    </div>
@endif

@endsection

@push('scripts')
<script>
$(function () {
    $('#meritPostSearch').on('input', function () {
        var q = $(this).val().toLowerCase().trim();
        $('#meritGrid .merit-post-card').each(function () {
            var hay = $(this).data('search') || '';
            $(this).toggle(!q || hay.indexOf(q) !== -1);
        });
    });
});
</script>
@endpush