@extends('layouts.app')
@section('title','Detail Tugas')
@section('topbar-title','Detail Tugas')

@section('styles')
<style>
.upload-zone {
    border: 2px dashed rgba(20,184,166,.4);
    border-radius: 14px; padding: 2rem;
    text-align: center; cursor: pointer;
    background: #f0fdfa; transition: .2s;
    position: relative;
}
.upload-zone:hover, .upload-zone.drag { border-color:#0d9488; background:#ccfbf1; }
.file-item {
    display: flex; align-items: center; gap:.7rem;
    padding: .6rem .9rem; border-radius: 10px; margin-bottom: .4rem;
    background: white; border: 1px solid rgba(20,184,166,.18); position: relative;
}
.file-item .remove-btn {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #dc2626; cursor: pointer; font-size:.9rem;
    opacity: 0; transition: .15s;
}
.file-item:hover .remove-btn { opacity: 1; }
.nilai-display {
    text-align: center; padding: 1.5rem;
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-radius: 16px; border: 2px solid rgba(20,184,166,.25);
}
</style>
@endsection

@section('content')
<div class="page-header d-flex align-items-start justify-content-between flex-wrap gap-2">
    <div>
        <div class="page-title">{{ $tugas->judul }}</div>
        <div class="d-flex flex-wrap gap-2 mt-2">
            <span style="background:rgba(20,184,166,.1);color:#0d9488;padding:.2rem .7rem;border-radius:99px;font-size:.78rem;font-weight:600;">
                <i class="bi bi-book-fill me-1"></i>{{ $tugas->mataKuliah->nama ?? '-' }}
            </span>
            <span style="background:rgba(20,184,166,.1);color:#0d9488;padding:.2rem .7rem;border-radius:99px;font-size:.78rem;font-weight:600;">
                <i class="bi bi-person-fill me-1"></i>{{ $tugas->mataKuliah->dosen->nama ?? '-' }}
            </span>
            <span style="background:{{ $tugas->isOverdue() ? 'rgba(220,38,38,.1)' : 'rgba(22,163,74,.1)' }};
                         color:{{ $tugas->isOverdue() ? '#b91c1c' : '#15803d' }};
                         padding:.2rem .7rem;border-radius:99px;font-size:.78rem;font-weight:600;">
                <i class="bi bi-alarm me-1"></i>{{ $tugas->deadline->format('d M Y, H:i') }}
                — {{ $tugas->sisaWaktu() }}
            </span>
        </div>
    </div>
    <a href="{{ route('mahasiswa.tugas.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show py-2 mb-3" style="font-size:.85rem;">
    <i class="bi bi-check-circle-fill me-1"></i>{{ session('success') }}
    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show py-2 mb-3" style="font-size:.85rem;">
    <i class="bi bi-exclamation-triangle-fill me-1"></i>{{ session('error') }}
    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row g-4">

    {{-- Kiri: Deskripsi + File Soal + Nilai --}}
    <div class="col-lg-6">

        {{-- Nilai (tampil jika sudah dinilai) --}}
        @if($pengumpulan && $pengumpulan->nilai !== null)
        <div class="nilai-display mb-4">
            @php
                $n = $pengumpulan->nilai;
                $grade = $n >= 85 ? 'A' : ($n >= 70 ? 'B' : ($n >= 55 ? 'C' : ($n >= 40 ? 'D' : 'E')));
                $gradeColor = $n >= 85 ? '#15803d' : ($n >= 70 ? '#0d9488' : ($n >= 55 ? '#d97706' : '#dc2626'));
            @endphp
            <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#5a7a7a;margin-bottom:.5rem;">Nilai Anda</div>
            <div style="font-size:4rem;font-weight:900;line-height:1;color:{{ $gradeColor }};">{{ $n }}</div>
            <div style="font-size:1.25rem;font-weight:700;color:{{ $gradeColor }};margin-top:.2rem;">Grade {{ $grade }}</div>
            @if($pengumpulan->catatan_dosen)
            <div style="margin-top:1rem;padding:.75rem;background:white;border-radius:10px;text-align:left;">
                <div style="font-size:.72rem;font-weight:700;color:#5a7a7a;margin-bottom:.3rem;">
                    <i class="bi bi-chat-left-text-fill me-1" style="color:#0d9488;"></i>CATATAN DOSEN
                </div>
                <div style="font-size:.85rem;color:#0f2a2a;">{{ $pengumpulan->catatan_dosen }}</div>
            </div>
            @endif
        </div>
        @endif

        @if($tugas->deskripsi)
        <div class="content-card mb-4">
            <div class="content-card-header">
                <i class="bi bi-file-earmark-text-fill" style="color:#0d9488;"></i>
                <span class="title">Petunjuk Pengerjaan</span>
            </div>
            <div class="content-card-body" style="white-space:pre-line;font-size:.88rem;line-height:1.75;color:#1a2744;">
                {{ $tugas->deskripsi }}
            </div>
        </div>
        @endif

        @if($tugas->file_soal && count($tugas->file_soal) > 0)
        <div class="content-card">
            <div class="content-card-header">
                <i class="bi bi-paperclip" style="color:#0d9488;"></i>
                <span class="title">File Soal ({{ count($tugas->file_soal) }})</span>
            </div>
            <div class="content-card-body p-0">
                @foreach($tugas->file_soal as $idx => $f)
                <div class="d-flex align-items-center gap-3 p-3 border-bottom">
                    <div style="width:38px;height:38px;border-radius:10px;background:rgba(20,184,166,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="bi bi-file-earmark-fill" style="color:#0d9488;"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div style="font-weight:600;font-size:.83rem;">{{ $f['nama_asli'] }}</div>
                        <div style="font-size:.7rem;color:#5a7a7a;">{{ round($f['ukuran']/1024, 1) }} KB</div>
                    </div>
                    <a href="{{ route('mahasiswa.tugas.soal.download', [$tugas, $idx]) }}"
                       class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-download me-1"></i>Unduh
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    {{-- Kanan: Form Upload / Status Pengumpulan --}}
    <div class="col-lg-6">

        {{-- Sudah kumpul & sudah dinilai — read only --}}
        @if($pengumpulan && $pengumpulan->nilai !== null)
        <div class="content-card" style="border-top:3px solid #0d9488;">
            <div class="content-card-header">
                <i class="bi bi-patch-check-fill" style="color:#0d9488;"></i>
                <span class="title">Jawaban Anda</span>
                <span class="ms-auto badge-hadir">Sudah Dinilai</span>
            </div>
            <div class="content-card-body p-0">
                @if($pengumpulan->komentar_mahasiswa)
                <div class="p-3 border-bottom" style="background:#f8fffe;">
                    <div style="font-size:.72rem;font-weight:700;color:#5a7a7a;margin-bottom:.3rem;">
                        <i class="bi bi-chat-left-text me-1"></i>KOMENTAR ANDA
                    </div>
                    <div style="font-size:.83rem;color:#374151;">{{ $pengumpulan->komentar_mahasiswa }}</div>
                </div>
                @endif
                @foreach($pengumpulan->file_jawaban ?? [] as $idx => $f)
                <div class="d-flex align-items-center gap-3 p-3 border-bottom">
                    <div style="width:36px;height:36px;border-radius:9px;background:rgba(20,184,166,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="bi bi-file-earmark-check-fill" style="color:#0d9488;"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div style="font-weight:600;font-size:.83rem;">{{ $f['nama_asli'] }}</div>
                        <div style="font-size:.7rem;color:#5a7a7a;">{{ round($f['ukuran']/1024, 1) }} KB</div>
                    </div>
                    <a href="{{ route('mahasiswa.tugas.jawaban.download', [$tugas, $idx]) }}"
                       class="btn btn-sm" style="background:rgba(20,184,166,.1);color:#0d9488;border:1px solid rgba(20,184,166,.2);">
                        <i class="bi bi-download"></i>
                    </a>
                </div>
                @endforeach
                <div class="p-3" style="font-size:.78rem;color:#5a7a7a;">
                    <i class="bi bi-clock me-1"></i>Dikumpulkan: {{ $pengumpulan->waktu_kumpul->format('d M Y, H:i') }}
                    @if($pengumpulan->isTerlambat())
                        <span class="badge-alpha ms-1">Terlambat</span>
                    @else
                        <span class="badge-hadir ms-1">Tepat Waktu</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sudah kumpul, belum dinilai — bisa edit/batal --}}
        @elseif($pengumpulan)
        <div class="content-card mb-4" style="border-top:3px solid #0d9488;">
            <div class="content-card-header">
                <i class="bi bi-check-circle-fill" style="color:#0d9488;"></i>
                <span class="title">Sudah Dikumpulkan</span>
                <span class="ms-auto" style="font-size:.72rem;color:#5a7a7a;">Menunggu penilaian...</span>
            </div>
            <div class="content-card-body p-0">
                @if($pengumpulan->komentar_mahasiswa)
                <div class="p-3 border-bottom" style="background:#f8fffe;">
                    <div style="font-size:.72rem;font-weight:700;color:#5a7a7a;margin-bottom:.3rem;">
                        <i class="bi bi-chat-left-text me-1"></i>KOMENTAR ANDA
                    </div>
                    <div style="font-size:.83rem;color:#374151;">{{ $pengumpulan->komentar_mahasiswa }}</div>
                </div>
                @endif
                @foreach($pengumpulan->file_jawaban ?? [] as $idx => $f)
                <div class="d-flex align-items-center gap-3 p-3 border-bottom">
                    <div style="width:36px;height:36px;border-radius:9px;background:rgba(20,184,166,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="bi bi-file-earmark-fill" style="color:#0d9488;"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div style="font-weight:600;font-size:.83rem;">{{ $f['nama_asli'] }}</div>
                        <div style="font-size:.7rem;color:#5a7a7a;">{{ round($f['ukuran']/1024, 1) }} KB</div>
                    </div>
                    <a href="{{ route('mahasiswa.tugas.jawaban.download', [$tugas, $idx]) }}"
                       class="btn btn-sm" style="background:rgba(20,184,166,.1);color:#0d9488;border:1px solid rgba(20,184,166,.2);">
                        <i class="bi bi-download"></i>
                    </a>
                </div>
                @endforeach
                <div class="p-3 d-flex align-items-center justify-content-between flex-wrap gap-2" style="font-size:.78rem;color:#5a7a7a;">
                    <span>
                        <i class="bi bi-clock me-1"></i>{{ $pengumpulan->waktu_kumpul->format('d M Y, H:i') }}
                        @if($pengumpulan->isTerlambat())
                            <span class="badge-alpha ms-1">Terlambat</span>
                        @else
                            <span class="badge-hadir ms-1">Tepat Waktu</span>
                        @endif
                    </span>
                    {{-- Tombol Batalkan --}}
                    <form method="POST" action="{{ route('mahasiswa.tugas.batal', $tugas) }}"
                          onsubmit="return confirm('Yakin ingin membatalkan pengumpulan? File akan dihapus.')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:.75rem;">
                            <i class="bi bi-x-circle me-1"></i>Batalkan Pengumpulan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        @if(!$tugas->isOverdue())
        <div class="content-card" style="border-top:3px solid #d97706;">
            <div class="content-card-header">
                <i class="bi bi-arrow-repeat" style="color:#d97706;"></i>
                <span class="title">Kumpul Ulang</span>
            </div>
            <div class="content-card-body">
                <div class="alert alert-warning py-2 px-3 mb-3" style="font-size:.8rem;">
                    <i class="bi bi-info-circle me-1"></i>File lama akan diganti. Nilai akan di-reset.
                </div>
                @include('mahasiswa.tugas._form_upload')
            </div>
        </div>
        @endif

        {{-- Belum kumpul, deadline belum lewat --}}
        @elseif(!$tugas->isOverdue())
        <div class="content-card" style="border-top:3px solid #0d9488;">
            <div class="content-card-header">
                <i class="bi bi-upload" style="color:#0d9488;"></i>
                <span class="title">Kumpulkan Jawaban</span>
            </div>
            <div class="content-card-body">
                @include('mahasiswa.tugas._form_upload')
            </div>
        </div>

        {{-- Deadline lewat, belum pernah kumpul --}}
        @else
        <div class="content-card" style="border-top:3px solid #dc2626;">
            <div class="content-card-body text-center py-4">
                <i class="bi bi-lock-fill" style="color:#dc2626;font-size:2.5rem;display:block;margin-bottom:.75rem;"></i>
                <div style="font-weight:700;color:#b91c1c;font-size:1rem;">Deadline Sudah Lewat</div>
                <div style="font-size:.83rem;color:#5a7a7a;margin-top:.4rem;">Tidak dapat lagi mengumpulkan tugas ini.</div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
