@extends('layouts.app')

@section('title', 'My Submissions')

@push('styles')
<style>
    .page-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        overflow: hidden;
    }
    .page-card-header {
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--gray-100);
        display: flex; align-items: center; justify-content: space-between;
    }
    .page-card-header h2 { font-size: .95rem; font-weight: 700; color: var(--gray-900); }

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

    .badge-pts  { display:inline-flex;align-items:center;gap:.25rem;background:var(--green-light);color:var(--green-dark);border-radius:20px;padding:.2rem .6rem;font-size:.72rem;font-weight:700; }
    .badge-ceo  { background:#ede9fe;color:#7c3aed; }
    .badge-impl { background:#fef3c7;color:#d97706; }
    .badge-val  { background:#dbeafe;color:#1d4ed8; }

    .collector-info { font-size:.75rem; color:var(--gray-500); }

    .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;
    }
    .pagination-wrap .pagination { display:flex;gap:.35rem; }
    .pagination-wrap .page-item .page-link {
        padding: .35rem .7rem;
        border: 1px solid var(--gray-200);
        border-radius: 6px;
        font-size: .78rem; color: var(--gray-700);
        transition: background .15s;
    }
    .pagination-wrap .page-item.active .page-link { background: var(--green); color:#fff; border-color:var(--green); }
    .pagination-wrap .page-item.disabled .page-link { opacity:.5; cursor:not-allowed; }

    .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">My Submissions</h1>
        <p class="page-subtitle">All feedback surveys you have collected and submitted.</p>
    </div>
    <a href="{{ route('home') }}#projects" class="btn-primary">
        <i class="fas fa-plus"></i> Collect New Feedback
    </a>
</div>

<div class="page-card">
    <div class="page-card-header">
        <h2>Submission History</h2>
        <span style="font-size:.78rem;color:var(--gray-500);">
            {{ $responses->total() }} total submission{{ $responses->total() !== 1 ? 's' : '' }}
        </span>
    </div>

    @if($responses->count())
    <div style="overflow-x:auto;">
        <table class="sub-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Project</th>
                    <th>Respondent</th>
                    <th>Location</th>
                    <th>Language</th>
                    <th>Points</th>
                    <th>Recognition</th>
                    <th>Submitted</th>
                </tr>
            </thead>
            <tbody>
                @foreach($responses as $i => $response)
                <tr>
                    <td style="color:var(--gray-400);font-size:.78rem;">
                        {{ ($responses->currentPage() - 1) * $responses->perPage() + $i + 1 }}
                    </td>
                    <td>
                        <div style="font-weight:600;color:var(--gray-900);">{{ $response->project->name }}</div>
                        <div style="font-size:.72rem;color:var(--gray-400);">{{ $response->respondentType->name }}</div>
                    </td>
                    <td>
                        @if($response->employeeCollector)
                            <div style="font-size:.82rem;">{{ $response->employeeCollector->respondent_name ?? '—' }}</div>
                            <div class="collector-info">
                                @if($response->employeeCollector->respondent_phone)
                                    {{ $response->employeeCollector->respondent_phone }}
                                @endif
                            </div>
                        @else
                            <span style="color:var(--gray-400);">—</span>
                        @endif
                    </td>
                    <td style="font-size:.82rem;">
                        {{ $response->employeeCollector?->location ?? '—' }}
                    </td>
                    <td>
                        @if($response->language === 'bn')
                            <span style="font-size:.75rem;">🇧🇩 বাংলা</span>
                        @else
                            <span style="font-size:.75rem;">🇬🇧 English</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge-pts">
                            <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-pts badge-ceo"><i class="fas fa-crown" style="font-size:.6rem;"></i> CEO Choice</span>
                        @elseif($score?->is_implementable)
                            <span class="badge-pts badge-impl"><i class="fas fa-wrench" style="font-size:.6rem;"></i> Implementable</span>
                        @elseif($score?->is_valuable)
                            <span class="badge-pts badge-val"><i class="fas fa-gem" style="font-size:.6rem;"></i> Valuable</span>
                        @else
                            <span style="color:var(--gray-400);font-size:.75rem;">Pending review</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>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @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>You haven't submitted any surveys yet. Start by choosing a project below.</p>
        <a href="{{ route('home') }}#projects" style="display:inline-block;margin-top:.75rem;padding:.5rem 1.2rem;background:var(--green);color:#fff;border-radius:8px;font-size:.82rem;font-weight:600;">
            Explore Projects
        </a>
    </div>
    @endif
</div>

@endsection