@extends('layouts.siswa.app')

@section('title', 'Tugas')

@push('styles')
<style>
    .page-title {
        font-size: 22px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 24px;
    }

    /* TABS */
    .tab-nav {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 0;
    }

    .tab-btn {
        background: none;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        color: #94a3b8;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        transition: all 0.2s;
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tab-btn.active {
        color: #2b8ef3;
        border-bottom-color: #2b8ef3;
    }

    .tab-btn:hover:not(.active) { color: #475569; }

    .tab-count {
        background: #e6f0ff;
        color: #2b8ef3;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 99px;
    }

    .tab-btn.active .tab-count {
        background: #2b8ef3;
        color: white;
    }

    /* TAB PANELS */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* TUGAS CARD */
    .tugas-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .tugas-card {
        background: #fff;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        color: inherit;
        transition: box-shadow 0.2s, transform 0.2s;
        border-left: 4px solid #e2e8f0;
    }

    .tugas-card:hover {
        box-shadow: 0 4px 20px rgba(43,142,243,0.12);
        transform: translateX(4px);
        color: inherit;
    }

    .tugas-card.status-belum    { border-left-color: #2b8ef3; }
    .tugas-card.status-terlambat { border-left-color: #ef4444; }
    .tugas-card.status-selesai  { border-left-color: #22c55e; }

    .tugas-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .status-belum    .tugas-icon { background: #e6f0ff; }
    .status-terlambat .tugas-icon { background: #fee2e2; }
    .status-selesai  .tugas-icon { background: #dcfce7; }

    .tugas-info { flex: 1; }

    .tugas-judul {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px;
    }

    .tugas-meta {
        font-size: 12px;
        color: #94a3b8;
        margin: 0;
    }

    .tugas-right {
        text-align: right;
        flex-shrink: 0;
    }

    .deadline-label {
        font-size: 12px;
        color: #94a3b8;
        margin: 0 0 4px;
    }

    .deadline-val {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin: 0;
    }

    .status-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 99px;
        margin-top: 6px;
    }

    .badge-belum     { background: #e6f0ff; color: #2b8ef3; }
    .badge-terlambat { background: #fee2e2; color: #ef4444; }
    .badge-selesai   { background: #dcfce7; color: #16a34a; }

    .exp-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fef9c3;
        color: #b45309;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 99px;
        margin-top: 6px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }

    .empty-icon { font-size: 48px; margin-bottom: 12px; }

    /* ALERT */
    .alert-success {
        background: #dcfce7;
        color: #166534;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-weight: 500;
        font-size: 14px;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-weight: 500;
        font-size: 14px;
    }
</style>
@endpush

@section('content')

<h1 class="page-title">📋 Tugas</h1>

@if(session('success'))
    <div class="alert-success">✅ {{ session('success') }}</div>
@endif

@if(session('error'))
    <div class="alert-error">❌ {{ session('error') }}</div>
@endif

{{-- TABS --}}
<div class="tab-nav">
    <button class="tab-btn active" onclick="switchTab('belum', this)">
        Belum Dikerjakan
        <span class="tab-count">{{ $tugasBelum->count() }}</span>
    </button>
    <button class="tab-btn" onclick="switchTab('terlambat', this)">
        Terlambat
        <span class="tab-count">{{ $tugasTerlambat->count() }}</span>
    </button>
    <button class="tab-btn" onclick="switchTab('selesai', this)">
        Sudah Dikumpulkan
        <span class="tab-count">{{ $tugasSelesai->count() }}</span>
    </button>
</div>

{{-- TAB: BELUM --}}
<div id="tab-belum" class="tab-panel active">
    @if($tugasBelum->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">🎉</div>
            <p>Semua tugas sudah dikerjakan!</p>
        </div>
    @else
        <div class="tugas-list">
            @foreach($tugasBelum as $tugas)
                <a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
                   class="tugas-card status-belum">
                    <div class="tugas-icon">📋</div>
                    <div class="tugas-info">
                        <p class="tugas-judul">{{ $tugas['judul'] }}</p>
                        <p class="tugas-meta">{{ $tugas['nama_mapel'] }} &bull; {{ $tugas['nama_guru'] }}</p>
                    </div>
                    <div class="tugas-right">
                        <p class="deadline-label">Deadline</p>
                        <p class="deadline-val">{{ $tugas['deadline']->format('d M Y H:i') }}</p>
                        <span class="status-badge badge-belum">Belum</span>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</div>

{{-- TAB: TERLAMBAT --}}
<div id="tab-terlambat" class="tab-panel">
    @if($tugasTerlambat->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">✅</div>
            <p>Tidak ada tugas terlambat!</p>
        </div>
    @else
        <div class="tugas-list">
            @foreach($tugasTerlambat as $tugas)
                <a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
                   class="tugas-card status-terlambat">
                    <div class="tugas-icon">⏰</div>
                    <div class="tugas-info">
                        <p class="tugas-judul">{{ $tugas['judul'] }}</p>
                        <p class="tugas-meta">{{ $tugas['nama_mapel'] }} &bull; {{ $tugas['nama_guru'] }}</p>
                    </div>
                    <div class="tugas-right">
                        <p class="deadline-label">Deadline lewat</p>
                        <p class="deadline-val">{{ $tugas['deadline']->format('d M Y H:i') }}</p>
                        <span class="status-badge badge-terlambat">Terlambat</span>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</div>

{{-- TAB: SELESAI --}}
<div id="tab-selesai" class="tab-panel">
    @if($tugasSelesai->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">📭</div>
            <p>Belum ada tugas yang dikumpulkan.</p>
        </div>
    @else
        <div class="tugas-list">
            @foreach($tugasSelesai as $tugas)
                <a href="{{ route('siswa.tugas.show', $tugas['id_tugas']) }}"
                   class="tugas-card status-selesai">
                    <div class="tugas-icon">✅</div>
                    <div class="tugas-info">
                        <p class="tugas-judul">{{ $tugas['judul'] }}</p>
                        <p class="tugas-meta">{{ $tugas['nama_mapel'] }} &bull; {{ $tugas['nama_guru'] }}</p>
                    </div>
                    <div class="tugas-right">
                        <span class="status-badge badge-selesai">Dikumpulkan</span>
                        @if($tugas['exp'] > 0)
                            <br>
                            <span class="exp-badge">⭐ {{ $tugas['exp'] }} EXP</span>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
function switchTab(name, btn) {
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
}
</script>
@endpush