@extends('layouts.student')
@section('title', 'Kumpulkan Tugas')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.75rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }

    .form-label { display:block; font-size:13px; font-weight:600; margin-bottom:.5rem; color:var(--navy); }
    .form-input { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; box-sizing:border-box; }
    .form-input:focus { border-color:var(--navy); }
    .form-textarea { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; resize:none; transition:border-color .15s; box-sizing:border-box; }
    .form-textarea:focus { border-color:var(--navy); }

    .file-drop { border:2px dashed var(--border); border-radius:16px; padding:2rem; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; background:var(--cream); }
    .file-drop:hover { border-color:#c7bfb0; background:#f5f0e8; }

    .submit-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.875rem 1.75rem; border-radius:16px; font-size:14px; font-weight:600; background:var(--navy); color:white; border:none; cursor:pointer; transition:opacity .2s; width:100%; }
    .submit-btn:hover { opacity:.87; }

    .info-item { display:flex; align-items:center; gap:.75rem; font-size:13px; color:var(--text-muted); padding:.5rem 0; border-bottom:1px solid var(--border); }
    .info-item:last-child { border-bottom:none; }
    .info-item i { width:16px; color:var(--gold); flex-shrink:0; }

    .deadline-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:12px; font-weight:600; padding:.375rem .875rem; border-radius:100px; }
    .deadline-open { background:#d1fae5; color:#065f46; }
    .deadline-closed { background:#fee2e2; color:#dc2626; }
</style>

<div class="edu-font-body space-y-6">

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
            <div>
                <span class="section-label">Pengumpulan Tugas</span>
                <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">{{ $assignment->title }}</h1>
                <p class="text-sm mt-1.5" style="color:var(--text-muted);">{{ $assignment->course->title }}</p>
            </div>
            <a href="{{ route('student.courses.show', $assignment->course) }}" class="inline-flex items-center gap-2 text-sm font-medium px-4 py-2.5 rounded-xl hover:opacity-80 transition self-start" style="background:var(--cream); border:1px solid var(--border); color:var(--navy);">
                <i class="fa fa-arrow-left text-xs"></i> Kembali ke Kursus
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-5">

            {{-- Instruksi --}}
            <div class="card">
                <div class="flex items-start justify-between gap-3 mb-4">
                    <h2 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Instruksi Tugas</h2>
                    <span class="deadline-badge {{ $assignment->isOpen() ? 'deadline-open' : 'deadline-closed' }}">
                        <i class="fa fa-circle text-xs" style="font-size:6px;"></i>
                        {{ $assignment->isOpen() ? 'Terbuka' : 'Tutup' }}
                    </span>
                </div>
                <div class="text-sm leading-relaxed mb-5" style="color:#374151;">
                    {!! nl2br(e($assignment->description ?? 'Tidak ada instruksi tambahan.')) !!}
                </div>
                <div class="flex flex-wrap gap-4 pt-4 text-sm" style="border-top:1px solid var(--border); color:var(--text-muted);">
                    <span><i class="fa fa-clock mr-1.5" style="color:var(--gold);"></i>
                        <strong style="color:var(--navy);">Deadline:</strong> {{ $assignment->due_date ? $assignment->due_date->format('d M Y, H:i') : 'Tidak ada' }}
                    </span>
                </div>
            </div>

            {{-- Form --}}
            <div class="card">
                <h2 class="edu-font-display text-xl font-semibold mb-6" style="color:var(--navy);">Form Pengumpulan</h2>
                <form action="{{ route('student.assignments.store', $assignment) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
                    @csrf

                    {{-- Catatan --}}
                    <div>
                        <label class="form-label">Catatan <span style="color:var(--text-muted); font-weight:400;">(opsional)</span></label>
                        <textarea name="note" rows="5" class="form-textarea" placeholder="Tulis catatan singkat tentang tugasmu, atau penjelasan tambahan jika diperlukan...">{{ old('note') }}</textarea>
                        @error('note')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- File Upload --}}
                    <div>
                        <label class="form-label">File Jawaban</label>
                        <div class="file-drop" onclick="document.getElementById('file-input').click();">
                            <i class="fa fa-cloud-upload-alt text-2xl mb-2 block" style="color:var(--gold);"></i>
                            <p class="text-sm font-medium" style="color:var(--navy);">Klik untuk memilih file</p>
                            <p class="text-xs mt-1" style="color:var(--text-muted);">PDF, DOC, DOCX, XLS, XLSX, ZIP</p>
                            <p class="text-xs mt-3 font-medium" id="file-name" style="color:var(--gold); display:none;"></p>
                        </div>
                        <input type="file" id="file-input" name="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.zip" style="display:none;" onchange="document.getElementById('file-name').textContent = this.files[0]?.name || ''; document.getElementById('file-name').style.display = this.files[0] ? 'block' : 'none';">
                        @error('file')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit" class="submit-btn">
                        <i class="fa fa-paper-plane text-xs"></i> Kumpulkan Tugas
                    </button>
                </form>
            </div>
        </div>

        {{-- Sidebar --}}
        <aside class="space-y-5">
            <div class="card">
                <h3 class="text-sm font-semibold mb-4" style="color:var(--navy);">Detail Tugas</h3>
                <div>
                    <div class="info-item">
                        <i class="fa fa-book"></i>
                        <span>{{ ucfirst($assignment->type ?? 'Tugas') }}</span>
                    </div>
                    <div class="info-item">
                        <i class="fa fa-clock"></i>
                        <span>Deadline: <strong style="color:var(--navy);">{{ $assignment->due_date ? $assignment->due_date->format('d M Y, H:i') : 'Tidak ada' }}</strong></span>
                    </div>
                    <div class="info-item">
                        <i class="fa fa-users"></i>
                        <span>{{ $assignment->course->enrollments->count() }} siswa terdaftar</span>
                    </div>
                    <div class="info-item">
                        <i class="fa fa-chalkboard-teacher"></i>
                        <span>{{ $assignment->course->teacher->name ?? '-' }}</span>
                    </div>
                </div>
            </div>

            <div class="card" style="background:var(--gold-light); border-color:#e8d4a0;">
                <div class="flex gap-3">
                    <i class="fa fa-info-circle mt-0.5" style="color:#92742a; flex-shrink:0;"></i>
                    <div>
                        <p class="text-sm font-semibold mb-1" style="color:#92742a;">Perhatian</p>
                        <p class="text-xs leading-relaxed" style="color:#a07830;">Pastikan file yang kamu upload sesuai dengan format yang diminta. Kumpulkan sebelum batas waktu berakhir.</p>
                    </div>
                </div>
            </div>
        </aside>
    </div>

</div>
@endsection