@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">
                    Bank Soal UTBK
                </h1>

                <p class="mt-2 text-white/80">
                    Kelola soal ujian yang Anda buat untuk siswa.
                </p>

            </div>

            {{-- UPLOAD WORD --}}
            <a href="{{ route('utbk.guru.soal.upload-word') }}"
               class="inline-flex items-center justify-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>


    {{-- NOTIFIKASI --}}
    @if(session('success'))

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

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

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

                <span class="font-medium">
                    {{ session('success') }}
                </span>

            </div>

        </div>

    @endif


    @if(session('error'))

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

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

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

                <span class="font-medium">
                    {{ session('error') }}
                </span>

            </div>

        </div>

    @endif


    {{-- INFORMASI --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

        {{-- TOTAL SOAL --}}
        <div class="rounded-2xl bg-white p-6 shadow-sm border">

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

                <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center">

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

                </div>

                <div>

                    <p class="text-sm text-gray-500">
                        Total Soal
                    </p>

                    <p class="text-2xl font-bold text-gray-800">
                        {{ $soal->count() }}
                    </p>

                </div>

            </div>

        </div>


        {{-- SOAL AKTIF --}}
        <div class="rounded-2xl bg-white p-6 shadow-sm border">

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

                <div class="w-12 h-12 rounded-xl bg-green-100 text-green-600 flex items-center justify-center">

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

                </div>

                <div>

                    <p class="text-sm text-gray-500">
                        Soal Aktif
                    </p>

                    <p class="text-2xl font-bold text-gray-800">
                        {{ $soal->count() }}
                    </p>

                </div>

            </div>

        </div>


        {{-- PAKET --}}
        <div class="rounded-2xl bg-white p-6 shadow-sm border">

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

                <div class="w-12 h-12 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center">

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

                </div>

                <div>

                    <p class="text-sm text-gray-500">
                        Paket UTBK
                    </p>

                    <p class="text-2xl font-bold text-gray-800">
                        {{ $paket->count() }}
                    </p>

                </div>

            </div>

        </div>

    </div>


    {{-- DAFTAR SOAL --}}
    <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">
                        Soal Saya
                    </h2>

                    <p class="text-sm text-gray-500 mt-1">
                        Daftar soal UTBK yang dibuat oleh Anda.
                    </p>

                </div>


                {{-- TOMBOL TAMBAH --}}
                <div class="flex flex-wrap gap-2">

                    <a href="{{ route('utbk.guru.soal.upload-word') }}"
                       class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">

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

                        Upload Word

                    </a>

                </div>

            </div>

        </div>


        {{-- TABEL --}}
        @if($soal->count())

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

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

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

                        <tr>

                            <th class="px-6 py-4 text-left font-semibold text-gray-600">
                                No
                            </th>

                            <th class="px-6 py-4 text-left font-semibold text-gray-600">
                                Paket
                            </th>

                            <th class="px-6 py-4 text-left font-semibold text-gray-600">
                                Kategori
                            </th>

                            <th class="px-6 py-4 text-left font-semibold text-gray-600">
                                Pertanyaan
                            </th>

                            <th class="px-6 py-4 text-center font-semibold text-gray-600">
                                Bobot
                            </th>

                            <th class="px-6 py-4 text-center font-semibold text-gray-600">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody class="divide-y">

                        @foreach($soal as $item)

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

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

                                    <span class="font-medium text-gray-700">
                                        {{ $loop->iteration }}
                                    </span>

                                </td>


                                {{-- PAKET --}}
                                <td class="px-6 py-4">

                                    @if($item->paket)

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

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

                                            {{ $item->paket->nama_paket }}

                                        </span>

                                    @else

                                        <span class="text-gray-400">
                                            -
                                        </span>

                                    @endif

                                </td>


                                {{-- KATEGORI --}}
                                <td class="px-6 py-4">

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

                                        {{ $item->kategori }}

                                    </span>

                                </td>


                                {{-- PERTANYAAN --}}
                                <td class="px-6 py-4 max-w-xl">

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

                                        {{ Str::limit(strip_tags($item->pertanyaan), 120) }}

                                    </div>

                                </td>


                                {{-- BOBOT --}}
                                <td class="px-6 py-4 text-center">

                                    <span class="inline-flex items-center justify-center min-w-8 px-2 py-1 rounded-lg bg-gray-100 text-gray-700 font-semibold">

                                        {{ $item->bobot ?? 1 }}

                                    </span>

                                </td>


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

                                    <div class="flex justify-center gap-2">


                                        {{-- EDIT --}}
                                        @if(Route::has('utbk.guru.soal.edit'))

                                            <a href="{{ route('utbk.guru.soal.edit', $item->id) }}"
                                               class="w-9 h-9 rounded-lg bg-yellow-100 text-yellow-700 hover:bg-yellow-200 flex items-center justify-center transition"
                                               title="Edit Soal">

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

                                            </a>

                                        @endif


                                        {{-- HAPUS --}}
                                        @if(Route::has('utbk.guru.soal.delete'))

                                            <form action="{{ route('utbk.guru.soal.delete', $item->id) }}"
                                                  method="POST"
                                                  onsubmit="return confirm('Yakin ingin menghapus soal ini?')">

                                                @csrf

                                                @method('DELETE')

                                                <button type="submit"
                                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 flex items-center justify-center transition"
                                                        title="Hapus Soal">

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

                                                </button>

                                            </form>

                                        @endif

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>


        @else

            {{-- BELUM ADA SOAL --}}
            <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 Soal

                </h3>


                <p class="mt-2 text-sm text-gray-500">

                    Anda belum memiliki soal UTBK.

                </p>


                <a href="{{ route('utbk.guru.soal.upload-word') }}"
                   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 transition">

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

                    Upload Soal Word

                </a>

            </div>

        @endif

    </div>

</div>

@endsection