@extends('layouts.guru')

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

@push('styles')
<style>
    @media (max-width: 1100px) {
        .tugas-page-grid {
            grid-template-columns: 1fr !important;
        }

        .tugas-form-row {
            flex-direction: column !important;
        }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<div class="page-header">
    <h1>Kelola Tugas & Assignment</h1>
    <p>Guru dapat memberikan tugas, melampirkan file materi tambahan, dan mengoreksi jawaban siswa.</p>
</div>

<!-- Stats Cards -->
<div class="stats-grid" style="margin-bottom: 24px;">
    <div class="stat-card">
        <div class="stat-icon bg-blue">
            <i class="fa-solid fa-tasks"></i>
        </div>
        <div class="stat-details">
            <h3>Total Tugas</h3>
            <p class="stat-value">{{ $totalTugas }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-green">
            <i class="fa-solid fa-circle-check"></i>
        </div>
        <div class="stat-details">
            <h3>Tugas Aktif</h3>
            <p class="stat-value">{{ $tugasAktif }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-orange">
            <i class="fa-solid fa-hourglass-half"></i>
        </div>
        <div class="stat-details">
            <h3>Menunggu Penilaian</h3>
            <p class="stat-value">{{ $menungguPenilaian }}</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-purple">
            <i class="fa-solid fa-circle-xmark"></i>
        </div>
        <div class="stat-details">
            <h3>Tugas Ditutup</h3>
            <p class="stat-value">{{ $tugasSelesai }}</p>
        </div>
    </div>
</div>

<div class="main-grid tugas-page-grid" style="grid-template-columns: 1fr 1fr; align-items: start; margin-top: 24px;">
    <!-- Kiri: Form Buat / Edit Tugas -->
    <div class="card">
        <div class="card-header">
            <h3>
                <i class="fa-solid fa-{{ $selectedTugas ? 'pen' : 'plus' }} text-primary"></i> 
                {{ $selectedTugas ? 'Edit Tugas' : 'Buat Tugas Baru' }}
            </h3>
        </div>
        <div class="card-body">
            <form action="{{ $selectedTugas ? route('guru.tugas.update', $selectedTugas) : route('guru.tugas.store') }}" method="POST" enctype="multipart/form-data" class="js-submit-once">
                @csrf
                @if($selectedTugas)
                    @method('PUT')
                @endif

                <div class="form-group mb-3">
                    <label for="judul" class="form-label" style="font-weight: 500;">Judul Tugas <span class="text-danger">*</span></label>
                    <input type="text" name="judul" id="judul" class="form-control" placeholder="Contoh: Latihan Pecahan Matematika" value="{{ old('judul', $selectedTugas?->judul) }}" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                </div>

                <div class="form-row mb-3 tugas-form-row" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="mata_pelajaran_id" class="form-label" style="font-weight: 500;">Mata Pelajaran <span class="text-danger">*</span></label>
                        <select name="mata_pelajaran_id" id="mata_pelajaran_id" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Mapel</option>
                            @foreach($mataPelajaran as $mapel)
                                <option value="{{ $mapel->id }}" @selected(old('mata_pelajaran_id', $selectedTugas?->mata_pelajaran_id) == $mapel->id)>{{ $mapel->nama_mapel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="kelas_id" class="form-label" style="font-weight: 500;">Kelas <span class="text-danger">*</span></label>
                        <select name="kelas_id" id="kelas_id" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                            <option value="">Pilih Kelas</option>
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}" @selected(old('kelas_id', $selectedTugas?->kelas_id) == $k->id)>Kelas {{ $k->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row mb-3 tugas-form-row" style="display: flex; gap: 16px;">
                    <div class="form-group" style="flex: 1;">
                        <label for="tanggal_mulai" class="form-label" style="font-weight: 500;">Tanggal Mulai <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="tanggal_mulai" id="tanggal_mulai" class="form-control" value="{{ old('tanggal_mulai', $selectedTugas?->tanggal_mulai ? $selectedTugas->tanggal_mulai->format('Y-m-d\TH:i') : '') }}" 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" style="flex: 1;">
                        <label for="deadline" class="form-label" style="font-weight: 500;">Batas Waktu Pengumpulan <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="deadline" id="deadline" class="form-control" value="{{ old('deadline', $selectedTugas?->deadline ? $selectedTugas->deadline->format('Y-m-d\TH:i') : '') }}" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="status" class="form-label" style="font-weight: 500;">Status <span class="text-danger">*</span></label>
                    <select name="status" id="status" class="form-control" required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 40px; box-sizing: border-box;">
                        <option value="Draft" @selected(old('status', $selectedTugas?->status) === 'Draft')>Draft (Sembunyikan)</option>
                        <option value="Aktif" @selected(old('status', $selectedTugas?->status) === 'Aktif')>Aktif (Tampil)</option>
                        <option value="Ditutup" @selected(old('status', $selectedTugas?->status) === 'Ditutup')>Ditutup (Selesai)</option>
                    </select>
                </div>

                <div class="form-group mb-3">
                    <label for="file_lampiran" class="form-label" style="font-weight: 500;">File Lampiran / Soal Tugas <span class="text-gray" style="font-size: 0.85rem; font-weight: normal;">(Opsional, PDF/Doc/Image)</span></label>
                    <div class="file-drop-area" style="position: relative; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 20px; text-align: center; background-color: #f8fafc; transition: all 0.2s ease;">
                        <i class="fa-solid fa-paperclip" style="font-size: 1.8rem; color: var(--text-gray); margin-bottom: 6px;"></i>
                        <p id="file-label" style="margin: 0; font-size: 0.9rem; color: var(--text-gray);">
                            @if($selectedTugas?->file_lampiran)
                                <strong>{{ $selectedTugas->file_lampiran }}</strong> (Pilih file baru jika ingin mengganti)
                            @else
                                Klik atau drag & drop file soal di sini
                            @endif
                        </p>
                        <input type="file" name="file_lampiran" id="file_lampiran" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label for="deskripsi" class="form-label" style="font-weight: 500;">Instruksi Tugas <span class="text-danger">*</span></label>
                    <textarea name="deskripsi" id="deskripsi" class="form-control" rows="4" placeholder="Tuliskan instruksi tugas secara detail untuk siswa..." required style="width:100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; resize: vertical; min-height: 100px;">{{ old('deskripsi', $selectedTugas?->deskripsi) }}</textarea>
                </div>

                <div style="display: flex; gap: 12px;">
                    @if($selectedTugas)
                        <a href="{{ route('guru.tugas.index') }}" class="btn btn-outline" style="flex: 1; height: 42px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; border-radius: 8px;">Batal</a>
                    @endif
                    <button type="submit" class="btn btn-primary js-submit-button" style="flex: 2; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; background-color: #2563eb; color: #fff;">
                        <i class="fa-solid fa-{{ $selectedTugas ? 'save' : 'paper-plane' }}"></i> 
                        <span>{{ $selectedTugas ? 'Simpan Perubahan' : 'Publikasikan Tugas' }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Kanan: Daftar Tugas -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fa-solid fa-list text-primary"></i> Daftar Tugas yang Dibuat</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="modern-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Judul Tugas</th>
                            <th>Mapel / Kelas</th>
                            <th>Batas Waktu</th>
                            <th>Pengumpulan</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tugasList as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td style="font-weight: 500;">{{ $item->judul }}</td>
                                <td>{{ $item->mataPelajaran?->nama_mapel }} <br><small class="text-gray">Kelas {{ $item->kelas?->nama_kelas }}</small></td>
                                <td>
                                    <span class="text-danger" style="font-weight: 500;">
                                        {{ $item->deadline->translatedFormat('d M Y, H:i') }} WIB
                                    </span>
                                </td>
                                <td style="text-align: center;">
                                    <span class="badge bg-light-blue text-blue" style="font-weight: 600; font-size: 0.9rem; padding: 4px 10px;">
                                        {{ $item->jumlah_pengumpulan ?? 0 }} Siswa
                                    </span>
                                </td>
                                <td>
                                    @if($item->status === 'Aktif')
                                        <span class="badge badge-aktif">Aktif</span>
                                    @elseif($item->status === 'Draft')
                                        <span class="badge badge-draft">Draft</span>
                                    @else
                                        <span class="badge bg-danger text-white">Ditutup</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="{{ route('guru.tugas.show', $item) }}" class="btn-icon btn-icon-view" title="Koreksi Tugas" style="display: inline-flex; align-items: center; justify-content: center; text-decoration: none;">
                                            <i class="fa-solid fa-clipboard-list"></i>
                                        </a>
                                        <a href="{{ route('guru.tugas.edit', $item) }}" class="btn-icon btn-icon-edit" title="Edit Tugas" style="display: inline-flex; align-items: center; justify-content: center; text-decoration: none;">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>
                                        <form action="{{ route('guru.tugas.destroy', $item) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus tugas ini? Semua pengumpulan siswa terkait akan ikut terhapus.')" style="display: inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-icon btn-icon-delete" title="Hapus Tugas">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" style="text-align: center; color: #64748b; padding: 20px;">Belum ada tugas yang dibuat.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle file upload styling
        const fileInput = document.getElementById('file_lampiran');
        const fileLabel = document.getElementById('file-label');
        
        if (fileInput) {
            fileInput.addEventListener('change', function() {
                if (this.files && this.files.length > 0) {
                    fileLabel.innerHTML = `<strong>${this.files[0].name}</strong>`;
                    fileLabel.style.color = 'var(--primary-color)';
                }
            });
        }

        document.querySelectorAll('.js-submit-once').forEach(function(form) {
            form.addEventListener('submit', function() {
                const button = form.querySelector('.js-submit-button');
                if (!button) {
                    return;
                }

                button.disabled = true;
                button.style.opacity = '0.75';
                button.style.cursor = 'not-allowed';
                button.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> <span>Menyimpan...</span>';
            });
        });
    });
</script>
@endpush