@extends('layouts.survey')

@section('title', 'Thank You — Survey Submitted')

@push('styles')
<style>
    .ty-wrap {
        min-height: calc(100vh - 64px);
        display: flex; align-items: center; justify-content: center;
        padding: 2rem 1rem;
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f0f9ff 100%);
    }

    .ty-card {
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0,166,81,.12), 0 4px 20px rgba(0,0,0,.06);
        padding: 3rem 2.5rem;
        max-width: 560px;
        width: 100%;
        text-align: center;
    }

    /* ── Animated checkmark ── */
    .ty-icon-wrap {
        width: 96px; height: 96px;
        border-radius: 50%;
        background: linear-gradient(135deg, #00a651, #007a3d);
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 1.75rem;
        box-shadow: 0 8px 24px rgba(0,166,81,.35);
        animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
    }
    @keyframes popIn {
        0%   { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    .ty-icon-wrap i { color: #fff; font-size: 2.4rem; }

    .ty-title {
        font-size: 1.8rem; font-weight: 800;
        color: #0f172a; margin-bottom: .5rem;
        animation: fadeUp .4s .2s ease both;
    }
    .ty-subtitle {
        font-size: 1rem; color: #64748b; line-height: 1.6;
        animation: fadeUp .4s .3s ease both;
    }
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Points badge ── */
    .points-badge {
        display: inline-flex; align-items: center; gap: .6rem;
        background: linear-gradient(135deg, #00a651, #007a3d);
        color: #fff;
        border-radius: 50px;
        padding: .6rem 1.5rem;
        font-size: 1.1rem; font-weight: 700;
        margin: 1.5rem 0;
        box-shadow: 0 4px 16px rgba(0,166,81,.3);
        animation: fadeUp .4s .4s ease both;
    }
    .points-badge .pts-num { font-size: 1.4rem; }

    /* ── Detail pills ── */
    .detail-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: .75rem; margin: 1.5rem 0;
        animation: fadeUp .4s .45s ease both;
    }
    .detail-pill {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: .75rem 1rem;
        text-align: left;
    }
    .detail-pill .dp-label {
        font-size: .7rem; font-weight: 700; color: #94a3b8;
        text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem;
    }
    .detail-pill .dp-value {
        font-size: .88rem; font-weight: 600; color: #1e293b;
    }

    /* ── Info note ── */
    .ty-note {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 10px;
        padding: .85rem 1.1rem;
        font-size: .82rem; color: #166534; line-height: 1.5;
        text-align: left;
        display: flex; gap: .6rem; align-items: flex-start;
        margin-bottom: 1.75rem;
        animation: fadeUp .4s .5s ease both;
    }
    .ty-note i { margin-top: 1px; flex-shrink: 0; color: #00a651; }

    /* ── Action buttons ── */
    .ty-actions {
        display: flex; flex-direction: column; gap: .75rem;
        animation: fadeUp .4s .55s ease both;
    }
    .btn-primary-solid {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        background: linear-gradient(135deg, #00a651, #007a3d);
        color: #fff; border: none; border-radius: 12px;
        padding: .9rem 1.5rem;
        font-size: .95rem; font-weight: 700; cursor: pointer;
        box-shadow: 0 4px 16px rgba(0,166,81,.3);
        transition: transform .15s, box-shadow .15s;
        text-decoration: none;
    }
    .btn-primary-solid:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(0,166,81,.4);
        color: #fff;
    }
    .btn-ghost-outline {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        background: transparent;
        color: #475569; border: 1.5px solid #e2e8f0; border-radius: 12px;
        padding: .85rem 1.5rem;
        font-size: .9rem; font-weight: 600; cursor: pointer;
        transition: border-color .15s, color .15s;
        text-decoration: none;
    }
    .btn-ghost-outline:hover { border-color: #00a651; color: #00a651; }

    /* ── Confetti ── */
    .confetti-container {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none; z-index: 9999; overflow: hidden;
    }
    .confetti-piece {
        position: absolute;
        width: 8px; height: 8px;
        top: -10px;
        border-radius: 2px;
        animation: confettiFall linear both;
    }
    @keyframes confettiFall {
        0%   { transform: translateY(0) rotateZ(0deg); opacity: 1; }
        80%  { opacity: 1; }
        100% { transform: translateY(110vh) rotateZ(720deg); opacity: 0; }
    }

    @media (max-width: 480px) {
        .ty-card { padding: 2rem 1.25rem; }
        .ty-title { font-size: 1.4rem; }
        .detail-grid { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')

{{-- Confetti --}}
<div class="confetti-container" id="confetti"></div>

<div class="ty-wrap">
    <div class="ty-card">

        {{-- Icon --}}
        <div class="ty-icon-wrap">
            <i class="fas fa-check"></i>
        </div>

        {{-- Heading --}}
        <h1 class="ty-title">Thank You!</h1>
        <p class="ty-subtitle">
            Your feedback for <strong>{{ $surveyResponse->project->name }}</strong> has been
            successfully submitted. Your insights help shape what CashBaba builds next.
        </p>

        {{-- Points earned --}}
        <div class="points-badge">
            <i class="fas fa-star"></i>
            <span>You earned</span>
            <span class="pts-num">{{ $surveyResponse->feedbackScore?->points_awarded ?? 1 }}</span>
            <span>{{ ($surveyResponse->feedbackScore?->points_awarded ?? 1) === 1 ? 'point' : 'points' }}</span>
        </div>

        {{-- Detail pills --}}
        <div class="detail-grid">
            <div class="detail-pill">
                <div class="dp-label">Project</div>
                <div class="dp-value">{{ $surveyResponse->project->name }}</div>
            </div>
            <div class="detail-pill">
                <div class="dp-label">Respondent Type</div>
                <div class="dp-value">{{ $surveyResponse->respondentType->name }}</div>
            </div>
            <div class="detail-pill">
                <div class="dp-label">Language</div>
                <div class="dp-value">
                    @if($surveyResponse->language === 'bn')
                        <i class="fas fa-globe"></i> বাংলা
                    @else
                        <i class="fas fa-globe"></i> English
                    @endif
                </div>
            </div>
            <div class="detail-pill">
                <div class="dp-label">Submitted At</div>
                <div class="dp-value">{{ $surveyResponse->submitted_at?->format('d M Y, h:i A') ?? now()->format('d M Y, h:i A') }}</div>
            </div>
        </div>

        {{-- Bonus note --}}
        <div class="ty-note">
            <i class="fas fa-lightbulb"></i>
            <span>
                Management may review your submission and award <strong>bonus points</strong> if
                your response is marked as Valuable (+5), Implementable (+10), or CEO Choice (+20).
                Keep collecting feedback to climb the leaderboard!
            </span>
        </div>

        {{-- Actions --}}
        <div class="ty-actions">
            <a href="{{ route('survey.start', $surveyResponse->project->slug) }}" class="btn-primary-solid">
                <i class="fas fa-plus-circle"></i>
                Submit Another Feedback for {{ $surveyResponse->project->name }}
            </a>
            <a href="{{ route('home') }}#projects" class="btn-ghost-outline">
                <i class="fas fa-th-large"></i>
                Choose a Different Project
            </a>
            <a href="{{ route('leaderboard') }}" class="btn-ghost-outline">
                <i class="fas fa-trophy"></i>
                View Leaderboard
            </a>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
(function launchConfetti() {
    const container = document.getElementById('confetti');
    const colors = ['#00a651','#007a3d','#fbbf24','#f97316','#3b82f6','#ec4899','#a3e635'];
    const count   = 80;

    for (let i = 0; i < count; i++) {
        const el = document.createElement('div');
        el.className = 'confetti-piece';
        el.style.left            = Math.random() * 100 + 'vw';
        el.style.background      = colors[Math.floor(Math.random() * colors.length)];
        el.style.width           = (Math.random() * 8 + 5) + 'px';
        el.style.height          = (Math.random() * 8 + 5) + 'px';
        el.style.borderRadius    = Math.random() > .5 ? '50%' : '2px';
        el.style.animationDuration = (Math.random() * 2 + 2) + 's';
        el.style.animationDelay  = (Math.random() * 1.5) + 's';
        container.appendChild(el);
    }

    // Remove after animations complete
    setTimeout(() => container.remove(), 5000);
})();
</script>
@endpush