@extends('siswa.layouts.app')

@section('title', 'Tugas')

@push('styles')
<style>
    .page-title {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .tab-nav {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tab-nav::-webkit-scrollbar { display: none; }

    .tab-btn {
        background: none;
        border: none;
        padding: 10px 14px;
        font-size: 13px;
        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: 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .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 7px;
        border-radius: 99px;
    }

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

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .tugas-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tugas-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px 18px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 14px;
        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: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        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; min-width: 0; }

    .tugas-judul {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tugas-meta {
        font-size: 12px;
        color: #94a3b8;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

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

    .deadline-val {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
        margin: 0;
        white-space: nowrap;
    }

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

    .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: 5px;
    }

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

    .empty-state .empty-icon {
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
    }

    .alert-success {
        background: #dcfce7;
        color: #166534;
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 16px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border-radius: 12px;
        padding: 12px 16px;
        margin-bottom: 16px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Modal Badge */
    .badge-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
        padding: 16px;
        box-sizing: border-box;
    }

    .badge-modal-overlay.active { display: flex; }

    .badge-modal {
        background: white;
        border-radius: 24px;
        padding: 30px 24px 24px;
        max-width: 380px;
        width: 100%;
        text-align: center;
        animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }

    @keyframes popIn {
        from { transform: scale(0.7); opacity: 0; }
        to   { transform: scale(1);   opacity: 1; }
    }

    .badge-modal-label {
        font-size: 12px;
        font-weight: 700;
        color: #7c3aed;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .badge-modal-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 24px;
    }

    .badge-modal-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .badge-modal-icon {
        width: 100%;
        max-width: 180px;
        height: auto;
        object-fit: contain;
        margin-bottom: 14px;
    }

    .badge-modal-info-nama {
        font-size: 16px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .badge-modal-info-desc { font-size: 13px; color: #64748b; }

    .badge-modal-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 12px 32px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        width: 100%;
        transition: opacity 0.2s;
    }

    .badge-modal-btn:hover { opacity: 0.9; }

    @media (max-width: 480px) {
        .tugas-card { padding: 12px 14px; gap: 10px; }
        .tugas-icon { width: 38px; height: 38px; }
        .tugas-right { display: none; }
    }
</style>
@endpush

@section('content')

@if(session('badge_baru') && session('badge_baru')->isNotEmpty())
<div class="badge-modal-overlay active" id="badgeModal">
    <div class="badge-modal">
        <div class="badge-modal-label">Badge Baru Diraih!</div>
        <div class="badge-modal-list">
            @foreach(session('badge_baru') as $b)
            <div class="badge-modal-item">
                <img src="{{ asset($b->icon_badge) }}" alt="{{ $b->nama_badge }}" class="badge-modal-icon">
                <div class="badge-modal-info-nama">{{ $b->nama_badge }}</div>
                <div class="badge-modal-info-desc">{{ $b->deskripsi }}</div>
            </div>
            @endforeach
        </div>
        <button class="badge-modal-btn" onclick="document.getElementById('badgeModal').classList.remove('active')">
            Sip, lanjut! 🚀
        </button>
    </div>
</div>
@endif

<h1 class="page-title">
    <img src="{{ asset('images/icon/siswat/buku1.png') }}" alt="Ikon tugas" class="icon-md">
    Tugas
</h1>

@if(session('success'))
    <div class="alert-success">
        <img src="{{ asset('images/icon/siswat/v.png') }}" alt="Berhasil" class="icon-sm">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="alert-error">
        <img src="{{ asset('images/icon/siswat/x.png') }}" alt="Gagal" class="icon-sm">
        {{ session('error') }}
    </div>
@endif

<div class="tab-nav">
    <button class="tab-btn active" onclick="switchTab('belum', this)">
        Belum
        <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)">
        Dikumpulkan
        <span class="tab-count">{{ $tugasSelesai->count() }}</span>
    </button>
</div>

<div id="tab-belum" class="tab-panel active">
    @if($tugasBelum->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">
                <img src="{{ asset('images/icon/siswat/confetti.png') }}" alt="Semua selesai" style="width:80px;">
            </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">
                        <img src="{{ asset('images/icon/siswat/buku1.png') }}" alt="Tugas" class="icon-md">
                    </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>

<div id="tab-terlambat" class="tab-panel">
    @if($tugasTerlambat->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">
                <img src="{{ asset('images/icon/siswat/v.png') }}" alt="Tidak ada" style="width:80px;">
            </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">
                        <img src="{{ asset('images/icon/siswat/alarm.png') }}" alt="Terlambat" class="icon-md">
                    </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>

<div id="tab-selesai" class="tab-panel">
    @if($tugasSelesai->isEmpty())
        <div class="empty-state">
            <div class="empty-icon">
                <img src="{{ asset('images/icon/siswat/mailbox.png') }}" alt="Kosong" style="width:80px;">
            </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">
                        <img src="{{ asset('images/icon/siswat/v.png') }}" alt="Selesai" class="icon-md">
                    </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">
                                <img src="{{ asset('images/icon/siswat/star.png') }}" alt="EXP" class="icon-sm">
                                {{ $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