@extends('layouts.app')

@section('title', 'Feedback Review')

@push('styles')
<style>
    .filter-bar { background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap; }
    .filter-bar select, .filter-bar input[type="text"] {
        padding:.45rem .75rem;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.82rem;color:var(--gray-700);background:#fff;
        transition:border-color .15s;
    }
    .filter-bar select:focus, .filter-bar input:focus { outline:none;border-color:var(--green); }
    .filter-bar .btn-filter { padding:.45rem 1rem;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer; }
    .filter-bar .btn-clear { padding:.45rem .9rem;background:transparent;color:var(--gray-500);border:1.5px solid var(--gray-200);border-radius:8px;font-size:.82rem;cursor:pointer;font-weight:600; }

    .fb-table-wrap { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .fb-table-header { padding:1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;justify-content:space-between;align-items:center; }
    .fb-table-header span { font-size:.78rem;color:var(--gray-500); }

    table.fb-table { width:100%;border-collapse:collapse; }
    .fb-table th { padding:.65rem 1rem;font-size:.72rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;background:var(--gray-50);border-bottom:1px solid var(--gray-200);text-align:left;white-space:nowrap; }
    .fb-table td { padding:.8rem 1rem;font-size:.84rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle; }
    .fb-table tr:last-child td { border-bottom:none; }
    .fb-table tr:hover td { background:var(--gray-50); }

    .badge { display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:20px;font-size:.68rem;font-weight:700; }
    .badge-green  { background:var(--green-light);color:var(--green-dark); }
    .badge-blue   { background:#dbeafe;color:#1d4ed8; }
    .badge-amber  { background:#fef3c7;color:#d97706; }
    .badge-purple { background:#ede9fe;color:#7c3aed; }

    .btn-view { display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .75rem;background:var(--green);color:#fff;border-radius:6px;font-size:.75rem;font-weight:600;transition:background .15s; }
    .btn-view:hover { background:var(--green-dark);color:#fff; }

    .pagination-wrap { padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-100);font-size:.8rem;color:var(--gray-500);flex-wrap:wrap;gap:.5rem; }

    .empty-state { text-align:center;padding:3rem 1rem; }
    .empty-state i { font-size:2.5rem;color:var(--gray-300);margin-bottom:.75rem;display:block; }
    .empty-state p { color:var(--gray-500);font-size:.875rem; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Feedback Review</h1>
        <p class="page-subtitle">Review, score, and annotate submitted feedback.</p>
    </div>
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('management.feedback.index') }}" class="filter-bar">
    <select name="project_id">
        <option value="">All Projects</option>
        @foreach($projects as $project)
        <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>{{ $project->name }}</option>
        @endforeach
    </select>
    <input type="text" name="search" placeholder="Search employee name / ID…" value="{{ request('search') }}" style="min-width:220px;">
    <button type="submit" class="btn-filter"><i class="fas fa-search"></i> Filter</button>
    @if(request()->hasAny(['project_id','search']))
    <a href="{{ route('management.feedback.index') }}" class="btn-clear">Clear</a>
    @endif
    <span style="margin-left:auto;font-size:.78rem;color:var(--gray-400);">{{ $responses->total() }} result{{ $responses->total() !== 1 ? 's' : '' }}</span>
</form>

<div class="fb-table-wrap">
    <div class="fb-table-header">
        <span style="font-weight:600;color:var(--gray-800);">All Submissions</span>
        <span>Page {{ $responses->currentPage() }} of {{ $responses->lastPage() }}</span>
    </div>

    @if($responses->count())
    <div style="overflow-x:auto;">
        <table class="fb-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Project</th>
                    <th>Respondent Type</th>
                    <th>Collected By</th>
                    <th>Location</th>
                    <th>Points</th>
                    <th>Flags</th>
                    <th>Submitted</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach($responses as $i => $response)
                <tr>
                    <td style="color:var(--gray-400);font-size:.75rem;">{{ ($responses->currentPage()-1)*$responses->perPage()+$i+1 }}</td>
                    <td><span style="font-weight:600;color:var(--gray-900);">{{ $response->project->name }}</span></td>
                    <td>{{ $response->respondentType->name }}</td>
                    <td>
                        <div style="font-weight:600;">{{ $response->employeeCollector?->employee_name ?? ($response->collector?->name ?? '—') }}</div>
                        <div style="font-size:.72rem;color:var(--gray-400);">{{ $response->employeeCollector?->department ?? '' }}</div>
                    </td>
                    <td style="font-size:.8rem;">{{ $response->employeeCollector?->location ?? '—' }}</td>
                    <td>
                        <span class="badge badge-green"><i class="fas fa-star" style="font-size:.6rem;"></i> {{ $response->feedbackScore?->points_awarded ?? 1 }}</span>
                    </td>
                    <td>
                        @php $score = $response->feedbackScore; @endphp
                        @if($score?->is_ceo_choice)
                            <span class="badge badge-purple"><i class="fas fa-crown" style="font-size:.6rem;"></i> CEO</span>
                        @elseif($score?->is_implementable)
                            <span class="badge badge-amber"><i class="fas fa-wrench" style="font-size:.6rem;"></i> Impl.</span>
                        @elseif($score?->is_valuable)
                            <span class="badge badge-blue"><i class="fas fa-gem" style="font-size:.6rem;"></i> Valuable</span>
                        @else
                            <span style="color:var(--gray-300);font-size:.75rem;">—</span>
                        @endif
                    </td>
                    <td style="font-size:.78rem;white-space:nowrap;">
                        <div>{{ $response->submitted_at?->format('d M Y') }}</div>
                        <div style="color:var(--gray-400);">{{ $response->submitted_at?->format('h:i A') }}</div>
                    </td>
                    <td>
                        <a href="{{ route('management.feedback.show', $response) }}" class="btn-view">
                            <i class="fas fa-eye"></i> Review
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if($responses->hasPages())
    <div class="pagination-wrap">
        <span>Showing {{ $responses->firstItem() }}–{{ $responses->lastItem() }} of {{ $responses->total() }}</span>
        {{ $responses->links() }}
    </div>
    @endif

    @else
    <div class="empty-state">
        <i class="fas fa-inbox"></i>
        <p>No feedback submissions found matching your filters.</p>
    </div>
    @endif
</div>

@endsection