@extends('layouts.app')
@section('title', 'Detail 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-teal-light: #f0fdfa; --arn-dark: #111827; }
    
    .content-inner { font-family: 'Plus Jakarta Sans', sans-serif; background: #fcfdfd; min-height: 100vh; }
    .text-massive { font-size: 2.8rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; color: var(--arn-dark); }
    .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.72rem; 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); }
    
    .table-container { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; }
    .table-teal th { 
        background-color: var(--arn-teal) !important; 
        color: #ffffff !important; 
        font-size: 0.85rem; 
        font-weight: 800; 
        padding: 16px 24px; 
        border: none; 
    }
    .table-teal td { padding: 16px 24px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }

    .nilai-badge { font-size: 1.6rem; font-weight: 900; line-height: 1; display: inline-block; }
    .nilai-a { color: #15803d; }
    .nilai-b { color: #0d9488; }
    .nilai-c { color: #d97706; }
    .nilai-d { color: #dc2626; }
    
    .file-link { color: #0d9488; text-decoration: none; font-weight: 800; }
    .file-link:hover { color: #0f766e; text-decoration: underline; }
</style>

<div class="content-inner p-4 p-md-5">
    
    {{-- Header --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-start mb-5 gap-3">
        <div>
            <div class="label-mono mb-2" style="color: var(--arn-teal);">Detail Penugasan</div>
            <h1 class="text-massive mb-2">{{ $tugas->judul }}</h1>
            <div class="fw-bold text-muted mt-3 d-flex flex-wrap gap-3">
                <span style="background: #f1f5f9; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; color: var(--arn-dark);">
                    Mata Kuliah: {{ $tugas->mataKuliah->nama ?? '-' }}
                </span>
                <span style="background: {{ $tugas->isOverdue() ? '#fef2f2' : '#f0fdf4' }}; color: {{ $tugas->isOverdue() ? '#ef4444' : '#15803d' }}; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem;">
                    Tenggat: {{ $tugas->deadline->format('d M Y, H:i') }} WIB 
                    {{ $tugas->isOverdue() ? '(Sudah ditutup)' : '('.$tugas->sisaWaktu().')' }}
                </span>
            </div>
        </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); border-radius: 12px; height: 50px; display: flex; align-items: center; text-decoration: none;">
            Kembali
        </a>
    </div>

    @if(session('success'))
    <div class="p-3 mb-4 fw-bold" style="background: #ecfdf5; color: #10b981; border-radius: 12px; border: 1px solid #a7f3d0;">
        {{ session('success') }}
    </div>
    @endif

    {{-- Kartu Statistik --}}
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 shadow-sm border-0" style="border-top: 5px solid var(--arn-dark);">
                <div class="text-massive mb-2" style="color: var(--arn-dark); font-size: 2.2rem;">{{ $sudahKumpul }}</div>
                <div class="label-mono">Sudah mengumpulkan</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 shadow-sm border-0" style="border-top: 5px solid var(--arn-teal);">
                <div class="text-massive mb-2" style="color: var(--arn-teal); font-size: 2.2rem;">{{ $sudahDinilai }}</div>
                <div class="label-mono">Sudah dinilai</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 shadow-sm border-0" style="border-top: 5px solid #f59e0b; background: #fffbeb;">
                <div class="text-massive mb-2" style="color: #d97706; font-size: 2.2rem;">{{ $sudahKumpul - $sudahDinilai }}</div>
                <div class="label-mono" style="color: #b45309;">Belum dinilai</div>
            </div>
        </div>
    </div>

    {{-- Deskripsi & File Soal --}}
    <div class="row g-4 mb-5">
        @if($tugas->deskripsi)
        <div class="col-md-7">
            <div class="card-modern p-4 p-lg-5 h-100 shadow-sm border-0" style="background: #f8fafc;">
                <h5 class="text-heading mb-3">Deskripsi tugas</h5>
                <div class="fw-bold" style="white-space: pre-line; font-size: 0.95rem; line-height: 1.8; color: #334155;">
                    {{ $tugas->deskripsi }}
                </div>
            </div>
        </div>
        @endif

        @if($tugas->file_soal && count($tugas->file_soal) > 0)
        <div class="{{ $tugas->deskripsi ? 'col-md-5' : 'col-12' }}">
            <div class="card-modern p-4 h-100 shadow-sm border-0">
                <h5 class="text-heading mb-4">Lampiran soal ({{ count($tugas->file_soal) }})</h5>
                <div class="d-flex flex-column gap-3">
                    @foreach($tugas->file_soal as $idx => $f)
                    <div class="d-flex align-items-center justify-content-between p-3 rounded-3" style="background: var(--arn-teal-light); border: 1px solid #ccfbf1;">
                        <div class="text-truncate me-3">
                            <a href="{{ route('dosen.tugas.soal.download', [$tugas, $idx]) }}" target="_blank" class="file-link" title="Lihat Soal">
                                {{ $f['nama_asli'] }}
                            </a>
                        </div>
                        <span class="fw-900" style="font-size: 0.7rem; color: var(--arn-teal); flex-shrink: 0;">
                            {{ round($f['ukuran']/1024, 1) }} KB
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>

    {{-- Tabel Pengumpulan --}}
    <div class="d-flex justify-content-between align-items-end mb-3">
        <h5 class="text-heading m-0">Pengumpulan mahasiswa</h5>
        <span class="badge" style="background: #f3f4f6; color: var(--arn-dark); font-weight: 800; padding: 6px 12px; border-radius: 6px;">{{ $pengumpulans->total() }} masuk</span>
    </div>

    <div class="table-container shadow-sm mb-4">
        <div class="table-responsive">
            <table class="table table-teal mb-0">
                <thead>
                    <tr>
                        <th class="ps-4">Mahasiswa</th>
                        <th>Waktu kumpul</th>
                        <th>File jawaban</th>
                        <th style="width: 20%;">Catatan dosen</th>
                        <th class="text-center">Nilai</th>
                        <th class="pe-4 text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengumpulans as $i => $p)
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 44px; height: 44px; border-radius: 12px; background: var(--arn-teal); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex-shrink: 0;">
                                    {{ strtoupper(substr($p->user->name, 0, 2)) }}
                                </div>
                                <div>
                                    <div class="fw-900 text-dark" style="font-size: 0.95rem;">{{ $p->user->name }}</div>
                                    <div class="label-mono mt-1" style="font-size: 0.65rem;">{{ $p->user->nim_nip ?? '-' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="fw-900 text-dark" style="font-size: 0.85rem;">{{ $p->waktu_kumpul->format('d M Y') }}</div>
                            <div class="fw-bold mt-1" style="font-size: 0.75rem; color: #64748b;">
                                Pukul {{ $p->waktu_kumpul->format('H:i') }}
                                @if($p->waktu_kumpul->gt($tugas->deadline))
                                    <span class="ms-1 px-2 py-1 rounded text-white" style="background: #ef4444; font-size: 0.6rem;">Terlambat</span>
                                @else
                                    <span class="ms-1 px-2 py-1 rounded" style="background: #f0fdf4; color: #15803d; border: 1px solid #15803d; font-size: 0.6rem;">Tepat waktu</span>
                                @endif
                            </div>
                        </td>
                        <td>
                            @if($p->file_jawaban && count($p->file_jawaban) > 0)
                                @foreach($p->file_jawaban as $idx => $f)
                                <div class="mb-1 text-truncate" style="max-width: 150px;">
                                    <a href="{{ route('dosen.tugas.jawaban.download', [$tugas, $p, $idx]) }}" target="_blank" class="file-link" style="font-size: 0.8rem;" title="Lihat: {{ $f['nama_asli'] }}">
                                        {{ $f['nama_asli'] }}
                                    </a>
                                </div>
                                @endforeach
                            @else
                                <span class="fw-bold" style="color: #94a3b8; font-size: 0.8rem;">Tidak ada file</span>
                            @endif
                        </td>
                        <td>
                            {{-- PERBAIKAN BUG UTAMA: Menampilkan $p->catatan_dosen --}}
                            @if($p->catatan_dosen)
                                <div class="fw-bold" style="font-size: 0.8rem; color: #374151; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;" title="{{ $p->catatan_dosen }}">
                                    {{ $p->catatan_dosen }}
                                </div>
                            @else
                                <span class="fw-bold" style="color: #cbd5e1; font-size: 0.8rem;">Belum ada catatan</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($p->nilai !== null)
                                @php $cls = $p->nilai >= 85 ? 'nilai-a' : ($p->nilai >= 70 ? 'nilai-b' : ($p->nilai >= 55 ? 'nilai-c' : 'nilai-d')); @endphp
                                <span class="nilai-badge {{ $cls }}">{{ $p->nilai }}</span>
                            @else
                                <span class="label-mono" style="color: #cbd5e1;">-</span>
                            @endif
                        </td>
                        <td class="pe-4 text-end">
                            <button class="btn fw-900" style="background: {{ $p->nilai !== null ? '#f8fafc' : 'var(--arn-teal)' }}; color: {{ $p->nilai !== null ? 'var(--arn-dark)' : 'white' }}; border: 1px solid {{ $p->nilai !== null ? '#cbd5e1' : 'var(--arn-teal)' }}; font-size: 0.75rem; border-radius: 8px; padding: 10px 20px;" 
                                    onclick="openNilai({{ $p->id }}, '{{ addslashes($p->user->name) }}', {{ $p->nilai ?? 'null' }}, `{{ addslashes($p->catatan_dosen ?? '') }}`)">
                                {{ $p->nilai !== null ? 'Ubah nilai' : 'Beri nilai' }}
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <h2 class="text-massive" style="color: #e5e7eb; font-size: 3rem;">Kosong</h2>
                            <p class="text-muted fw-bold mt-2">Belum ada mahasiswa yang mengumpulkan tugas ini.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    @if($pengumpulans->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $pengumpulans->links() }}
    </div>
    @endif
</div>

{{-- Modal Nilai Tanpa Ikon --}}
<div class="modal fade" id="nilaiModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
            <div class="modal-header border-0 pb-0 pt-4 px-4">
                <div>
                    <h5 class="text-heading mb-1">Beri nilai</h5>
                    <div id="nilaiNama" class="fw-bold" style="font-size: 0.85rem; color: #64748b;"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            
            <form id="nilaiForm" method="POST" action="">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-4">
                        <label class="label-mono mb-2 text-dark">NILAI (0 – 100)</label>
                        <input type="number" name="nilai" id="nilaiInput" class="form-control fw-bold border-0 shadow-sm" style="height: 55px; border-radius: 12px; background: #f8fafc; font-size: 1.2rem; text-align: center;" min="0" max="100" step="0.5" required>
                        <div id="gradeIndicator" class="text-center mt-3" style="font-size: 0.85rem; font-weight: 900;"></div>
                    </div>
                    <div>
                        <label class="label-mono mb-2 text-dark">CATATAN DOSEN</label>
                        <textarea name="catatan_dosen" id="catatanInput" class="form-control fw-bold border-0 shadow-sm" style="border-radius: 12px; background: #f8fafc; padding: 15px;" rows="4" placeholder="Tuliskan catatan, masukan, atau perbaikan untuk mahasiswa..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 px-4 pt-0">
                    <button type="button" class="btn fw-900 shadow-sm px-4" style="background: #fff; border: 1px solid #e5e7eb; color: var(--arn-dark); height: 50px; border-radius: 12px;" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn text-white fw-900 shadow-sm flex-grow-1" style="background: var(--arn-teal); height: 50px; border-radius: 12px; letter-spacing: 0.5px;">Simpan nilai</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
let modalInstance = null;

function openNilai(id, nama, nilai, catatan) {
    document.getElementById('nilaiForm').action = `/dosen/nilai/${id}`;
    
    document.getElementById('nilaiNama').textContent = nama;
    document.getElementById('nilaiInput').value   = nilai !== null ? nilai : '';
    document.getElementById('catatanInput').value = catatan !== null ? catatan : '';
    updateGrade(nilai);
    
    const modalEl = document.getElementById('nilaiModal');
    if (!modalInstance) {
        document.body.appendChild(modalEl); 
        modalInstance = new bootstrap.Modal(modalEl);
    }
    
    modalInstance.show();
}

document.getElementById('nilaiInput').addEventListener('input', function() { 
    updateGrade(parseFloat(this.value)); 
});

function updateGrade(val) {
    const box = document.getElementById('gradeIndicator');
    if (val === null || val === '' || isNaN(val)) { box.textContent = ''; return; }
    
    if (val >= 85)      box.innerHTML = '<span style="color:#15803d;">A — SANGAT BAIK</span>';
    else if (val >= 70) box.innerHTML = '<span style="color:#0d9488;">B — BAIK</span>';
    else if (val >= 55) box.innerHTML = '<span style="color:#d97706;">C — CUKUP</span>';
    else if (val >= 40) box.innerHTML = '<span style="color:#dc2626;">D — KURANG</span>';
    else                box.innerHTML = '<span style="color:#7f1d1d;">E — TIDAK LULUS</span>';
}
</script>
@endsection