@extends('layouts.app')

@section('title', 'Tambah Paket UTBK')

@section('page-title', 'Tambah Paket UTBK')

@section('page-subtitle', 'Membuat paket ujian baru')

@section('content')

<div class="max-w-3xl mx-auto">

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

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

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

                <div class="w-14 h-14 rounded-2xl bg-white/20 flex items-center justify-center">

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

                </div>

                <div>

                    <h1 class="text-2xl font-bold">
                        Tambah Paket UTBK
                    </h1>

                    <p class="text-white/80 mt-1">
                        Buat paket ujian yang akan digunakan untuk bank soal.
                    </p>

                </div>

            </div>

        </div>


        {{-- FORM --}}
        <form action="{{ route('utbk.guru.paket.store') }}"
              method="POST"
              class="p-7 space-y-6">

            @csrf


            {{-- NAMA PAKET --}}
            <div>

                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Nama Paket Ujian
                </label>

                <input type="text"
                       name="nama_paket"
                       value="{{ old('nama_paket') }}"
                       placeholder="Contoh: UTBK Bahasa Indonesia Paket 1"
                       class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
                       required>

                @error('nama_paket')

                    <p class="mt-2 text-sm text-red-600">
                        {{ $message }}
                    </p>

                @enderror

            </div>


            {{-- DURASI --}}
            <div>

                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Durasi Ujian
                </label>

                <div class="flex">

                    <input type="number"
                           name="durasi"
                           value="{{ old('durasi', 120) }}"
                           min="1"
                           class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
                           required>

                    <span class="ml-3 flex items-center text-gray-500">
                        menit
                    </span>

                </div>

                @error('durasi')

                    <p class="mt-2 text-sm text-red-600">
                        {{ $message }}
                    </p>

                @enderror

            </div>


            {{-- JUMLAH SOAL --}}
            <div>

                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    Jumlah Soal
                </label>

                <div class="flex">

                    <input type="number"
                           name="jumlah_soal"
                           value="{{ old('jumlah_soal', 50) }}"
                           min="1"
                           class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
                           required>

                    <span class="ml-3 flex items-center text-gray-500">
                        soal
                    </span>

                </div>

                @error('jumlah_soal')

                    <p class="mt-2 text-sm text-red-600">
                        {{ $message }}
                    </p>

                @enderror

            </div>

            {{-- JADWAL UJIAN --}}
            <div class="rounded-2xl bg-indigo-50 border border-indigo-200 p-5">
            
                <div class="flex items-center gap-3 mb-5">
            
                    <div class="w-10 h-10 rounded-xl bg-indigo-600 text-white flex items-center justify-center">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
            
                    <div>
                        <h3 class="font-bold text-gray-800">
                            Jadwal Ujian
                        </h3>
            
                        <p class="text-xs text-gray-500">
                            Tentukan waktu siswa diperbolehkan mengerjakan ujian.
                        </p>
                    </div>
            
                </div>
            
            
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            
                    {{-- TANGGAL MULAI --}}
                    <div>
            
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-play-circle text-green-600 mr-1"></i>
                            Mulai Ujian
                        </label>
            
                        <input type="datetime-local"
                               name="tanggal_mulai"
                               value="{{ old('tanggal_mulai') }}"
                               class="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
                               required>
            
                        @error('tanggal_mulai')
                            <p class="mt-2 text-sm text-red-600">
                                {{ $message }}
                            </p>
                        @enderror
            
                        <p class="mt-2 text-xs text-gray-500">
                            Contoh: 15/09/2026 08:00
                        </p>
            
                    </div>
            
            
                    {{-- TANGGAL SELESAI --}}
                    <div>
            
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-stop-circle text-red-600 mr-1"></i>
                            Selesai Ujian
                        </label>
            
                        <input type="datetime-local"
                               name="tanggal_selesai"
                               value="{{ old('tanggal_selesai') }}"
                               class="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none"
                               required>
            
                        @error('tanggal_selesai')
                            <p class="mt-2 text-sm text-red-600">
                                {{ $message }}
                            </p>
                        @enderror
            
                        <p class="mt-2 text-xs text-gray-500">
                            Harus setelah waktu mulai.
                        </p>
            
                    </div>
            
                </div>
            
            </div>
            {{-- INFORMASI --}}
            <div class="rounded-2xl bg-blue-50 border border-blue-200 p-5">

                <div class="flex gap-3">

                    <i class="fas fa-info-circle text-blue-600 mt-1"></i>

                    <div class="text-sm text-blue-800">

                        <p class="font-semibold">
                            Informasi
                        </p>

                        <p class="mt-1">
                            Setelah paket dibuat, Anda dapat mengupload soal Word
                            dan menghubungkannya dengan paket ini.
                        </p>

                    </div>

                </div>

            </div>


            {{-- BUTTON --}}
            <div class="flex flex-col sm:flex-row justify-end gap-3 pt-4 border-t">

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

                    <i class="fas fa-arrow-left"></i>

                    Kembali

                </a>


                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 shadow-lg">

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

                    Simpan Paket

                </button>

            </div>

        </form>

    </div>

</div>

@endsection