<script>
let selectedFiles = [];

function handleFileChange(input) {
    const newFiles = Array.from(input.files);
    newFiles.forEach(f => {
        if (!selectedFiles.find(x => x.name === f.name && x.size === f.size)) {
            selectedFiles.push(f);
        }
    });
    renderFileList();
    syncFileInput();
}

function removeFile(idx) {
    selectedFiles.splice(idx, 1);
    renderFileList();
    syncFileInput();
}

function renderFileList() {
    const box = document.getElementById('fileList');
    if (!box) return;
    box.innerHTML = '';
    const zone = document.getElementById('uploadZone');
    if (!selectedFiles.length) {
        if (zone) zone.querySelector('.zone-label').textContent = 'Pilih atau drag file ke sini';
        return;
    }
    if (zone) zone.querySelector('.zone-label').textContent = `${selectedFiles.length} file dipilih`;
    selectedFiles.forEach((f, i) => {
        const ext  = f.name.split('.').pop().toLowerCase();
        const icons = { pdf:'file-earmark-pdf-fill', doc:'file-earmark-word-fill', docx:'file-earmark-word-fill',
                        zip:'file-zip-fill', ppt:'file-earmark-slides-fill', pptx:'file-earmark-slides-fill',
                        xls:'file-earmark-spreadsheet-fill', xlsx:'file-earmark-spreadsheet-fill',
                        jpg:'file-earmark-image-fill', png:'file-earmark-image-fill' };
        const ico  = icons[ext] || 'file-earmark-fill';
        const size = f.size < 1048576 ? (f.size/1024).toFixed(1)+' KB' : (f.size/1048576).toFixed(1)+' MB';
        box.innerHTML += `
        <div class="file-item">
            <div style="width:34px;height:34px;border-radius:9px;background:rgba(20,184,166,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0d9488;">
                <i class="bi bi-${ico}"></i>
            </div>
            <div class="flex-grow-1">
                <div style="font-weight:600;font-size:.83rem;">${f.name}</div>
                <div style="font-size:.7rem;color:#5a7a7a;">${size}</div>
            </div>
            <button type="button" class="remove-btn" onclick="removeFile(${i})">
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </div>`;
    });
}

function syncFileInput() {
    const dt = new DataTransfer();
    selectedFiles.forEach(f => dt.items.add(f));
    const inputs = document.querySelectorAll('input[name="file_jawaban[]"]');
    inputs.forEach(i => i.files = dt.files);
}

// Drag & drop
const zone = document.getElementById('uploadZone');
if (zone) {
    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag'); });
    zone.addEventListener('dragleave', () => zone.classList.remove('drag'));
    zone.addEventListener('drop', e => {
        e.preventDefault(); zone.classList.remove('drag');
        Array.from(e.dataTransfer.files).forEach(f => {
            if (!selectedFiles.find(x => x.name===f.name)) selectedFiles.push(f);
        });
        renderFileList(); syncFileInput();
    });
}
</script>
@endsection