@extends('layouts.app')

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

@push('styles')
<style>
    /* ── Stats row ── */
    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    .stat-card {
        background: #fff;
        border-radius: 14px;
        padding: 1.4rem 1.5rem;
        border: 1px solid var(--gray-200);
        display: flex; align-items: center; gap: 1rem;
        transition: box-shadow .2s;
    }
    .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
    .stat-icon {
        width: 48px; height: 48px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem; flex-shrink: 0;
    }
    .stat-icon.green  { background: var(--green-light); color: var(--green); }
    .stat-icon.blue   { background: #dbeafe; color: #2563eb; }
    .stat-icon.amber  { background: #fef3c7; color: #d97706; }
    .stat-icon.purple { background: #ede9fe; color: #7c3aed; }
    .stat-info .stat-val { font-size: 1.6rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
    .stat-info .stat-lbl { font-size: .78rem; color: var(--gray-500); margin-top: .2rem; }

    /* ── Section cards ── */
    .section-card {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }
    .section-card-header {
        padding: 1.1rem 1.5rem;
        border-bottom: 1px solid var(--gray-100);
        display: flex; align-items: center; justify-content: space-between;
    }
    .section-card-header h2 {
        font-size: .95rem; font-weight: 700; color: var(--gray-900);
        display: flex; align-items: center; gap: .5rem;
    }
    .section-card-header h2 i { color: var(--green); }
    .section-card-body { padding: 1.25rem 1.5rem; }

    /* ── Project grid ── */
    .project-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }
    .proj-card {
        border: 1.5px solid var(--gray-200);
        border-radius: 12px;
        padding: 1.25rem;
        transition: border-color .2s, box-shadow .2s;
        display: flex; flex-direction: column; gap: .5rem;
    }
    .proj-card:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(0,166,81,.08); }
    .proj-card-icon {
        width: 40px; height: 40px; border-radius: 10px;
        background: var(--green-light);
        display: flex; align-items: center; justify-content: center;
        color: var(--green); font-size: 1rem; margin-bottom: .25rem;
    }
    .proj-card-name { font-size: .9rem; font-weight: 700; color: var(--gray-900); }
    .proj-card-tagline { font-size: .78rem; color: var(--gray-500); line-height: 1.4; flex: 1; }
    .btn-give-feedback {
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .5rem .9rem;
        background: var(--green); color: #fff;
        border-radius: 8px;
        font-size: .78rem; font-weight: 700;
        margin-top: .5rem;
        transition: background .15s;
        align-self: flex-start;
    }
    .btn-give-feedback:hover { background: var(--green-dark); color: #fff; }

    /* ── Recent submissions table ── */
    .sub-table { width: 100%; border-collapse: collapse; }
    .sub-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); text-align: left;
        border-bottom: 1px solid var(--gray-200);
    }
    .sub-table td {
        padding: .8rem 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-valuable { background: #dbeafe; color: #1d4ed8; }
    .badge-implementable { background: #fef3c7; color: #d97706; }
    .badge-ceo { background: #ede9fe; color: #7c3aed; }

    /* ── Empty state ── */
    .empty-state { text-align: center; padding: 2.5rem 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; margin-bottom: 1rem; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">My Dashboard</h1>
        <p class="page-subtitle">Track your feedback contributions and explore open projects.</p>
    </div>
</div>

{{-- Stats row --}}
<div class="stat-cards">
    <div class="stat-card">
        <div class="stat-icon green"><i class="fas fa-paper-plane"></i></div>
        <div class="stat-info">
            <div class="stat-val">{{ $myStats['total_submissions'] }}</div>
            <div class="stat-lbl">Surveys Submitted</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue"><i class="fas fa-star"></i></div>
        <div class="stat-info">
            <div class="stat-val">{{ $myStats['total_points'] }}</div>
            <div class="stat-lbl">Points Earned</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon amber"><i class="fas fa-lightbulb"></i></div>
        <div class="stat-info">
            <div class="stat-val">{{ $myStats['valuable_count'] }}</div>
            <div class="stat-lbl">Valuable Responses</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon purple"><i class="fas fa-th-large"></i></div>
        <div class="stat-info">
            <div class="stat-val">{{ $projects->count() }}</div>
            <div class="stat-lbl">Active Projects</div>
        </div>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">

    {{-- Active projects --}}
    <div class="section-card" style="grid-column: 1 / -1;">
        <div class="section-card-header">
            <h2><i class="fas fa-th-large"></i> Active Projects</h2>
            <span style="font-size:.78rem;color:var(--gray-500);">Click a project to start collecting feedback</span>
        </div>
        <div class="project-grid">
            @foreach($projects as $project)
            <div class="proj-card">
                <div class="proj-card-icon"><i class="{{ $project->icon ?? 'fas fa-folder' }}"></i></div>
                <div class="proj-card-name">{{ $project->name }}</div>
                <div class="proj-card-tagline">{{ $project->tagline }}</div>
                <a href="{{ route('survey.start', $project->slug) }}" class="btn-give-feedback">
                    <i class="fas fa-plus-circle"></i> Give Feedback
                </a>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Recent submissions --}}
    <div class="section-card" style="grid-column: 1 / -1;">
        <div class="section-card-header">
            <h2><i class="fas fa-clock-rotate-left"></i> Recent Submissions</h2>
            @if($myStats['total_submissions'] > 5)
            <a href="{{ route('employee.submissions') }}" style="font-size:.78rem;color:var(--green);font-weight:600;">
                View All <i class="fas fa-arrow-right" style="font-size:.7rem;"></i>
            </a>
            @endif
        </div>

        @if($recentSubmissions->count())
        <table class="sub-table">
            <thead>
                <tr>
                    <th>Project</th>
                    <th>Respondent Type</th>
                    <th>Language</th>
                    <th>Points</th>
                    <th>Flags</th>
                    <th>Submitted</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentSubmissions as $response)
                <tr>
                    <td>
                        <span style="font-weight:600;color:var(--gray-900);">{{ $response->project->name }}</span>
                    </td>
                    <td>{{ $response->respondentType->name }}</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>
                        @if($response->feedbackScore?->is_ceo_choice)
                            <span class="badge-pts badge-ceo"><i class="fas fa-crown" style="font-size:.6rem;"></i> CEO</span>
                        @elseif($response->feedbackScore?->is_implementable)
                            <span class="badge-pts badge-implementable"><i class="fas fa-wrench" style="font-size:.6rem;"></i> Impl.</span>
                        @elseif($response->feedbackScore?->is_valuable)
                            <span class="badge-pts badge-valuable"><i class="fas fa-gem" style="font-size:.6rem;"></i> Valuable</span>
                        @else
                            <span style="color:var(--gray-400);font-size:.75rem;">—</span>
                        @endif
                    </td>
                    <td style="font-size:.78rem;color:var(--gray-500);">
                        {{ $response->submitted_at?->diffForHumans() ?? '—' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @else
        <div class="empty-state">
            <i class="fas fa-inbox"></i>
            <p>You haven't submitted any surveys yet.</p>
            <a href="{{ route('home') }}#projects" style="display:inline-block;padding:.5rem 1.2rem;background:var(--green);color:#fff;border-radius:8px;font-size:.82rem;font-weight:600;">
                Start Collecting Feedback
            </a>
        </div>
        @endif
    </div>

</div>

@endsection