@extends('layouts.app')

@section('title', 'Assignment API Documentation')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-secondary">Course Assignment Endpoint</h1>
            <p class="text-gray-500 mt-2">Endpoint: <code class="bg-gray-100 px-2 py-1 rounded text-sm text-primary">GET /api/academy/assignment/{lesson_id}</code></p>
        </div>
        <a href="{{ route('dashboard') }}" class="text-sm font-medium text-gray-500 hover:text-primary">&larr; Back to Dashboard</a>
    </div>

    <x-api-doc-viewer title="Practical Assignments Data" :curl="$curl" :raw="$raw">
        @if(isset($data['success']) && $data['success'])
            <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm">
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <h2 class="text-2xl font-bold text-secondary mb-2">{{ $data['data']['assignment']['title'] ?? 'Assignment Title' }}</h2>
                        <div class="text-sm text-gray-500 flex space-x-4">
                            <span><strong>Due Date:</strong> {{ \Carbon\Carbon::parse($data['data']['assignment']['due_date'] ?? now())->format('M d, Y') }}</span>
                            <span><strong>Total Points:</strong> {{ $data['data']['assignment']['total_points'] ?? 100 }}</span>
                        </div>
                    </div>
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-bold uppercase tracking-wider">
                        {{ $data['data']['assignment']['status'] ?? 'Pending' }}
                    </span>
                </div>

                <div class="prose max-w-none text-gray-700 mb-8">
                    {!! $data['data']['assignment']['instructions'] ?? 'Follow the instructions provided within the text file or attached document.' !!}
                </div>

                <div class="bg-gray-50 border border-gray-200 rounded-lg p-6">
                    <h3 class="text-lg font-bold text-secondary mb-4">Submission</h3>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg bg-white p-10 text-center">
                        <div class="text-gray-400 text-3xl mb-2">📎</div>
                        <p class="text-gray-600 font-medium mb-1">Drag and drop your assignment files here</p>
                        <p class="text-xs text-gray-400 mb-4">Supported formats: PDF, ZIP, DOCX (Max 20MB)</p>
                        <button type="button" class="px-4 py-2 bg-white border border-gray-300 rounded text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors">Select Files</button>
                    </div>
                </div>
            </div>
        @else
            <div class="p-6 bg-yellow-50 border border-yellow-200 rounded-xl">
                <div class="flex">
                    <div class="text-yellow-400 text-xl mr-3">⚠️</div>
                    <div>
                        <h3 class="text-lg font-bold text-yellow-800">No mock string found</h3>
                        <p class="text-yellow-700 text-sm mt-1">Assignments mock response was not found in ApiAndResponse.txt. But this UI view demonstrates what it will look like when connected.</p>
                        <div class="mt-4 p-4 bg-white rounded border border-yellow-100 font-mono text-sm text-gray-600">
                            {!! nl2br(e($raw)) !!}
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </x-api-doc-viewer>
</div>
@endsection