@extends('layouts.app')
@section('title', 'Applications Report')

@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>
    <a href="{{ route('admin.reports.profiles') }}">Reports</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>Applications</span>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">Applications</h1>
        <p class="page-header-sub">Candidate applications across all posts.</p>
    </div>
</div>

@include('partials._report-tabs')

<section class="stats-grid stagger">
    <div class="stat-card">
        <div class="stat-gradient-bg"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg></div>
            <span class="stat-trend trend-up">total</span>
        </div>
        <div class="stat-label">Total applications</div>
        <div class="stat-value">{{ number_format($stats['total']) }}</div>
        <div class="stat-footer"><span class="stat-foot-text">All submissions to date</span></div>
    </div>

    <div class="stat-card warning">
        <div class="stat-gradient-bg stat-grad-warning"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
            <span class="stat-trend trend-live"><span class="pulse-dot"></span>QUEUED</span>
        </div>
        <div class="stat-label">Pending</div>
        <div class="stat-value">{{ number_format($stats['pending']) }}</div>
        <div class="stat-footer">
            @php $p = $stats['total'] > 0 ? round(($stats['pending'] / $stats['total']) * 100) : 0; @endphp
            <div class="stat-progress"><div class="stat-progress-bar" style="width:{{ $p }}%;"></div></div>
            <span class="stat-foot-text">{{ $p }}%</span>
        </div>
    </div>

    <div class="stat-card success">
        <div class="stat-gradient-bg stat-grad-success"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg></div>
            <span class="stat-trend trend-up">approved</span>
        </div>
        <div class="stat-label">Approved</div>
        <div class="stat-value">{{ number_format($stats['approved']) }}</div>
        <div class="stat-footer">
            @php $a = $stats['total'] > 0 ? round(($stats['approved'] / $stats['total']) * 100) : 0; @endphp
            <div class="stat-progress"><div class="stat-progress-bar" style="width:{{ $a }}%; background: var(--grad-success);"></div></div>
            <span class="stat-foot-text">{{ $a }}%</span>
        </div>
    </div>

    <div class="stat-card danger">
        <div class="stat-gradient-bg stat-grad-danger"></div>
        <div class="stat-header">
            <div class="stat-icon stat-icon-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg></div>
            <span class="stat-trend trend-down">{{ $stats['rejected'] }}</span>
        </div>
        <div class="stat-label">Rejected</div>
        <div class="stat-value">{{ number_format($stats['rejected']) }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Ineligible applications</span></div>
    </div>
</section>

@include('partials._report-filter', ['exportType' => 'applications'])

@include('partials._report-cap-banner')

<div class="chart-card">
    <div class="card-header">
        <div>
            <div class="card-title">
                <div class="card-title-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg></div>
                All applications
            </div>
            <div class="card-subtitle">{{ $applications->count() }} record(s)</div>
        </div>
    </div>

    @if($applications->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div>
            <div class="empty-state-title">No applications yet</div>
            <div class="empty-state-text">Applications will appear here as candidates apply to posts.</div>
        </div>
    @else
        <div style="overflow-x:auto;">
            <table id="reportTable" class="data-table" style="width:100%;">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Candidate</th>
                        <th>Post</th>
                        <th>Roll #</th>
                        <th>Status</th>
                        <th>Applied</th>
                        <th style="width:60px;">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($applications as $app)
                        @php
                            $status = strtolower($app->status_label ?? '');
                            $pillTone = 's-neutral';
                            if (str_contains($status, 'approv')) $pillTone = 's-success';
                            elseif (str_contains($status, 'reject')) $pillTone = 's-danger';
                            elseif (str_contains($status, 'pend')) $pillTone = 's-warning';
                        @endphp
                        <tr>
                            <td class="cell-mono">{{ $loop->iteration }}</td>
                            <td>
                                <div class="cell-strong">{{ $app->user?->name }}</div>
                                <div class="cell-mono">{{ $app->user?->email }}</div>
                            </td>
                            <td>
                                <span class="status-pill s-neutral">{{ $app->post?->code }}</span>
                                <div class="cell-mono" style="margin-top:4px;">{{ Str::limit($app->post?->title, 36) }}</div>
                            </td>
                            <td>
                                @if($app->roll_number)
                                    <span class="status-pill s-info">{{ $app->roll_number }}</span>
                                @else
                                    <span class="cell-mono">—</span>
                                @endif
                            </td>
                            <td><span class="status-pill {{ $pillTone }}">{{ $app->status_label }}</span></td>
                            <td class="cell-time"><strong>{{ $app->created_at->format('d M Y') }}</strong></td>
                            <td>
                                <a href="{{ route('admin.applications.show', $app) }}" class="ds-icon-link" title="View application" aria-label="View application">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
$(function () {
    if ($('#reportTable tbody tr').length) {
        $('#reportTable').DataTable({
            responsive: true, pageLength: 25, order: [[5, 'desc']],
            dom: '<"row"<"col-sm-6"B><"col-sm-6 text-end"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
            buttons: [
                { extend: 'excelHtml5', text: '<i class="bi bi-file-earmark-excel"></i> Excel', className: 'btn btn-success', exportOptions: { columns: [0,1,2,3,4,5] }, title: 'Applications Report — FDRS' },
                { extend: 'print', text: '<i class="bi bi-printer"></i> Print', className: 'btn btn-secondary', exportOptions: { columns: [0,1,2,3,4,5] }, autoPrint: false }
            ],
            language: { search: '', searchPlaceholder: 'Search applications…', lengthMenu: 'Show _MENU_', info: 'Showing _START_–_END_ of _TOTAL_', paginate: { first: '«', last: '»', next: '›', previous: '‹' } },
            columnDefs: [{ orderable: false, targets: [6] }]
        });
    }
});
</script>
@endpush