@extends('selva.layout')

@section('title', 'General Report')

@section('content')
    <div class="p-6 py-8">
        <div x-data="generalReport">

            <form class="space-y-8" @submit.prevent="submitForm">
                <div class="rounded-xl bg-surface p-8 shadow-sm ring-1 ring-gray-200" :class="{ 'dark ring-gray-700': darkMode }">
                    <h2 class="mb-6 text-lg font-semibold text-primary" :class="{ 'dark': darkMode }">General Report Peserta - List</h2>

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

                        <div class="relative">
                            <label class="mb-1 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }" for="kelompok">
                                Period <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select
                                    class="bg-input text-input w-full appearance-none rounded-lg px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    :class="{ 'dark': darkMode, 'border-red-500 ring-red-500': errors.kelompok }"
                                    id="kelompok" x-model="inputData.diklat">
                                    <option value="">Select Period</option>
                                </select>
                                <button
                                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 icon-muted transition-colors hover:text-primary"
                                    :class="{ 'dark': darkMode }"
                                    type="button" @click="refreshDiklat">
                                    <i class="fa-solid fa-refresh text-sm"></i>
                                </button>
                                <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                                    <i class="fa-solid fa-chevron-down text-xs icon-muted" :class="{ 'dark': darkMode }"></i>
                                </div>
                            </div>
                            <template x-if="errors.kelompok">
                                <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                            </template>
                        </div>

                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                            <div>
                                <label class="mb-1 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }" for="tahun">
                                    Pemilik Pelatihan <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select
                                        class="bg-input text-input w-full appearance-none rounded-lg px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        :class="{ 'dark': darkMode, 'border-red-500 ring-red-500': errors.kelompok }"
                                        id="kelompok" x-model="inputData.diklat">
                                        <option value="">Pilih Pemilik Pelatihan</option>
                                    </select>
                                    <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                                        <i class="fa-solid fa-chevron-down text-xs icon-muted" :class="{ 'dark': darkMode }"></i>
                                    </div>
                                </div>
                                <template x-if="errors.kelompok">
                                    <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                </template>
                            </div>

                            <div>
                                <label class="mb-1 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }" for="pelatihan">
                                    Pelatihan <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select
                                        class="bg-input text-input w-full appearance-none rounded-lg px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        :class="{ 'dark': darkMode, 'border-red-500 ring-red-500': errors.kelompok }"
                                        id="kelompok" x-model="inputData.pelatihan">
                                        <option value="">Pilih Pelatihan</option>
                                    </select>
                                    <button
                                        class="absolute right-8 top-1/2 -translate-y-1/2 p-1 icon-muted transition-colors hover:text-primary"
                                        :class="{ 'dark': darkMode }"
                                        type="button" @click="refreshDiklat">
                                        <i class="fa-solid fa-refresh text-sm"></i>
                                    </button>
                                    <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                                        <i class="fa-solid fa-chevron-down text-xs icon-muted" :class="{ 'dark': darkMode }"></i>
                                    </div>
                                </div>
                                <template x-if="errors.kelompok">
                                    <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                </template>
                            </div>
                        </div>

                        <div>
                            <label class="mb-1 block text-sm font-medium text-secondary" :class="{ 'dark': darkMode }" for="kolom_peserta">
                                Kolom Peserta <span class="text-red-500">*</span>
                            </label>

                            <div class="mb-3 flex flex-wrap gap-2" x-show="selectedKolomPeserta.length > 0">
                                <template x-for="(item, index) in selectedKolomPeserta" :key="index">
                                    <span
                                        class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800"
                                        :class="{ 'dark bg-blue-800 text-blue-200': darkMode }">
                                        <span x-text="item.label"></span>
                                        <button
                                            class="ml-1 h-4 w-4 rounded-full bg-blue-200 text-blue-600 hover:bg-blue-300 hover:text-blue-800"
                                            :class="{ 'dark bg-blue-700 text-blue-300 hover:bg-blue-600 hover:text-blue-200': darkMode }"
                                            type="button" @click="removeKolomPeserta(index)">
                                            <i class="fa-solid fa-times text-xs"></i>
                                        </button>
                                    </span>
                                </template>
                            </div>

                            <div class="relative" x-data="{ open: false }">
                                <div class="bg-input text-input w-full cursor-pointer rounded-lg px-3 py-2.5 pr-10 text-sm transition-all duration-300 focus-within:border-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 hover:ring-gray-300"
                                    :class="{ 'dark': darkMode, 'border-red-500 ring-red-500': errors.kolom_peserta }"
                                    @click="open = !open">
                                    <span class="block text-input"
                                        :class="[
                                            { 'dark': darkMode },
                                            { 'text-gray-400 dark:text-gray-500': selectedKolomPeserta.length === 0 }
                                        ]"
                                        x-text="selectedKolomPeserta.length > 0 ? `${selectedKolomPeserta.length} item terpilih` : 'Pilih Kolom Peserta'">
                                    </span>
                                </div>

                                <button
                                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 icon-muted transition-colors hover:text-primary"
                                    :class="{ 'dark': darkMode }"
                                    type="button" @click.stop="refreshKolomPeserta">
                                    <i class="fa-solid fa-refresh text-sm"></i>
                                </button>

                                <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                                    <i class="fa-solid fa-chevron-down text-xs icon-muted transition-transform duration-200"
                                        :class="{ 'dark': darkMode, 'rotate-180': open }"></i>
                                </div>

                                <div class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-default bg-surface shadow-lg"
                                    :class="{ 'dark': darkMode }"
                                    x-show="open" @click.away="open = false"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 scale-95"
                                    x-transition:enter-end="opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-150"
                                    x-transition:leave-start="opacity-100 scale-100"
                                    x-transition:leave-end="opacity-0 scale-95">

                                    <div class="border-b border-default px-3 py-2" :class="{ 'dark': darkMode }">
                                        <label class="flex cursor-pointer items-center">
                                            <input
                                                class="mr-2 h-4 w-4 rounded text-blue-600 focus:ring-blue-500"
                                                :class="{ 'dark border-gray-600 bg-gray-700': darkMode }"
                                                type="checkbox" :checked="isAllSelected()" @change="toggleAll()">
                                            <span class="text-sm font-medium text-secondary" :class="{ 'dark': darkMode }">Pilih Semua</span>
                                        </label>
                                    </div>

                                    <template x-for="option in kolomPesertaOptions" :key="option.value">
                                        <div class="px-3 py-2 bg-toggle-inactive" :class="{ 'dark': darkMode }">
                                            <label class="flex cursor-pointer items-center">
                                                <input
                                                    class="mr-2 h-4 w-4 rounded text-blue-600 focus:ring-blue-500"
                                                    :class="{ 'dark border-gray-600 bg-gray-700': darkMode }"
                                                    type="checkbox" :value="option.value" :checked="isSelected(option)"
                                                    @change="toggleKolomPeserta(option)">
                                                <span class="text-sm text-primary" :class="{ 'dark': darkMode }" x-text="option.label"></span>
                                            </label>
                                        </div>
                                    </template>

                                    <div class="px-3 py-4 text-center text-sm text-muted" :class="{ 'dark': darkMode }"
                                        x-show="kolomPesertaOptions.length === 0">
                                        Tidak ada data tersedia
                                    </div>
                                </div>
                            </div>

                            <template x-if="errors.kolom_peserta">
                                <p class="mt-1 text-sm text-red-600" x-text="errors.kolom_peserta[0]"></p>
                            </template>
                        </div>

                        <div class="flex items-center">
                            <input class="mr-2 h-4 w-4 rounded text-blue-600 focus:ring-blue-500"
                                :class="{ 'dark border-gray-600 bg-gray-700': darkMode }"
                                id="cetak_semua_kolom" type="checkbox" x-model="inputData.cetak_semua_kolom">
                            <label class="text-sm font-medium text-secondary" :class="{ 'dark': darkMode }" for="cetak_semua_kolom">
                                Cetak Semua Kolom
                            </label>
                        </div>

                    </div>
                </div>

                <div class="flex justify-end space-x-4">

                    <button
                        class="inline-flex items-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
                        type="button" @click="viewReport()" :disabled="isLoading">
                        <i class="fa-regular fa-file mr-2"></i>
                        View Report
                    </button>

                    <button
                        class="inline-flex items-center rounded-lg bg-green-600 px-6 py-3 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50"
                        type="button" @click="exportToCsv()" :disabled="isLoading">
                        <i class="fa-regular fa-download mr-2"></i>
                        Export to CSV
                    </button>
                </div>
            </form>

        </div>
    </div>

@endsection

@push('style')
    @vite(['resources/js/kediklatan/general-report/import.js'])
@endpush