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

@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: 2rem; text-align: center; cursor: pointer; background: #f8fafc; transition: all 0.3s ease; }
    .upload-zone:hover { border-color: var(--arn-teal); background: #f0fdfa; }
    
    .existing-file { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; }
    
    /* Custom Checkbox Styling */
    .arn-checkbox input[type="checkbox"] { display: none; }
    .arn-checkbox label { cursor: pointer; font-size: 0.8rem; font-weight: 900; padding: 8px 16px; border-radius: 8px; background: #f1f5f9; color: #475569; transition: 0.2s; }
    .arn-checkbox input[type="checkbox"]:checked + label { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
</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);">Pembaruan Penugasan</div>
            <h1 class="text-massive mb-2">Edit tugas</h1>
            <p class="text-muted fw-bold m-0">Ubah detail tugas atau sesuaikan file lampiran yang ada.</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.update', $tugas) }}" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    
                    <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" required>
                                @foreach($matkulList as $mk)
                                <option value="{{ $mk->id }}" {{ $tugas->matkul_id == $mk->id ? 'selected' : '' }}>
                                    {{ $mk->nama }} ({{ $mk->kode }})
                                </option>
                                @endforeach
                            </select>
                        </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" value="{{ old('deadline', $tugas->deadline->format('Y-m-d\TH:i')) }}" required>
                        </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" value="{{ old('judul', $tugas->judul) }}" required>
                        </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">{{ old('deskripsi', $tugas->deskripsi) }}</textarea>
                        </div>

                        {{-- Managemen File Lama --}}
                        @if($tugas->file_soal && count($tugas->file_soal) > 0)
                        <div class="col-12 mt-4">
                            <label class="label-mono mb-2 text-dark">FILE LAMPIRAN SAAT INI</label>
                            <div class="p-4" style="background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
                                @foreach($tugas->file_soal as $idx => $f)
                                <div class="existing-file">
                                    <div>
                                        <div style="font-weight:900;font-size:0.9rem;color:var(--arn-dark);">{{ $f['nama_asli'] }}</div>
                                        <div style="font-size:0.75rem;color:#64748b;font-weight:700;">{{ round($f['ukuran']/1024, 1) }} KB</div>
                                    </div>
                                    <div class="arn-checkbox">
                                        <input type="checkbox" name="hapus_file[]" value="{{ $idx }}" id="hapus_{{ $idx }}">
                                        <label for="hapus_{{ $idx }}">Tandai untuk dihapus</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        {{-- Tambah File Baru --}}
                        <div class="col-12 mt-4">
                            <label class="label-mono mb-2 text-dark">TAMBAH FILE BARU (OPSIONAL)</label>
                            <div class="upload-zone" onclick="document.getElementById('fileSoalBaru').click()">
                                <div class="text-heading" style="color: var(--arn-teal);">Klik untuk menambah file baru</div>
                                <div class="fw-bold mt-2" style="font-size: 0.8rem; color: #64748b;">Mendukung PDF, DOCX, XLSX, ZIP, dll</div>
                            </div>
                            <input type="file" name="file_soal[]" id="fileSoalBaru" multiple accept=".pdf,.doc,.docx,.zip,.ppt,.pptx,.xls,.xlsx,.jpg,.png" style="display:none;" onchange="previewNew(this.files)">
                            <div id="newFilePreview" class="mt-3"></div>
                        </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;">
                            Simpan pembaruan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function previewNew(files) {
    const box = document.getElementById('newFilePreview');
    box.innerHTML = '';
    Array.from(files).forEach(f => {
        box.innerHTML += `
        <div style="display:flex; justify-content:space-between; padding:12px 16px; background:#f0fdfa; border:1px solid #ccfbf1; border-radius:12px; margin-bottom:8px;">
            <div style="font-weight:900;font-size:0.9rem;color:var(--arn-dark);">${f.name}</div>
            <div style="font-weight:900;color:var(--arn-teal);font-size:0.75rem;">+ Tambahan baru</div>
        </div>`;
    });
}
</script>
@endsection