@extends('layout.layout')

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

        .cp-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid #dbe4f0;
            border-radius: 1.25rem;
            background:
                linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(59, 130, 246, 0.08)),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .cp-hero::after {
            content: '';
            position: absolute;
            inset: auto -10% -55% auto;
            width: 18rem;
            height: 18rem;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
            pointer-events: none;
        }

        .cp-hero__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.09);
            color: #0f1724;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0;
        }

        .cp-stat {
            min-height: 100%;
            padding: 1rem 1.05rem;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            background: #ffffff;
        }

        .cp-stat__label {
            color: #64748b;
            font-size: 0.8rem;
            line-height: 1.4;
        }

        .cp-stat__value {
            margin-top: 0.3rem;
            color: #0f172a;
            font-size: 0.98rem;
            font-weight: 700;
            line-height: 1.35;
            word-break: break-word;
        }

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

        .cp-panel__head {
            padding: 1.1rem 1.1rem 0;
        }

        .cp-panel__body {
            padding: 1.1rem;
        }

        .cp-upload {
            border: 1px dashed #cbd5e1;
            border-radius: 1rem;
            background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
            padding: 1rem;
        }

        .cp-upload__icon {
            width: 2.75rem;
            height: 2.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.9rem;
            background: rgba(37, 99, 235, 0.1);
            color: #0f1724;
            flex: 0 0 auto;
        }

        .cp-step {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.9rem 0.95rem;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            background: #fff;
        }

        .cp-step__dot {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            background: #eff6ff;
            color: #0f1724;
        }

        .cp-step__title {
            font-weight: 700;
            color: #0f172a;
            line-height: 1.3;
        }

        .cp-step__text {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.45;
        }

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

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

        <div class="cp-hero p-4 p-lg-5 mb-4">
            <div class="position-relative">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                    <div class="flex-grow-1" style="min-width: 0;">
                        <span class="cp-hero__eyebrow mb-3">
                            <i class="fa-solid fa-layer-group"></i>
                            Conversation Project
                        </span>
                        <h4 class="mb-2 fw-bold">Submission & Evaluation</h4>
                        <p class="mb-0 cp-muted">{{ $course->course_name_en }}</p>
                    </div>

                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('course') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fa-solid fa-arrow-left me-1"></i>
                            Back to Courses
                        </a>
                    </div>
                </div>

                <div class="row g-3 mt-3">
                    <div class="col-md-4">
                        <div class="cp-stat">
                            <div class="cp-stat__label">Program</div>
                            <div class="cp-stat__value">{{ $course->track?->name_en ?? $course->academyCategoryProduct?->name_en ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="cp-stat">
                            <div class="cp-stat__label">Level</div>
                            <div class="cp-stat__value">{{ $course->trackLevel?->name_en ?? 'N/A' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="cp-stat">
                            <div class="cp-stat__label">Last Session End</div>
                            <div class="cp-stat__value">
                                {{ $availability['last_session_end_at'] ? \Carbon\Carbon::parse($availability['last_session_end_at'])->format('Y-m-d h:i A') : 'Not available' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if (! $availability['is_reviewed'])
            <div class="cp-panel mb-4">
                <div class="cp-panel__head">
                    <h5 class="mb-1 fw-bold">Project upload</h5>
                </div>
                <div class="cp-panel__body">
                    <form action="{{ route('conversation-project-submissions.store', $course->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="cp-upload mb-3">
                            <label for="project_file_test" class="form-label fw-semibold mb-2">Project File</label>
                            <input
                                type="file"
                                class="form-control @error('project_file') is-invalid @enderror"
                                id="project_file_test"
                                name="project_file"

                                required
                            >
                            @error('project_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fa-solid fa-paper-plane me-1"></i>
                            Upload Project
                        </button>
                    </form>
                </div>
            </div>
        @endif

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="cp-panel">
                    <div class="cp-panel__head">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
                            <div>
                                <h5 class="mb-1 fw-bold">Project submission</h5>
                                <p class="mb-0 cp-muted">Upload your final presentation and review the submission status below.</p>
                            </div>

                            @if ($submission)
                                <span class="badge {{ $availability['is_reviewed'] ? 'bg-success' : 'bg-info text-dark' }} text-capitalize align-self-start">
                                    {{ str_replace('_', ' ', $submission->status) }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="cp-panel__body">
                        @if ($submission && $availability['is_reviewed'])
                            <div class="d-flex align-items-start gap-3 mb-4">
                                <div class="cp-upload__icon">
                                    <i class="fa-solid fa-circle-check"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1 fw-bold">Your project has been reviewed.</h6>
                                    <p class="mb-0 cp-muted">You can download the submitted file and check the final score below.</p>
                                </div>
                            </div>

                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <div class="cp-stat">
                                        <div class="cp-stat__label">Status</div>
                                        <div class="cp-stat__value text-capitalize">{{ str_replace('_', ' ', $submission->status) }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="cp-stat">
                                        <div class="cp-stat__label">Total Score</div>
                                        <div class="cp-stat__value">{{ $submission->total_score ?? $submission->weighted_score ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="cp-stat">
                                        <div class="cp-stat__label">Reviewer</div>
                                        <div class="cp-stat__value">{{ $submission->reviewer?->full_name ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="cp-stat">
                                        <div class="cp-stat__label">Reviewed At</div>
                                        <div class="cp-stat__value">{{ optional($submission->reviewed_at)->format('Y-m-d h:i A') ?? 'N/A' }}</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: 140px;">Score</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>
                                        <tr class="table-light fw-semibold">
                                            <td>Total</td>
                                            <td class="text-center">50%</td>
                                            <td class="text-center">{{ $submission->total_score ?? $submission->weighted_score ?? 'N/A' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <a href="{{ route('conversation-project-submissions.download', $submission->id) }}"
                               class="btn btn-primary"
                               target="_blank" rel="noopener noreferrer">
                                <i class="fa-solid fa-download me-1"></i>
                                Download Submitted File
                            </a>
                        @else
                            @if ($submission)
                                <div class="d-flex align-items-start gap-3 mb-4">
                                    <div class="cp-upload__icon">
                                        <i class="fa-solid fa-clock"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1 fw-bold">Submission received</h6>
                                        <p class="mb-0 cp-muted">Your project is waiting for review. You can still replace the uploaded file while the window remains open.</p>
                                    </div>
                                </div>

                                <div class="d-flex flex-wrap gap-2 mb-4">
                                    <span class="badge bg-info text-dark text-capitalize">
                                        {{ str_replace('_', ' ', $submission->status) }}
                                    </span>
                                    <a href="{{ route('conversation-project-submissions.download', $submission->id) }}" class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
                                        <i class="fa-solid fa-file-arrow-down me-1"></i>
                                        Download Current File
                                    </a>
                                </div>
                            @else
                                <div class="d-flex align-items-start gap-3 mb-4">
                                    <div class="cp-upload__icon">
                                        <i class="fa-solid fa-cloud-arrow-up"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1 fw-bold">Ready to submit</h6>
                                        <p class="mb-0 cp-muted">Upload the final PowerPoint file for your conversation project.</p>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="cp-panel">
                    <div class="cp-panel__head">
                        <h5 class="mb-1 fw-bold">Submission flow</h5>
                        <p class="mb-0 cp-muted">A quick view of what happens next.</p>
                    </div>
                    <div class="cp-panel__body">
                        <div class="d-grid gap-3">
                            <div class="cp-step">
                                <div class="cp-step__dot">
                                    <i class="fa-solid fa-file-arrow-up"></i>
                                </div>
                                <div>
                                    <div class="cp-step__title">Upload</div>
                                </div>
                            </div>
                            <div class="cp-step">
                                <div class="cp-step__dot">
                                    <i class="fa-solid fa-clipboard-check"></i>
                                </div>
                                <div>
                                    <div class="cp-step__title">Review</div>
                                    <div class="cp-step__text">The file stays in review until the course team evaluates it.</div>
                                </div>
                            </div>
                            <div class="cp-step">
                                <div class="cp-step__dot">
                                    <i class="fa-solid fa-download"></i>
                                </div>
                                <div>
                                    <div class="cp-step__title">Download</div>
                                    <div class="cp-step__text">After review, download the final submitted file anytime.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection