@extends('layouts.app')
@section('title', 'Manajemen 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: 3rem; font-weight: 900; line-height: 1; letter-spacing: -1.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); }
    
    .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; }
</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-end mb-5 gap-3">
        <div>
            <h1 class="text-massive mb-2" style="font-size: 2.5rem; color: var(--arn-dark);">Manajemen Tugas</h1>
            <div class="label-mono" style="color: var(--arn-teal);">Panel pengajaran dosen</div>
        </div>
        <a href="{{ route('dosen.tugas.create') }}" class="btn text-white fw-900 shadow-sm px-4" style="background: var(--arn-dark); height: 50px; border-radius: 12px; display: flex; align-items: center; text-decoration: none;">
            Buat tugas baru
        </a>
    </div>

    {{-- Statistik Cepat --}}
    @php
        $totalTugas = isset($tugasList) ? $tugasList->total() : 0;
        $terkumpul = 0;
        if(isset($tugasList)) {
            foreach($tugasList as $t) { $terkumpul += $t->pengumpulans->count(); }
        }
    @endphp

    <div class="row g-4 mb-5">
        <div class="col-6 col-md-4">
            <div class="card-modern p-4 h-100" style="border-top: 5px solid var(--arn-dark);">
                <div class="text-massive mb-2" style="color: var(--arn-dark); font-size: 2.2rem;">{{ $totalTugas }}</div>
                <div class="label-mono">Total tugas terbit</div>
            </div>
        </div>
        <div class="col-6 col-md-4">
            <div class="card-modern p-4 h-100" style="border-top: 5px solid var(--arn-teal);">
                <div class="text-massive mb-2" style="color: var(--arn-teal); font-size: 2.2rem;">{{ $terkumpul }}</div>
                <div class="label-mono">Total jawaban masuk</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 h-100" style="border-top: 5px solid #3b82f6;">
                <div class="text-massive mb-2" style="color: #3b82f6; font-size: 2.2rem;">{{ isset($matkulList) ? $matkulList->count() : 0 }}</div>
                <div class="label-mono">Mata kuliah aktif</div>
            </div>
        </div>
    </div>

    {{-- Filter Pencarian --}}
    @php
        $hariList = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
    @endphp

    <div class="card-modern p-4 mb-5 border-0 shadow-sm" style="background: #f8fafc;">
        <form method="GET" action="{{ route('dosen.tugas.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="label-mono mb-2 text-dark">Judul tugas</label>
                <input type="text" name="search" class="form-control fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px; background: #fff;" placeholder="Cari judul..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <label class="label-mono mb-2 text-dark">Mata kuliah</label>
                <select name="matkul_id" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px; background: #fff;">
                    <option value="">Semua mata kuliah</option>
                    @if(isset($matkulList))
                        @foreach($matkulList as $mk)
                            <option value="{{ $mk->id }}" {{ request('matkul_id') == $mk->id ? 'selected' : '' }}>
                                {{ $mk->nama }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-md-2">
                <label class="label-mono mb-2 text-dark">Hari</label>
                <select name="hari" class="form-select fw-bold border-0 shadow-sm" style="height: 50px; border-radius: 12px; background: #fff;">
                    <option value="">Semua hari</option>
                    @foreach($hariList as $h)
                        <option value="{{ $h }}" {{ request('hari') == $h ? 'selected' : '' }}>{{ $h }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <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;">
                    Terapkan
                </button>
                @if(request()->hasAny(['search','matkul_id','hari']))
                <a href="{{ route('dosen.tugas.index') }}" class="btn fw-900 shadow-sm px-4 d-flex align-items-center justify-content-center" style="background: #fff; border: 1px solid #e5e7eb; color: var(--arn-dark); height: 50px; border-radius: 12px; letter-spacing: 0.5px; text-decoration: none;">
                    Reset
                </a>
                @endif
            </div>
        </form>
    </div>

    {{-- Tabel Penugasan --}}
    <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">Judul tugas & mata kuliah</th>
                        <th>Tenggat waktu</th>
                        <th class="text-center">Terkumpul</th>
                        <th class="pe-4 text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tugasList ?? [] as $t)
                    <tr>
                        <td class="ps-4">
                            <div class="fw-900 text-dark" style="font-size: 0.95rem;">{{ $t->judul }}</div>
                            <div class="label-mono mt-1" style="font-size: 0.65rem;">{{ $t->mataKuliah->nama ?? '-' }}</div>
                        </td>
                        <td>
                            <div class="fw-900 text-dark" style="font-size: 0.9rem;">{{ \Carbon\Carbon::parse($t->deadline)->format('d/m/Y') }}</div>
                            <div class="fw-bold mt-1" style="font-size: 0.75rem; color: #64748b;">
                                Pukul {{ \Carbon\Carbon::parse($t->deadline)->format('H:i') }} wib
                            </div>
                        </td>
                        <td class="text-center">
                            <div class="fw-900" style="font-size: 1.2rem; color: var(--arn-teal);">
                                {{ $t->pengumpulans->count() }}
                            </div>
                            <div class="label-mono" style="font-size: 0.55rem;">mahasiswa</div>
                        </td>
                        <td class="pe-4 text-end">
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="{{ route('dosen.tugas.show', $t->id) }}" class="btn fw-900" style="background: #f8fafc; color: var(--arn-dark); border: 1px solid #cbd5e1; font-size: 0.75rem; border-radius: 8px; padding: 10px 20px; text-decoration: none;">Periksa</a>
                                <a href="{{ route('dosen.tugas.edit', $t->id) }}" class="btn fw-900 text-white" style="background: var(--arn-teal); border: 1px solid var(--arn-teal); font-size: 0.75rem; border-radius: 8px; padding: 10px 20px; text-decoration: none;">Edit</a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-5">
                            <h2 class="text-massive" style="color: #e5e7eb; font-size: 3rem;">Kosong</h2>
                            <p class="text-muted fw-bold">Belum ada tugas yang Anda buat.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    @if(isset($tugasList) && $tugasList->hasPages())
    <div class="d-flex justify-content-center mt-4">
        {{ $tugasList->links() }}
    </div>
    @endif
</div>
@endsection