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

@push('styles')
<style>
    .stat-card.is-active-filter { box-shadow: 0 0 0 2px var(--primary-500), var(--shadow-lg); transform: translateY(-2px); }
    /* Bulk-action toolbar — slides in from the bottom when ≥1 row selected. */
    .bulk-toolbar {
        position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
        display: flex; align-items: center; gap: 14px;
        padding: 12px 20px; background: var(--bg-surface); border: 1px solid var(--border);
        border-radius: 999px; box-shadow: var(--shadow-xl);
        z-index: 50; transition: transform .25s ease;
    }
    .bulk-toolbar.is-active { transform: translateX(-50%) translateY(0); }
    .bulk-toolbar-count { font-weight: 700; color: var(--primary-700); }
    .bulk-toolbar-count em { font-style: normal; color: var(--text-primary); margin-right: 4px; }
    .row-select { cursor: pointer; }
</style>
@endpush

@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>Applications</span>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">Applications</h1>
        <p class="page-header-sub">Review, approve, and reject candidate applications.</p>
    </div>
    <div class="page-header-actions">
        @if($stats['pending'] > 0)
            <span class="status-pill s-warning">{{ $stats['pending'] }} pending review</span>
        @endif
    </div>
</div>

<section class="stats-grid stagger">
    <a href="{{ route('admin.applications.index') }}" class="stat-card stat-card-clickable {{ !$statusFilter ? 'is-active-filter' : '' }}" style="text-decoration:none;">
        <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">all</span>
        </div>
        <div class="stat-label">Total applications</div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">All submissions</span></div>
    </a>
    <a href="{{ route('admin.applications.index', ['status' => 'pending']) }}" class="stat-card stat-card-clickable warning {{ $statusFilter === 'pending' ? 'is-active-filter' : '' }}" style="text-decoration:none;">
        <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">{{ $stats['pending'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Awaiting decision</span></div>
    </a>
    <a href="{{ route('admin.applications.index', ['status' => 'approved']) }}" class="stat-card stat-card-clickable success {{ $statusFilter === 'approved' ? 'is-active-filter' : '' }}" style="text-decoration:none;">
        <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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><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">{{ $stats['approved'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Eligible for exam</span></div>
    </a>
    <a href="{{ route('admin.applications.index', ['status' => 'rejected']) }}" class="stat-card stat-card-clickable danger {{ $statusFilter === 'rejected' ? 'is-active-filter' : '' }}" style="text-decoration:none;">
        <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">{{ $stats['rejected'] }}</div>
        <div class="stat-footer"><span class="stat-foot-text">Ineligible submissions</span></div>
    </a>
</section>

@include('partials._status-proportion', ['stats' => $stats, 'title' => 'Application pipeline'])

