@extends('layouts.app')

@section('content')

<div class="space-y-6">

    {{-- HEADER --}}
    <div class="rounded-3xl bg-gradient-to-r from-indigo-700 via-blue-600 to-cyan-500 p-8 text-white shadow-xl">

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-5">

            <div>

                <p class="text-sm uppercase tracking-widest opacity-80">
                    Portal UTBK Guru
                </p>

                <h1 class="mt-2 text-3xl font-bold">
                    Paket Ujian Saya
                </h1>

                <p class="mt-2 text-white/80">
                    Kelola paket ujian, jadwal, soal dan status ujian.
                </p>

            </div>

            <div class="flex flex-wrap gap-3">

                <a href="{{ route('utbk.guru.soal') }}"
                   class="inline-flex items-center gap-2 rounded-xl bg-white/20 px-5 py-3 font-semibold text-white hover:bg-white/30 transition">

                    <i class="fas fa-database"></i>

                    Bank Soal

                </a>

                <a href="{{ route('utbk.guru.soal.upload-word') }}"
                   class="inline-flex items-center gap-2 rounded-xl bg-white px-5 py-3 font-semibold text-indigo-700 shadow-lg hover:bg-gray-100 transition">

                    <i class="fas fa-file-word"></i>

                    Upload Soal Word

                </a>

            </div>

        </div>

    </div>


    {{-- PESAN SUKSES --}}
    @if(session('success'))

        <div class="rounded-2xl bg-green-50 border border-green-200 p-4 text-green-700">

            <div class="flex items-center gap-3">

                <i class="fas fa-check-circle text-xl"></i>

                <div>
                    <p class="font-semibold">
                        Berhasil
                    </p>

                    <p class="text-sm">
                        {{ session('success') }}
                    </p>
                </div>

            </div>

        </div>

    @endif


    {{-- PESAN ERROR --}}
    @if(session('error'))

        <div class="rounded-2xl bg-red-50 border border-red-200 p-4 text-red-700">

            <div class="flex items-center gap-3">

                <i class="fas fa-exclamation-circle text-xl"></i>

                <div>
                    <p class="font-semibold">
                        Tidak dapat memproses
                    </p>

                    <p class="text-sm">
                        {{ session('error') }}
                    </p>
                </div>

            </div>

        </div>

    @endif


    {{-- DAFTAR PAKET --}}
    <div class="rounded-3xl bg-white shadow-sm border overflow-hidden">

        {{-- HEADER TABLE --}}
        <div class="p-6 border-b">

            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                <div>

                    <h2 class="text-xl font-bold text-gray-800">
                        Daftar Paket UTBK
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Kelola paket ujian yang digunakan untuk siswa.
                    </p>

                </div>


                <a href="{{ route('utbk.guru.paket.create') }}"
                   class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">

                    <i class="fas fa-plus"></i>

                    Tambah Paket

                </a>

            </div>

        </div>


        @if($paket->count())

            <div class="overflow-x-auto">

                <table class="w-full text-sm">

                    <thead class="bg-gray-50 border-b">

                        <tr>

                            <th class="px-5 py-4 text-left">
                                No
                            </th>

                            <th class="px-5 py-4 text-left">
                                Nama Paket
                            </th>

                            <th class="px-5 py-4 text-center">
                                Durasi
                            </th>

                            <th class="px-5 py-4 text-center">
                                Soal
                            </th>

                            <th class="px-5 py-4 text-left">
                                Jadwal Ujian
                            </th>

                            <th class="px-5 py-4 text-center">
                                Status
                            </th>

                            <th class="px-5 py-4 text-center">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody class="divide-y">

                        @foreach($paket as $item)

                            <tr class="hover:bg-gray-50">


                                {{-- NO --}}
                                <td class="px-5 py-5">

                                    <span class="font-semibold text-gray-600">

                                        {{ $loop->iteration }}

                                    </span>

                                </td>


                                {{-- NAMA PAKET --}}
                                <td class="px-5 py-5">

                                    <div class="font-bold text-gray-800">

                                        {{ $item->nama_paket }}

                                    </div>

                                    <div class="text-xs text-gray-500 mt-1">

                                        ID Paket:
                                        {{ $item->id }}

                                    </div>

                                </td>


                                {{-- DURASI --}}
                                <td class="px-5 py-5 text-center">

                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-blue-100 text-blue-700 font-semibold">

                                        <i class="fas fa-clock"></i>

                                        {{ $item->durasi ?? 0 }}
                                        menit

                                    </span>

                                </td>


                                {{-- JUMLAH SOAL --}}
                                <td class="px-5 py-5 text-center">

                                    <div class="font-bold text-gray-800">

                                        {{ $item->soal_count }}

                                        <span class="text-gray-400 font-normal">
                                            /
                                            {{ $item->jumlah_soal }}
                                        </span>

                                    </div>


                                    @if($item->soal_count >= $item->jumlah_soal)

                                        <span class="text-xs text-green-600 font-semibold">

                                            <i class="fas fa-check-circle"></i>

                                            Lengkap

                                        </span>

                                    @else

                                        <span class="text-xs text-orange-600 font-semibold">

                                            <i class="fas fa-exclamation-circle"></i>

                                            Belum lengkap

                                        </span>

                                    @endif

                                </td>


                                {{-- JADWAL --}}
                                <td class="px-5 py-5">

                                    @if($item->tanggal_mulai)

                                        <div class="flex items-start gap-2">

                                            <i class="fas fa-calendar-alt text-blue-500 mt-1"></i>

                                            <div>

                                                <div class="font-semibold text-gray-700">

                                                    {{ $item->tanggal_mulai->format('d/m/Y H:i') }}

                                                </div>

                                                <div class="text-xs text-gray-400">
                                                    sampai
                                                </div>

                                                <div class="font-semibold text-gray-700">

                                                    {{ $item->tanggal_selesai?->format('d/m/Y H:i') ?? '-' }}

                                                </div>

                                            </div>

                                        </div>

                                    @else

                                        <span class="text-gray-400">
                                            Jadwal belum diatur
                                        </span>

                                    @endif

                                </td>


                                {{-- STATUS --}}
                                <td class="px-5 py-5 text-center">

                                    @if($item->status === 'aktif')

                                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-bold">

                                            <span class="w-2 h-2 rounded-full bg-green-500"></span>

                                            AKTIF

                                        </span>

                                    @elseif($item->status === 'nonaktif')

                                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-bold">

                                            <span class="w-2 h-2 rounded-full bg-red-500"></span>

                                            NONAKTIF

                                        </span>

                                    @else

                                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-bold">

                                            <span class="w-2 h-2 rounded-full bg-yellow-500"></span>

                                            DRAFT

                                        </span>

                                    @endif

                                </td>


                                {{-- AKSI --}}
                                <td class="px-5 py-5">

                                    <div class="flex flex-col gap-2 min-w-[130px]">


                                        {{-- AKTIFKAN --}}
                                        @if($item->status !== 'aktif')

                                            @if(
                                                $item->soal_count >= $item->jumlah_soal &&
                                                $item->tanggal_mulai &&
                                                $item->tanggal_selesai
                                            )

                                                <form action="{{ route('utbk.guru.paket.activate', $item->id) }}"
                                                      method="POST">

                                                    @csrf

                                                    <button type="submit"
                                                            onclick="return confirm('Aktifkan ujian {{ $item->nama_paket }}?')"
                                                            class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-green-600 text-white font-semibold hover:bg-green-700 transition">

                                                        <i class="fas fa-power-off"></i>

                                                        Aktifkan

                                                    </button>

                                                </form>

                                            @else

                                                <button type="button"
                                                        disabled
                                                        class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-gray-200 text-gray-400 font-semibold cursor-not-allowed">

                                                    <i class="fas fa-lock"></i>

                                                    Belum Siap

                                                </button>

                                            @endif

                                        @else

                                            {{-- NONAKTIFKAN --}}
                                            <form action="{{ route('utbk.guru.paket.deactivate', $item->id) }}"
                                                  method="POST">

                                                @csrf

                                                <button type="submit"
                                                        onclick="return confirm('Nonaktifkan ujian {{ $item->nama_paket }}?')"
                                                        class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-red-600 text-white font-semibold hover:bg-red-700 transition">

                                                    <i class="fas fa-power-off"></i>

                                                    Nonaktifkan

                                                </button>

                                            </form>

                                        @endif


                                        {{-- BANK SOAL --}}
                                        <a href="{{ route('utbk.guru.soal') }}"
                                           class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-blue-100 text-blue-700 font-semibold hover:bg-blue-200 transition">

                                            <i class="fas fa-list"></i>

                                            Bank Soal

                                        </a>

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @else

            {{-- KOSONG --}}
            <div class="py-16 text-center">

                <div class="mx-auto w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">

                    <i class="fas fa-folder-open text-3xl text-gray-400"></i>

                </div>

                <h3 class="mt-5 text-lg font-bold text-gray-700">
                    Belum Ada Paket
                </h3>

                <p class="mt-2 text-sm text-gray-500">
                    Belum ada paket ujian UTBK yang tersedia.
                </p>


                <a href="{{ route('utbk.guru.paket.create') }}"
                   class="inline-flex items-center gap-2 mt-5 px-5 py-3 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700">

                    <i class="fas fa-plus"></i>

                    Buat Paket Ujian

                </a>

            </div>

        @endif

    </div>

</div>

@endsection