@extends('layout.layout')

@push('styles')
    <style>
        .cp-index-hero {
            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-index-stat {
            padding: 1rem 1.05rem;
            border-radius: 1rem;
            border: 1px solid #e2e8f0;
            background: rgba(255, 255, 255, 0.9);
        }

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

        .cp-index-stat__value {
            margin-top: 0.25rem;
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
        }

        .cp-table-shell {
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
        }
    </style>
@endpush

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

        <div class="cp-index-hero p-4 p-lg-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                <div style="min-width: 0;">
                    <span class="badge rounded-pill bg-primary-subtle text-primary mb-3 px-3 py-2">
                        <i class="fa-solid fa-layer-group me-1"></i>
                        Conversation Project
                    </span>
                    <h4 class="mb-2 fw-bold">Submission & Evaluation</h4>
                    <p class="mb-0 text-muted">Conversation track levels available for your account</p>
                </div>

                <div class="cp-index-stat">
                    <div class="cp-index-stat__label">Available levels</div>
                    <div class="cp-index-stat__value">{{ $conversationProjectCourses->count() }}</div>
                </div>
            </div>
        </div>

        @if ($conversationProjectCourses->isEmpty())
            <div class="alert alert-info mb-0">
                No conversation project levels are available for your account.
            </div>
        @else
            <div class="cp-table-shell">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width: 72px;">#</th>
                                <th>Level</th>
                                <th>Course</th>
                                <th class="text-center">Upload Window</th>
                                <th class="text-center">Status</th>
                                <th class="text-center" style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($conversationProjectCourses as $item)
                                @php
                                    $course = $item['course'];
                                    $availability = $item['availability'];
                                    $submission = $item['submission'];
                                @endphp
                                <tr>
                                    <td class="text-center fw-semibold">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $course->trackLevel?->name_en ?? 'N/A' }}</div>
                                        <div class="text-muted small">Conversation project level</div>
                                    </td>
                                    <td>
{{--                                        @dump($course->trackLevel?->name_en )--}}
                                        <div class="fw-semibold">{{ $course->course_name_en ?? 'N/A' }}</div>
                                        <div class="text-muted small">
                                            {{ $course->track?->name_en ?? $course->academyCategoryProduct?->name_en ?? 'Conversation track' }}
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if ($availability['upload_window_open'])
                                            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">Open</span>
                                        @else
                                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-3 py-2">Locked</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if ($submission)
                                            <span class="badge bg-info-subtle text-info border border-info-subtle px-3 py-2 text-capitalize">
                                                {{ str_replace('_', ' ', $submission->status) }}
                                            </span>
                                        @else
                                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle px-3 py-2">No submission</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if ($submission && $availability['is_reviewed'])
                                            <a href="{{ route('conversation-project-submissions.show', ['course_id' => $course->id]) }}"
                                               class="btn btn-sm btn-outline-secondary">
                                                <i class="fa-solid fa-eye me-1"></i>
                                                View Review
                                            </a>
                                        @else
                                            <a href="{{ route('conversation-project-submissions.show', ['course_id' => $course->id]) }}"
                                               class="btn btn-sm btn-primary">
                                                <i class="fa-solid fa-folder-open me-1"></i>
                                                Open Form
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>
@endsection