<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>
                @if($statusFilter) {{ ucfirst($statusFilter) }} applications @else All applications @endif
            </div>
            <div class="card-subtitle">
                {{ number_format($applications->total()) }} record(s) · showing {{ $applications->firstItem() ?? 0 }}–{{ $applications->lastItem() ?? 0 }}
                @if($statusFilter) · filtered by <strong>{{ $statusFilter }}</strong> @endif
            </div>
        </div>
        @if($statusFilter)
            <div>
                <a href="{{ route('admin.applications.index') }}" class="btn btn-ghost btn-sm">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    Clear filter
                </a>
            </div>
        @endif
    </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="applicationsTable" class="data-table" style="width:100%;">
                <thead>
                    <tr>
                        <th style="width:36px;">
                            <input type="checkbox" id="bulkSelectAll" class="row-select" aria-label="Select all pending applications on this page" title="Select all pending">
                        </th>
                        <th style="width:40px;">#</th>
                        <th>Candidate</th>
                        <th>Post</th>
                        <th>Roll #</th>
                        <th>Status</th>
                        <th>Applied</th>
                        <th style="width:140px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($applications as $app)
                        @php
                            $status = strtolower($app->status_label ?? $app->status ?? '');
                            $pillTone = str_contains($status, 'approv') ? 's-success'
                                      : (str_contains($status, 'reject') ? 's-danger' : 's-warning');
                        @endphp
                        <tr>
                            <td>
                                @if($app->isPending())
                                    <input type="checkbox" class="row-select bulk-select-row" value="{{ $app->id }}" aria-label="Select application #{{ $app->id }}">
                                @endif
                            </td>
                            <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 ?? ucfirst($app->status) }}</span></td>
                            <td class="cell-time"><strong>{{ $app->created_at->format('d M Y') }}</strong></td>
                            <td>
                                <div style="display:flex; gap:4px;">
                                    <a href="{{ route('admin.applications.show', $app) }}" class="ds-icon-link" title="View" 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>
                                    @if($app->isPending())
                                        <form action="{{ route('admin.applications.approve', $app) }}" method="POST" style="display:inline;" class="approve-form">
                                            @csrf
                                            <button type="submit" class="ds-icon-link" title="Approve" aria-label="Approve application" style="color:var(--success-600); border-color:rgba(52,211,153,.35);">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
                                            </button>
                                        </form>
                                        <button type="button" class="ds-icon-link btn-reject-trigger" title="Reject" aria-label="Reject application"
                                                style="color:var(--danger-500); border-color:rgba(248,113,113,.35);"
                                                data-id="{{ $app->id }}"
                                                data-name="{{ $app->user?->name }}"
                                                data-post="{{ $app->post?->title }}"
                                                data-bs-toggle="modal" data-bs-target="#rejectModal">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
                                        </button>
                                    @else
                                        <span class="ds-icon-link" title="{{ $app->status_label }}" aria-label="{{ $app->status_label }} — no further action" style="color:var(--text-muted); cursor:not-allowed; opacity:.45;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"/></svg>
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($applications->hasPages())
            <div style="padding: 14px 16px; border-top: 1px solid var(--border);">
                {{ $applications->links() }}
            </div>
        @endif
    @endif
</div>

{{-- Hidden bulk-approve form — populated by JS with the selected ids --}}
<form id="bulkApproveForm" action="{{ route('admin.applications.bulk-approve') }}" method="POST" style="display:none;">
    @csrf
</form>

{{-- Sticky bulk toolbar — appears when ≥1 row is selected. --}}
<div id="bulkToolbar" class="bulk-toolbar" role="region" aria-label="Bulk actions">
    <span class="bulk-toolbar-count"><em id="bulkCount">0</em>selected</span>
    <button type="button" class="btn btn-primary btn-sm" id="bulkApproveBtn">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
        Approve selected
    </button>
    <button type="button" class="btn btn-ghost btn-sm" id="bulkClearBtn">Clear</button>
</div>

{{-- Reject modal — populated dynamically by the trigger buttons --}}
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="vertical-align:-3px; margin-right:4px; color:var(--danger-500);"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
                    Reject application
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="rejectForm" method="POST">
                @csrf
                <div class="modal-body" style="padding:20px;">
                    <p style="margin:0 0 4px; font-size:13.5px; color:var(--text-tertiary);">Rejecting application for:</p>
                    <p style="font-weight:700; color:var(--text-primary); margin:0 0 4px;" id="rejectCandidateName"></p>
                    <p style="font-size:12.5px; color:var(--text-tertiary); margin:0 0 16px;" id="rejectPostTitle"></p>
                    <div class="form-group">
                        <label class="form-label" for="reject_remarks">Remarks <span style="color:var(--text-tertiary); font-weight:400;">(optional)</span></label>
                        <textarea id="reject_remarks" name="remarks" rows="4" class="form-control"
                                  placeholder="Provide a reason for rejection…" maxlength="500"></textarea>
                        <div class="form-text" style="margin-top:6px;">This action will be logged for audit purposes.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger btn-sm">Confirm rejection</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(function () {
    if ($('#applicationsTable tbody tr').length) {
        $('#applicationsTable').DataTable({
            responsive: true, pageLength: 25, order: [[6, 'desc']],
            dom: '<"row"<"col-sm-6"l><"col-sm-6 text-end"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
            language: { search: '', searchPlaceholder: 'Search applications…', lengthMenu: 'Show _MENU_', info: 'Showing _START_–_END_ of _TOTAL_', paginate: { first: '«', last: '»', next: '›', previous: '‹' } },
            // Column 0 is the bulk-select checkbox; column 7 is the actions cell.
            // Both are non-sortable, and we exclude column 0 from search too so
            // ticking a box doesn't filter the table.
            columnDefs: [
                { orderable: false, targets: [0, 7], searchable: false }
            ]
        });
    }

    function themePrimary() {
        return getComputedStyle(document.documentElement).getPropertyValue('--primary-600').trim() || '#0EA5E9';
    }
    function themeNeutral() {
        return getComputedStyle(document.documentElement).getPropertyValue('--neutral-500').trim() || '#64748B';
    }

    $(document).on('submit', '.approve-form', function (e) {
        e.preventDefault();
        var form = this;
        Swal.fire({
            title: 'Approve application?',
            text: 'A roll number will be auto-generated and assigned. This action is logged.',
            icon: 'question', showCancelButton: true,
            confirmButtonColor: themePrimary(), cancelButtonColor: themeNeutral(),
            confirmButtonText: 'Yes, approve', cancelButtonText: 'Cancel'
        }).then(function (r) { if (r.isConfirmed) form.submit(); });
    });

    $('#rejectModal').on('show.bs.modal', function (e) {
        var btn = $(e.relatedTarget);
        $('#rejectCandidateName').text(btn.data('name') || '');
        $('#rejectPostTitle').text(btn.data('post') || '');
        $('#rejectForm').attr('action', '/admin/applications/' + btn.data('id') + '/reject');
        $('#reject_remarks').val('');
    });

    // ── Bulk approve wiring ──────────────────────────────────────────────
    // Tracks selected rows, syncs the header checkbox, and submits a single
    // form with all ids when the admin confirms. Server-side mirrors the
    // single-row approve flow per row, so a row that was already processed
    // between page-load and submit is silently skipped (counted in flash).
    function refreshBulkToolbar() {
        var $rows = $('.bulk-select-row:checked');
        var n = $rows.length;
        $('#bulkCount').text(n);
        $('#bulkToolbar').toggleClass('is-active', n > 0);

        // Keep the header checkbox visually consistent. Indeterminate when some
        // (not all) pending rows are selected; checked only when every pending
        // row is selected.
        var $all = $('.bulk-select-row');
        var head = document.getElementById('bulkSelectAll');
        if (head) {
            head.checked = ($all.length > 0 && n === $all.length);
            head.indeterminate = (n > 0 && n < $all.length);
        }
    }

    $(document).on('change', '.bulk-select-row', refreshBulkToolbar);

    $('#bulkSelectAll').on('change', function () {
        $('.bulk-select-row').prop('checked', this.checked);
        refreshBulkToolbar();
    });

    $('#bulkClearBtn').on('click', function () {
        $('.bulk-select-row').prop('checked', false);
        refreshBulkToolbar();
    });

    function themePrimaryBulk() {
        return getComputedStyle(document.documentElement).getPropertyValue('--primary-600').trim() || '#0EA5E9';
    }

    $('#bulkApproveBtn').on('click', function () {
        var ids = $('.bulk-select-row:checked').map(function () { return this.value; }).get();
        if (ids.length === 0) return;

        Swal.fire({
            title: 'Approve ' + ids.length + ' application' + (ids.length === 1 ? '' : 's') + '?',
            text: 'A roll number and exam password will be auto-generated for each. Each candidate will receive an approval email. This action is logged.',
            icon: 'question', showCancelButton: true,
            confirmButtonColor: themePrimaryBulk(),
            confirmButtonText: 'Yes, approve all',
            cancelButtonText: 'Cancel'
        }).then(function (r) {
            if (!r.isConfirmed) return;
            var form = document.getElementById('bulkApproveForm');
            // Wipe any leftover inputs from a prior submission, then add fresh ones.
            $(form).find('input[name="ids[]"]').remove();
            ids.forEach(function (id) {
                $('<input>', { type: 'hidden', name: 'ids[]', value: id }).appendTo(form);
            });
            form.submit();
        });
    });
});
</script>
@endpush