@extends('layouts.app')

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

@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); }
    .btn-filter { padding:.45rem 1rem;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer; }
    .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; }

    .flag-tabs { display:flex;gap:.5rem;flex-wrap:wrap; }
    .flag-tab { padding:.35rem .8rem;border-radius:20px;font-size:.75rem;font-weight:600;border:1.5px solid var(--gray-200);color:var(--gray-600);background:#fff;cursor:pointer;transition:all .15s; }
    .flag-tab:hover { border-color:var(--green);color:var(--green); }
    .flag-tab.active { background:var(--green);color:#fff;border-color:var(--green); }
    .flag-tab.tab-val.active  { background:#2563eb;border-color:#2563eb; }
    .flag-tab.tab-impl.active { background:#d97706;border-color:#d97706; }
    .flag-tab.tab-ceo.active  { background:#7c3aed;border-color:#7c3aed; }

    .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; }
    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 Management</h1>
        <p class="page-subtitle">Review, flag, and score all submitted feedback.</p>
    </div>
    <a href="{{ route('admin.export.csv') }}" class="btn-secondary">
        <i class="fas fa-download"></i> Export CSV
    </a>
</div>

{{-- Filters --}}
<form method="GET" action="{{ route('admin.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="Name / ID / Phone…" value="{{ request('search') }}" style="min-width:200px;">
    <select name="source">
        <option value="">All Sources</option>
        <option value="employee_collected" {{ request('source') === 'employee_collected' ? 'selected' : '' }}>Employee Collected</option>
        <option value="public_user"        {{ request('source') === 'public_user'        ? 'selected' : '' }}>Public Submitted</option>
        <option value="qr_campaign"        {{ request('source') === 'qr_campaign'        ? 'selected' : '' }}>QR Campaign</option>
        <option value="booth_campaign"     {{ request('source') === 'booth_campaign'     ? 'selected' : '' }}>Booth Campaign</option>
    </select>
    <div class="flag-tabs">
        <a href="{{ request()->fullUrlWithQuery(['flag' => null]) }}" class="flag-tab {{ !request('flag') ? 'active' : '' }}">All</a>
        <a href="{{ request()->fullUrlWithQuery(['flag' => 'valuable']) }}" class="flag-tab tab-val {{ request('flag') === 'valuable' ? 'active' : '' }}"><i class="fas fa-gem" style="font-size:.65rem;"></i> Valuable</a>
        <a href="{{ request()->fullUrlWithQuery(['flag' => 'implementable']) }}" class="flag-tab tab-impl {{ request('flag') === 'implementable' ? 'active' : '' }}"><i class="fas fa-wrench" style="font-size:.65rem;"></i> Implementable</a>
        <a href="{{ request()->fullUrlWithQuery(['flag' => 'ceo_choice']) }}" class="flag-tab tab-ceo {{ request('flag') === 'ceo_choice' ? 'active' : '' }}"><i class="fas fa-crown" style="font-size:.65rem;"></i> CEO Choice</a>
    </div>
    <button type="submit" class="btn-filter"><i class="fas fa-search"></i> Search</button>
    @if(request()->hasAny(['project_id','search','flag','source']))
    <a href="{{ route('admin.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 style="font-size:.78rem;color:var(--gray-500);">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>Source</th>
                    <th>Collected By / Respondent</th>
                    <th>Location</th>
                    <th>Pts</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>
                        @php
                            $srcMap = [
                                'employee_collected' => ['badge-blue',   'fa-id-badge',  'Employee'],
                                'public_user'        => ['badge-green',  'fa-globe',     'Public'],
                                'qr_campaign'        => ['badge-purple', 'fa-qrcode',    'QR'],
                                'booth_campaign'     => ['badge-orange', 'fa-store',     'Booth'],
                            ];
                            $src = $srcMap[$response->feedback_source] ?? ['badge-gray', 'fa-question', 'Unknown'];
                        @endphp
                        <span class="badge {{ $src[0] }}">
                            <i class="fas {{ $src[1] }}" style="font-size:.6rem;"></i>
                            {{ $src[2] }}
                        </span>
                    </td>
                    <td>
                        @if($response->feedback_source === 'employee_collected')
                            <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>
                        @else
                            <div style="font-weight:600;">{{ $response->employeeCollector?->respondent_name ?? '—' }}</div>
                            <div style="font-size:.72rem;color:var(--gray-400);">{{ $response->employeeCollector?->respondent_phone ?? '' }}</div>
                        @endif
                    </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('admin.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 match the current filters.</p>
    </div>
    @endif
</div>

@endsection