@extends('layout.layout')

@push('styles')
    <style>
        .cp-review-page {
            padding-bottom: 1rem;
        }

        .cp-review-panel {
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
        }

        .cp-review-head {
            padding: 1.1rem 1.1rem 0;
        }

        .cp-review-body {
            padding: 1.1rem;
        }

        .cp-muted {
            color: #64748b;
        }
    </style>
@endpush

@section('content')
    <div class="container py-5 cp-review-page">
        @include('components.alert')

        <div class="cp-review-panel mb-4">
            <div class="cp-review-head">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                    <div>
                        <h4 class="mb-2 fw-bold">Conversation Project Review</h4>
                        <p class="mb-0 cp-muted">{{ $course->course_name_en ?? 'N/A' }} - {{ $course->trackLevel?->name_en ?? 'N/A' }}</p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fa-solid fa-arrow-left me-1"></i>
                            Back to Dashboard
                        </a>
                    </div>
                </div>
            </div>

            <div class="cp-review-body">
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="border rounded-3 p-3">
                            <div class="text-muted small">Student</div>
                            <div class="fw-semibold">{{ $submission->student?->full_name ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded-3 p-3">
                            <div class="text-muted small">Status</div>
                            <div class="fw-semibold text-capitalize">{{ str_replace('_', ' ', $submission->status) }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border rounded-3 p-3">
                            <div class="text-muted small">Final Score</div>
                            <div class="fw-semibold">{{ $submission->total_score ?? $submission->weighted_score ?? 'N/A' }} / 50</div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive mb-4">
                    <table class="table table-bordered align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Criterion</th>
                                <th class="text-center" style="width: 140px;">Weight</th>
                                <th class="text-center" style="width: 160px;">Score / 10</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Pronunciation and intonation</td>
                                <td class="text-center">10%</td>
                                <td class="text-center">{{ $submission->pronunciation_intonation_score ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <td>Vocabulary and lexical range</td>
                                <td class="text-center">10%</td>
                                <td class="text-center">{{ $submission->vocabulary_lexical_range_score ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <td>Fluency and cohesion</td>
                                <td class="text-center">10%</td>
                                <td class="text-center">{{ $submission->fluency_cohesion_score ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <td>Grammar and syntax</td>
                                <td class="text-center">10%</td>
                                <td class="text-center">{{ $submission->grammar_syntax_score ?? 'N/A' }}</td>
                            </tr>
                            <tr>
                                <td>Communication strategies</td>
                                <td class="text-center">10%</td>
                                <td class="text-center">{{ $submission->communication_strategies_score ?? 'N/A' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <div class="border rounded-3 p-3">
                            <div class="text-muted small">Uploaded File</div>
                            <a href="{{ route('conversation-project-submissions.download', $submission->id) }}" class="fw-semibold" target="_blank" rel="noopener noreferrer">
                                Download current file
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded-3 p-3">
                            <div class="text-muted small">Reviewed By</div>
                            <div class="fw-semibold">{{ $submission->reviewer?->full_name ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>

                @if ($submission->status === \App\Models\ConversationProjectSubmission::STATUS_REVIEWED)
                    <div class="alert alert-success mb-0">
                        This submission has already been reviewed. The rubric is locked and no further uploads are allowed.
                    </div>
                @else
                    <form action="{{ route('conversation-project-submissions.review.store', $submission->id) }}" method="POST">
                        @csrf

                        <div class="table-responsive mb-4">
                            <table class="table table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Criterion</th>
                                        <th class="text-center" style="width: 140px;">Weight</th>
                                        <th class="text-center" style="width: 180px;">Score / 10</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ([
                                        ['label' => 'Pronunciation and intonation', 'field' => 'pronunciation_intonation_score'],
                                        ['label' => 'Vocabulary and lexical range', 'field' => 'vocabulary_lexical_range_score'],
                                        ['label' => 'Fluency and cohesion', 'field' => 'fluency_cohesion_score'],
                                        ['label' => 'Grammar and syntax', 'field' => 'grammar_syntax_score'],
                                        ['label' => 'Communication strategies', 'field' => 'communication_strategies_score'],
                                    ] as $criterion)
                                        <tr>
                                            <td>{{ $criterion['label'] }}</td>
                                            <td class="text-center">10%</td>
                                            <td>
                                                <input
                                                    type="number"
                                                    step="0.1"
                                                    min="0"
                                                    max="10"
                                                    name="{{ $criterion['field'] }}"
                                                    value="{{ old($criterion['field']) }}"
                                                    class="form-control @error($criterion['field']) is-invalid @enderror"
                                                    required
                                                >
                                                @error($criterion['field'])
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa-solid fa-save me-1"></i>
                                Save Review
                            </button>
                            <span class="cp-muted small">The submission will be marked as reviewed and uploads will be locked.</span>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
@endsection