@extends('layouts.app')

@section('title', 'Review Feedback #{{ $surveyResponse->id }}')

@push('styles')
<style>
    .review-grid { display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start; }

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

    .meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
    .meta-item .ml { font-size:.7rem;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem; }
    .meta-item .mv { font-size:.875rem;font-weight:600;color:var(--gray-800); }

    /* Q&A */
    .qa-item { padding:.85rem 0;border-bottom:1px solid var(--gray-100); }
    .qa-item:last-child { border-bottom:none; }
    .qa-q { font-size:.82rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem; }
    .qa-q .q-num { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:var(--green-light);color:var(--green-dark);font-size:.65rem;font-weight:800;margin-right:.4rem;flex-shrink:0; }
    .qa-a { font-size:.85rem;color:var(--gray-800);padding:.5rem .75rem;background:var(--gray-50);border-radius:8px;border-left:3px solid var(--green);line-height:1.55; }
    .qa-a.empty { color:var(--gray-400);font-style:italic; }

    /* Scoring panel */
    .score-badge { display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:10px;font-size:1.6rem;font-weight:800;margin-bottom:.35rem; }
    .score-badge.green { background:var(--green-light);color:var(--green-dark); }

    .flag-btn {
        display:flex;align-items:center;gap:.6rem;
        width:100%;padding:.7rem 1rem;border-radius:10px;
        font-size:.82rem;font-weight:600;cursor:pointer;
        border:1.5px solid var(--gray-200);background:#fff;color:var(--gray-700);
        transition:all .15s;text-align:left;margin-bottom:.5rem;
    }
    .flag-btn:hover { border-color:var(--green);color:var(--green); }
    .flag-btn.active-val  { background:#dbeafe;border-color:#2563eb;color:#1d4ed8; }
    .flag-btn.active-impl { background:#fef3c7;border-color:#d97706;color:#92400e; }
    .flag-btn.active-ceo  { background:#ede9fe;border-color:#7c3aed;color:#5b21b6; }
    .flag-btn .flag-icon { width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0; }
    .flag-btn.active-val  .flag-icon { background:#2563eb;color:#fff; }
    .flag-btn.active-impl .flag-icon { background:#d97706;color:#fff; }
    .flag-btn.active-ceo  .flag-icon { background:#7c3aed;color:#fff; }

    /* Comment form */
    .comment-form textarea { width:100%;padding:.65rem .85rem;border:1.5px solid var(--gray-200);border-radius:8px;font-size:.82rem;resize:vertical;font-family:inherit;transition:border-color .15s; }
    .comment-form textarea:focus { outline:none;border-color:var(--green); }
    .btn-comment { padding:.55rem 1.1rem;background:var(--green);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;margin-top:.6rem; }
    .btn-comment:hover { background:var(--green-dark); }

    .comment-item { padding:.75rem 0;border-bottom:1px solid var(--gray-100); }
    .comment-item:last-child { border-bottom:none; }
    .comment-meta { font-size:.72rem;color:var(--gray-400);margin-bottom:.3rem; }
    .comment-meta strong { color:var(--gray-700); }
    .comment-text { font-size:.83rem;color:var(--gray-700);line-height:1.5; }

    @media (max-width:900px) { .review-grid { grid-template-columns:1fr; } }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Feedback Review</h1>
        <p class="page-subtitle">
            {{ $surveyResponse->project->name }} &mdash;
            {{ $surveyResponse->respondentType->name }} &mdash;
            {{ $surveyResponse->language === 'bn' ? 'বাংলা' : 'English' }}
        </p>
    </div>
    <a href="{{ route('management.feedback.index') }}" class="btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to List
    </a>
</div>

<div class="review-grid">

    {{-- LEFT: Meta + Q&A --}}
    <div>

        {{-- Collector info --}}
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-user-tie"></i> Collector Information</h2>
                <span style="font-size:.75rem;color:var(--gray-400);">
                    Submitted {{ $surveyResponse->submitted_at?->diffForHumans() }}
                </span>
            </div>
            <div class="card-body">
                <div class="meta-grid">
                    <div class="meta-item">
                        <div class="ml">Employee Name</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->employee_name ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Employee ID</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->employee_id ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Department</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->department ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Location</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->location ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Respondent Name</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->respondent_name ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Respondent Phone</div>
                        <div class="mv">{{ $surveyResponse->employeeCollector?->respondent_phone ?? '—' }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Relationship Source</div>
                        <div class="mv">{{ ucfirst(str_replace('_', ' ', $surveyResponse->employeeCollector?->relationship_source ?? '—')) }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="ml">Language</div>
                        <div class="mv">{{ $surveyResponse->language === 'bn' ? '🇧🇩 বাংলা' : '🇬🇧 English' }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Q&A --}}
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-clipboard-list"></i> Survey Answers</h2>
                <span style="font-size:.75rem;color:var(--gray-400);">{{ $surveyResponse->answers->count() }} questions</span>
            </div>
            <div class="card-body" style="padding-top:.5rem;padding-bottom:.5rem;">
                @foreach($surveyResponse->answers as $i => $answer)
                <div class="qa-item">
                    <div class="qa-q">
                        <span class="q-num">{{ $i+1 }}</span>
                        {{ $surveyResponse->language === 'bn' && $answer->question->question_text_bn
                            ? $answer->question->question_text_bn
                            : $answer->question->question_text }}
                    </div>
                    @php
                        $hasAnswer = ($answer->answer_text && trim($answer->answer_text) !== '')
                            || (!empty($answer->answer_options));
                    @endphp
                    @if(!$hasAnswer)
                        <div class="qa-a empty">No answer provided</div>
                    @elseif($answer->answer_text)
                        <div class="qa-a">{{ $answer->answer_text }}</div>
                    @elseif($answer->answer_options)
                        <div class="qa-a">
                            @php $opts = $answer->answer_options; @endphp
                            @if(is_array($opts))
                                @foreach($opts as $opt)
                                    @php
                                        // Try to get label from question options JSON
                                        $label = $opt;
                                        $qOpts = $answer->question->options;
                                        if (is_array($qOpts)) {
                                            foreach ($qOpts as $qo) {
                                                if (($qo['value'] ?? null) === $opt) {
                                                    $label = $surveyResponse->language === 'bn' && isset($qo['label_bn']) ? $qo['label_bn'] : ($qo['label'] ?? $opt);
                                                }
                                            }
                                        }
                                    @endphp
                                    <div style="display:flex;align-items:center;gap:.4rem;margin-bottom:.2rem;">
                                        <i class="fas fa-check-circle" style="color:var(--green);font-size:.75rem;"></i>
                                        {{ $label }}
                                    </div>
                                @endforeach
                            @else
                                {{ $opts }}
                            @endif
                        </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>

    </div>

    {{-- RIGHT: Scoring + Comments --}}
    <div>

        {{-- Score card --}}
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-star"></i> Score & Flags</h2>
            </div>
            <div class="card-body">

                {{-- Points display --}}
                <div style="text-align:center;margin-bottom:1.25rem;">
                    <div class="score-badge green">{{ $surveyResponse->feedbackScore?->points_awarded ?? 1 }}</div>
                    <div style="font-size:.75rem;color:var(--gray-500);">points awarded</div>
                    @if($surveyResponse->feedbackScore?->scored_at)
                    <div style="font-size:.72rem;color:var(--gray-400);margin-top:.2rem;">
                        Reviewed {{ $surveyResponse->feedbackScore->scored_at->diffForHumans() }}
                    </div>
                    @endif
                </div>

                {{-- Flag toggles --}}
                @php $score = $surveyResponse->feedbackScore; @endphp

                <form method="POST" action="{{ route('management.feedback.valuable', $surveyResponse) }}">
                    @csrf
                    <button type="submit" class="flag-btn {{ $score?->is_valuable ? 'active-val' : '' }}">
                        <span class="flag-icon"><i class="fas fa-gem"></i></span>
                        <div>
                            <div style="font-weight:700;">Valuable <span style="font-size:.7rem;font-weight:400;">(+5 pts)</span></div>
                            <div style="font-size:.7rem;opacity:.7;">Notable insight worth sharing</div>
                        </div>
                        @if($score?->is_valuable) <i class="fas fa-check" style="margin-left:auto;font-size:.75rem;"></i> @endif
                    </button>
                </form>

                <form method="POST" action="{{ route('management.feedback.implementable', $surveyResponse) }}">
                    @csrf
                    <button type="submit" class="flag-btn {{ $score?->is_implementable ? 'active-impl' : '' }}">
                        <span class="flag-icon"><i class="fas fa-wrench"></i></span>
                        <div>
                            <div style="font-weight:700;">Implementable <span style="font-size:.7rem;font-weight:400;">(+10 pts)</span></div>
                            <div style="font-size:.7rem;opacity:.7;">Actionable, can be built on</div>
                        </div>
                        @if($score?->is_implementable) <i class="fas fa-check" style="margin-left:auto;font-size:.75rem;"></i> @endif
                    </button>
                </form>

                <form method="POST" action="{{ route('management.feedback.ceo_choice', $surveyResponse) }}">
                    @csrf
                    <button type="submit" class="flag-btn {{ $score?->is_ceo_choice ? 'active-ceo' : '' }}">
                        <span class="flag-icon"><i class="fas fa-crown"></i></span>
                        <div>
                            <div style="font-weight:700;">CEO Choice <span style="font-size:.7rem;font-weight:400;">(+20 pts)</span></div>
                            <div style="font-size:.7rem;opacity:.7;">Personally selected by CEO</div>
                        </div>
                        @if($score?->is_ceo_choice) <i class="fas fa-check" style="margin-left:auto;font-size:.75rem;"></i> @endif
                    </button>
                </form>

            </div>
        </div>

        {{-- Comments --}}
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-comments"></i> Management Notes</h2>
                <span style="font-size:.75rem;color:var(--gray-400);">{{ $surveyResponse->managementComments->count() }} note{{ $surveyResponse->managementComments->count() !== 1 ? 's' : '' }}</span>
            </div>
            <div class="card-body">

                {{-- Add comment --}}
                <form method="POST" action="{{ route('management.feedback.comment', $surveyResponse) }}" class="comment-form">
                    @csrf
                    <textarea name="comment" rows="3" placeholder="Add an internal note…" required maxlength="1000"></textarea>
                    @error('comment') <div style="font-size:.75rem;color:#ef4444;margin-top:.3rem;">{{ $message }}</div> @enderror
                    <button type="submit" class="btn-comment"><i class="fas fa-plus"></i> Add Note</button>
                </form>

                {{-- Existing comments --}}
                @if($surveyResponse->managementComments->count())
                <div style="margin-top:1rem;border-top:1px solid var(--gray-100);padding-top:.75rem;">
                    @foreach($surveyResponse->managementComments->sortByDesc('created_at') as $comment)
                    <div class="comment-item">
                        <div class="comment-meta">
                            <strong>{{ $comment->user?->name ?? 'Unknown' }}</strong>
                            &mdash; {{ $comment->created_at->format('d M Y, h:i A') }}
                        </div>
                        <div class="comment-text">{{ $comment->comment }}</div>
                    </div>
                    @endforeach
                </div>
                @endif

            </div>
        </div>

    </div>

</div>

@endsection