@extends('admin.layouts.app')

@section('title', 'History Challenge')

@section('content')

<style>
.page-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    margin-top: -10px;
}
@media (min-width: 769px) {
    .page-title { font-size: 30px; margin-top: -20px; margin-bottom: 10px; }
}

.custom-card {
    background: white;
    border-radius: 16px;
    border: 2px solid #e5e5e5;
    padding: 14px;
}
@media (min-width: 769px) { .custom-card { border-radius: 20px; padding: 25px; } }

.table-header { background: #a5e6ba; }

/* Top bar */
.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* Dropdown filter guru */
.filter-guru-select {
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #374151;
    background: white;
    outline: none;
    cursor: pointer;
    min-width: 160px;
}
.filter-guru-select:focus { border-color: #a5e6ba; }

/* Search box */
.search-box {
    background: #a5e6ba;
    border-radius: 30px;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 280px;
}
.search-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}
.search-box button { border: none; background: none; padding: 0; cursor: pointer; }

/* Total badge */
.total-text {
    margin-left: auto;
    font-size: 12px;
}

/* Reset link */
.btn-reset {
    color: #ef4444;
    border: none;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
}
.btn-reset:hover { background: #fecaca; color: #dc2626; }

.action-icon { width: 20px; cursor: pointer; margin: 0 3px; }
.inline-icon { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }

.deadline-badge {
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.deadline-aktif { background: #dcfce7; color: #16a34a; }
.deadline-lewat { background: #fee2e2; color: #ef4444; }

.kelas-chip {
    display: inline-block; background: #e6f0ff; color: #1d4ed8;
    font-size: 11px; font-weight: 600; padding: 2px 7px;
    border-radius: 99px; margin: 1px;
}
.soal-count {
    background: #f0fdf4; color: #16a34a;
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 99px;
    white-space: nowrap;
}
.durasi-badge {
    background: #ede9fe; color: #5b21b6;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}

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

.table-responsive-custom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 700px; }
</style>

<h3 class="page-title">HISTORY CHALLENGE</h3>

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

<div class="custom-card">

    {{-- TOP BAR: dropdown | search | total --}}
    <form method="GET">
        <div class="top-bar">

            {{-- Dropdown Filter Guru --}}
            <select name="id_guru" class="filter-guru-select" onchange="this.form.submit()">
                <option value="">Semua Guru</option>
                @foreach($guruList as $guru)
                    <option value="{{ $guru->id_guru }}"
                        {{ request('id_guru') == $guru->id_guru ? 'selected' : '' }}>
                        {{ $guru->nama }} 
                    </option>
                @endforeach
            </select>

            {{-- Search Judul Challenge --}}
            <div class="search-box">
                <input type="text" name="search"
                       placeholder="Cari judul challenge..."
                       value="{{ request('search') }}">
                <button type="submit">
                    <img src="{{ asset('images/icon/main/search.png') }}" class="inline-icon" alt="Cari">
                </button>
            </div>

            {{-- Reset (muncul jika ada filter aktif) --}}
            @if(request('search') || request('guru_id'))
                <a href="{{ route('admin.challenge.index') }}" class="btn-reset">✕ Reset</a>
            @endif

            {{-- Total di kanan --}}
            <span class="total-text">Total: {{ $challenges->total() }} challenge</span>

        </div>
    </form>

    {{-- TABEL --}}
    <div class="table-responsive-custom">
        <table class="table text-center align-middle">
            <thead class="table-header">
                <tr>
                    <th>No</th>
                    <th>Pembuat</th>
                    <th>Judul Challenge</th>
                    <th>Kelas</th>
                    <th>Soal</th>
                    <th>Durasi</th>
                    <th>Tenggat</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($challenges as $i => $ch)
                @php $isLewat = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast(); @endphp
                <tr>
                    <td>{{ $challenges->firstItem() + $i }}</td>
                    <td style="text-align:left;min-width:140px">
                        {{ optional($ch->guru)->nama ?? 'Admin' }}
                    </td>
                    <td style="text-align:left;min-width:160px">
                        <div style="font-weight:600;color:#1e293b">{{ $ch->judul_challenge }}</div>
                        @if($ch->deskripsi)
                            <div style="font-size:11px;color:#94a3b8">{{ Str::limit($ch->deskripsi, 40) }}</div>
                        @endif
                    </td>
                    <td style="min-width:100px">
                        @foreach($ch->kelas as $k)
                            <span class="kelas-chip">{{ $k->tingkat }} {{ $k->nama_kelas }}</span>
                        @endforeach
                    </td>
                    <td><span class="soal-count">{{ $ch->soal_count }} soal</span></td>
                    <td>
                        @if($ch->durasi_pengerjaan)
                            <span class="durasi-badge">⏱ {{ $ch->durasi_pengerjaan }} mnt</span>
                        @else
                            <span style="font-size:12px;color:#94a3b8">—</span>
                        @endif
                    </td>
                    <td style="min-width:120px">
                        <span class="deadline-badge {{ $isLewat ? 'deadline-lewat' : 'deadline-aktif' }}">
                            {{ $isLewat ? 'Lewat' : 'Aktif' }}
                        </span>
                        <div style="font-size:11px;color:#64748b;margin-top:3px;white-space:nowrap">
                            {{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}
                        </div>
                    </td>
                    <td style="white-space:nowrap">
                        <a href="{{ route('admin.challenge.show', $ch->id_challenge) }}"
                           style="border:none;background:none;display:inline">
                            <img src="{{ asset('images/icon/main/search.png') }}" class="action-icon" alt="Lihat">
                        </a>
                        <form action="{{ route('admin.challenge.destroy', $ch->id_challenge) }}"
                              method="POST" class="d-inline"
                              onsubmit="return confirm('Yakin hapus challenge ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" style="border:none;background:none">
                                <img src="{{ asset('images/icon/main/del.png') }}" class="action-icon" alt="Hapus">
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-muted py-4">Belum ada challenge.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-end mt-2">
        {{ $challenges->links() }}
    </div>

</div>

@endsection