@extends('layouts.app')
@section('title','Buat Tugas Baru')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap');
    :root { --arn-teal: #0d9488; --arn-dark: #111827; }
    .content-inner { font-family: 'Plus Jakarta Sans', sans-serif; background: #fcfdfd; min-height: 100vh; }
    .text-massive { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; }
    .text-heading { font-size: 1.15rem; font-weight: 900; color: var(--arn-dark); letter-spacing: -0.5px; }
    .label-mono { font-family: monospace; font-size: 0.75rem; letter-spacing: 0.05em; color: #6b7280; font-weight: 800; }
    .card-modern { border-radius: 16px; border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
    
    .form-arn { height: 55px; border-radius: 12px; background: #f8fafc; border: 1px solid transparent; font-weight: 700; color: var(--arn-dark); transition: 0.3s; }
    .form-arn:focus { background: #fff; border-color: var(--arn-teal); box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1); }
    
    .upload-zone { border: 2px dashed #cbd5e1; border-radius: 16px; padding: 3rem 2rem; text-align: center; cursor: pointer; background: #f8fafc; transition: all 0.3s ease; }
    .upload-zone:hover, .upload-zone.drag { border-color: var(--arn-teal); background: #f0fdfa; }
    .file-preview-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; }
</style>

<div class="content-inner p-4 p-md-5">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end mb-5 gap-3">
        <div>
            <div class="label-mono mb-2" style="color: var(--arn-teal);">Formulir Penugasan</div>
            <h1 class="text-massive mb-2">Buat tugas baru</h1>
            <p class="text-muted fw-bold m-0">Isi detail penugasan dan lampirkan file soal untuk mahasiswa.</p>
        </div>
        <a href="{{ route('dosen.tugas.index') }}" class="btn fw-900 shadow-sm px-4" style="background: #fff; border: 1px solid #e5e7eb; color: var(--arn-dark); height: 50px; border-radius: 12px; display: flex; align-items: center; text-decoration: none;">
            Batal & Kembali
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card-modern p-4 p-lg-5 border-0 shadow-sm">
                @if($errors->any())
                <div class="p-4 mb-4 fw-bold" style="background: #fef2f2; color: #ef4444; border-radius: 12px; border: 1px solid #fecaca;">
                    Terdapat kesalahan pada isian Anda. Silakan periksa kembali.
                </div>
                @endif

                <form method="POST" action="{{ route('dosen.tugas.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="label-mono mb-2 text-dark">MATA KULIAH</label>
                            <select name="matkul_id" class="form-select form-arn shadow-sm @error('matkul_id') is-invalid @enderror" required>
                                <option value="">Pilih mata kuliah...</option>
                                @foreach($matkulList as $mk)
                                <option value="{{ $mk->id }}" {{ old('matkul_id') == $mk->id ? 'selected' : '' }}>
                                    {{ $mk->nama }} ({{ $mk->kode }})
                                </option>
                                @endforeach
                            </select>
                            @error('matkul_id')<div class="text-danger fw-bold mt-1" style="font-size:0.8rem;">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="label-mono mb-2 text-dark">BATAS WAKTU (DEADLINE)</label>
                            <input type="datetime-local" name="deadline" class="form-control form-arn shadow-sm @error('deadline') is-invalid @enderror" value="{{ old('deadline') }}" required>
                            @error('deadline')<div class="text-danger fw-bold mt-1" style="font-size:0.8rem;">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-12">
                            <label class="label-mono mb-2 text-dark">JUDUL TUGAS</label>
                            <input type="text" name="judul" class="form-control form-arn shadow-sm @error('judul') is-invalid @enderror" value="{{ old('judul') }}" placeholder="Tuliskan judul tugas yang jelas..." required>
                            @error('judul')<div class="text-danger fw-bold mt-1" style="font-size:0.8rem;">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-12">
                            <label class="label-mono mb-2 text-dark">DESKRIPSI & PETUNJUK PENGERJAAN</label>
                            <textarea name="deskripsi" class="form-control form-arn shadow-sm" style="height: auto; padding: 16px;" rows="6" placeholder="Jelaskan instruksi tugas secara detail di sini...">{{ old('deskripsi') }}</textarea>
                        </div>

                        <div class="col-12 mt-4">
                            <label class="label-mono mb-2 text-dark">LAMPIRAN SOAL (OPSIONAL)</label>
                            <div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileSoal').click()" ondragover="event.preventDefault();this.classList.add('drag')" ondragleave="this.classList.remove('drag')" ondrop="handleDrop(event)">
                                <div class="text-heading" style="color: var(--arn-teal);">Pilih file atau tarik ke sini</div>
                                <div class="fw-bold mt-2" style="font-size: 0.8rem; color: #64748b;">Mendukung PDF, DOCX, XLSX, PPTX, ZIP, JPG, PNG (Maks 20MB)</div>
                            </div>
                            <input type="file" name="file_soal[]" id="fileSoal" multiple accept=".pdf,.doc,.docx,.zip,.ppt,.pptx,.xls,.xlsx,.jpg,.png" style="display:none;" onchange="previewFiles(this.files)">
                            
                            <div id="filePreview" class="mt-3"></div>
                            @error('file_soal.*')<div class="text-danger fw-bold mt-1" style="font-size:0.8rem;">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="mt-5 pt-4 border-top text-end">
                        <button type="submit" class="btn text-white fw-900 shadow-sm px-5" style="background: var(--arn-teal); height: 55px; border-radius: 12px; letter-spacing: 0.5px;">
                            Terbitkan tugas
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes/1024).toFixed(1) + ' KB';
    return (bytes/1048576).toFixed(1) + ' MB';
}
function previewFiles(files) {
    const box = document.getElementById('filePreview');
    box.innerHTML = '';
    if (!files.length) return;
    Array.from(files).forEach((f) => {
        box.innerHTML += `
        <div class="file-preview-item">
            <div>
                <div style="font-weight:900;font-size:0.9rem;color:var(--arn-dark);">${f.name}</div>
                <div style="font-size:0.75rem;color:#64748b;font-weight:700;">${formatSize(f.size)}</div>
            </div>
            <div style="font-weight:900;color:var(--arn-teal);font-size:0.75rem;background:#f0fdfa;padding:4px 10px;border-radius:6px;">Siap diunggah</div>
        </div>`;
    });
    document.getElementById('uploadZone').style.borderColor = '#0d9488';
    document.getElementById('uploadZone').style.background  = '#f0fdfa';
}
function handleDrop(e) {
    e.preventDefault();
    document.getElementById('uploadZone').classList.remove('drag');
    const dt = e.dataTransfer;
    document.getElementById('fileSoal').files = dt.files;
    previewFiles(dt.files);
}
</script>
@endsection