@extends('layouts.guru')

@section('title', 'Detail Tugas - SIPENA Guru')
@section('page_title', 'Detail Tugas')

@push('styles')
<style>
    /* Modal styling matching SIPENA guidelines */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        background-color: rgba(15, 23, 42, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-content {
        background-color: white;
        border-radius: var(--border-radius);
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .modal-content form {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .modal-header {
        padding: 16px 24px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }
    .modal-content .card-body {
        overflow-y: auto;
        min-height: 0;
    }
    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-dark);
    }
    .modal-header .close-btn {
        background: none;
        border: none;
        font-size: 1.25rem;
        color: var(--text-gray);
        cursor: pointer;
    }
    .modal-footer {
        padding: 16px 24px;
        background-color: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-shrink: 0;
    }
    .badge-none {
        background-color: #f1f5f9;
        color: #64748b;
    }
    .tugas-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 20px;
    }
    @media (max-width: 600px) {
        .tugas-info-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<!-- Back Link -->
<div style="margin-bottom: 20px;">
    <a href="{{ route('guru.tugas.index') }}" style="text-decoration: none; color: var(--primary-color); font-weight: 500;">
        <i class="fa-solid fa-arrow-left"></i> Kembali ke Daftar Tugas
    </a>
</div>

<!-- Page Header -->
<div class="page-header">
    <h1>Koreksi & Detail Tugas</h1>
    <p>Lihat detail instruksi tugas yang Anda buat serta beri nilai pengumpulan tugas siswa secara langsung.</p>
</div>

<!-- Grid Layout -->
<div class="main-grid" style="grid-template-columns: 1fr; align-items: start;">
    
    <!-- Bagian Detail Instruksi Tugas -->
    <div class="card mb-4">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3><i class="fa-solid fa-file-invoice text-primary"></i> Informasi & Instruksi Tugas</h3>
            <span class="badge {{ $tugas->status === 'Aktif' ? 'badge-aktif' : 'badge-draft' }}">
                Status: {{ ucfirst($tugas->status) }}
            </span>
        </div>
        <div class="card-body">
            <div class="tugas-info-grid">
                <div style="border-right: 1px solid #f1f5f9; padding-right: 16px;">
                    <p style="margin-bottom: 8px; color: var(--text-gray);">
                        <strong>Judul Tugas:</strong> <span style="color: var(--text-dark); display: block; font-size: 1.1rem; font-weight: 600; margin-top: 4px;">{{ $tugas->judul }}</span>
                    </p>
                    <p style="margin-bottom: 8px; color: var(--text-gray);">
                        <strong>Mata Pelajaran:</strong> <span style="color: var(--text-dark); display: block; font-weight: 500; margin-top: 4px;">{{ $tugas->mataPelajaran?->nama_mapel }}</span>
                    </p>
                    <p style="margin-bottom: 8px; color: var(--text-gray);">
                        <strong>Target Kelas:</strong> <span style="color: var(--text-dark); display: block; font-weight: 500; margin-top: 4px;">Kelas {{ $tugas->kelas?->nama_kelas }}</span>
                    </p>
                </div>
                <div style="padding-left: 16px;">
                    <p style="margin-bottom: 8px; color: var(--text-gray);">
                        <strong>Batas Waktu Pengumpulan:</strong> 
                        <span style="color: var(--danger); display: block; font-weight: 600; margin-top: 4px;">
                            <i class="fa-solid fa-clock"></i> {{ $tugas->deadline?->translatedFormat('d F Y, H:i') }} WIB
                        </span>
                    </p>
                    <p style="margin-bottom: 8px; color: var(--text-gray);">
                        <strong>Lampiran Soal / Pendukung:</strong> 
                        @if($tugas->file_lampiran)
                            <a href="{{ asset('storage/tugas/' . $tugas->file_lampiran) }}" target="_blank" class="btn btn-outline w-100 mt-1" style="text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px;">
                                <i class="fa-solid fa-file-arrow-down"></i> Unduh Lampiran Soal
                            </a>
                        @else
                            <span style="color: var(--text-gray); display: block; font-style: italic; margin-top: 4px;">Tidak melampirkan file.</span>
                        @endif
                    </p>
                </div>
            </div>

            <div style="border-top: 1px solid #f1f5f9; padding-top: 16px;">
                <h4 style="margin-bottom: 8px; font-weight: 600;"><i class="fa-solid fa-info-circle text-primary"></i> Instruksi Tugas:</h4>
                <div style="background-color: #f8fafc; border-radius: 8px; padding: 16px; border: 1px solid #e2e8f0; white-space: pre-line; color: var(--text-dark); line-height: 1.5;">{{ $tugas->deskripsi }}</div>
            </div>
        </div>
    </div>

    <!-- Bagian Daftar Pengumpulan Siswa -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fa-solid fa-graduation-cap text-primary"></i> Daftar Pengumpulan Tugas Siswa</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Siswa</th>
                            <th>Tanggal Kumpul</th>
                            <th>File Jawaban</th>
                            <th>Status Penilaian</th>
                            <th>Nilai</th>
                            <th>Feedback Guru</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($submissions as $kumpul)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td style="font-weight: 500;">{{ $kumpul->siswa?->name }}</td>
                                <td>
                                    @if($kumpul->tanggal_pengumpulan && $kumpul->tanggal_pengumpulan->gt($tugas->deadline))
                                        <span class="text-danger" style="font-weight: 500;" title="Kumpul Terlambat">
                                            {{ $kumpul->tanggal_pengumpulan->translatedFormat('d M Y, H:i') }} <br>
                                            <small><i class="fa-solid fa-triangle-exclamation"></i> Terlambat</small>
                                        </span>
                                    @else
                                        <span style="color: var(--text-dark);">
                                            {{ $kumpul->tanggal_pengumpulan?->translatedFormat('d M Y, H:i') ?? '-' }} WIB
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($kumpul->file_jawaban)
                                        <a href="{{ route('guru.tugas.pengumpulan.preview', ['tugas' => $tugas->id, 'pengumpulan' => $kumpul->id]) }}" target="_blank" style="text-decoration: none; color: var(--primary-color); display: inline-flex; align-items: center; gap: 4px;">
                                            <i class="fa-solid fa-file-lines" style="color: #2563eb;"></i> Lihat Jawaban
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @if($kumpul->nilai !== null)
                                        <span class="badge badge-hadir">Sudah Dinilai</span>
                                    @else
                                        <span class="badge badge-alpha">Belum Dinilai</span>
                                    @endif
                                </td>
                                <td style="text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--primary-color);">
                                    {{ $kumpul->nilai ?? '-' }}
                                </td>
                                <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    {{ $kumpul->feedback_guru ?? '-' }}
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button type="button" class="btn-icon btn-icon-view" title="Koreksi & Beri Nilai" onclick="openModal('{{ addslashes($kumpul->siswa?->name) }}', '{{ addslashes($kumpul->catatan_siswa) }}', '{{ $kumpul->file_jawaban ? route('guru.tugas.pengumpulan.preview', ['tugas' => $tugas->id, 'pengumpulan' => $kumpul->id]) : '#' }}', '{{ route('guru.tugas.grade', ['tugas' => $tugas->id, 'pengumpulan' => $kumpul->id]) }}', '{{ $kumpul->nilai }}', '{{ addslashes($kumpul->feedback_guru) }}')">
                                            <i class="fa-solid fa-file-circle-check"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" style="text-align: center; color: #64748b; padding: 20px;">Belum ada siswa yang mengumpulkan tugas ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- Modal Koreksi & grading -->
<div class="modal-overlay" id="koreksiModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Koreksi Jawaban Siswa</h3>
            <button type="button" class="close-btn" onclick="closeModal()"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form id="grade-form" action="" method="POST">
            @csrf
            <div class="card-body" style="padding: 20px;">
                <p style="margin-bottom: 8px; color: var(--text-gray);">
                    <strong>Nama Siswa:</strong> <span id="modal-siswa-name" style="color: var(--text-dark); font-weight: 500;">-</span>
                </p>
                <p style="margin-bottom: 16px; color: var(--text-gray);">
                    <strong>Catatan Siswa:</strong> <br>
                    <span id="modal-catatan" style="color: var(--text-dark); font-style: italic; white-space: pre-line;">-</span>
                </p>
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px;">File Jawaban Siswa:</label>
                    <a id="modal-download-link" href="#" class="btn btn-outline w-100" style="text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px;" target="_blank">
                        <i class="fa-solid fa-download"></i> Unduh File Jawaban Siswa
                    </a>
                </div>
                <div class="form-group">
                    <label for="nilai">Beri Nilai (0 - 100)</label>
                    <input type="number" id="modal-nilai" name="nilai" class="form-control" min="0" max="100" placeholder="Contoh: 90" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                </div>
                <div class="form-group">
                    <label for="feedback_guru">Feedback / Komentar Guru</label>
                    <textarea id="modal-feedback" name="feedback_guru" class="form-control" placeholder="Bagus sekali, kerjamu rapi dan jawaban tepat!" style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; resize: vertical; min-height: 80px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal()">Batal</button>
                <button type="submit" class="btn btn-primary" style="height: 40px; border-radius: 6px; border: none; cursor: pointer; background-color: #2563eb; color: #fff; padding: 0 20px; font-weight: 600;"><i class="fa-solid fa-check"></i> Simpan Penilaian</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openModal(siswaName, catatan, downloadUrl, actionUrl, nilai, feedback) {
        document.getElementById('modal-siswa-name').innerText = siswaName;
        document.getElementById('modal-catatan').innerText = catatan ? catatan : 'Tidak ada catatan siswa.';
        document.getElementById('modal-download-link').href = downloadUrl;
        document.getElementById('grade-form').action = actionUrl;
        document.getElementById('modal-nilai').value = nilai ? nilai : '';
        document.getElementById('modal-feedback').value = feedback ? feedback : '';
        document.getElementById('koreksiModal').classList.add('show');
    }

    function closeModal() {
        document.getElementById('koreksiModal').classList.remove('show');
    }
</script>
@endpush