@extends('selva.layout')

@section('title', 'Mata Pelatihan')

@section('content')
    <div class="p-6 py-8">
        <div x-data="mataPelatihanList" @fetch-mata-pelatihans.window="fetchMataPelatihans()">

            <div class="mb-6 rounded-xl bg-surface p-6 shadow-sm" :class="{ 'dark': darkMode }">
                <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                    <div class="flex flex-wrap gap-2 sm:gap-3">
                        <button class="btn bg-gray-900" @click="$dispatch('open-modal', { type: 'add' })">
                            <i class="fas fa-plus mr-1 text-xs sm:mr-2"></i>
                            <span class="hidden sm:inline">Tambah Mata Pelatihan</span>
                            <span class="sm:hidden">Tambah</span>
                        </button>
                        <button class="btn-delete" :class="{ 'dark': darkMode }" @click="deleteSelectedMataPelatihans">
                            <i class="fas fa-trash mr-1 text-xs sm:mr-2"></i>
                            <span class="hidden sm:inline">Hapus Terpilih</span>
                            <span class="sm:hidden">Hapus</span>
                        </button>

                        <div class="relative" x-data="{ open: false }">
                            <button class="btn-light group" :class="{ 'dark': darkMode }" @click="open = !open">
                                <i class="fas fa-download mr-1 transition-transform group-hover:scale-110 sm:mr-2"></i>
                                Export
                                <i class="fas fa-chevron-down ml-1 text-xs transition-transform duration-200 sm:ml-2"
                                    :class="{ 'rotate-180': open }"></i>
                            </button>

                            <div class="absolute left-0 z-50 mt-3 w-56 rounded-xl border border-default bg-surface shadow-xl ring-1 ring-black/5"
                                :class="{ 'dark': darkMode }"
                                x-show="open" 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-100"
                                x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                                @click.away="open = false">
                                <div class="p-2">
                                    <button
                                        class="bg-toggle-inactive group flex w-full items-center rounded-lg px-4 py-3 text-sm text-primary transition-colors hover:bg-green-50 hover:text-green-700"
                                        :class="{ 'dark hover:bg-green-800 hover:text-green-300': darkMode }"
                                        @click="exportMatPel('csv'); open = false">
                                        <div
                                            class="mr-3 rounded-lg bg-green-100 p-2 transition-colors group-hover:bg-green-200"
                                            :class="{ 'dark bg-green-800 group-hover:bg-green-700': darkMode }">
                                            <i class="fas fa-file-csv text-green-600" :class="{ 'dark text-green-300': darkMode }"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Export CSV</div>
                                            <div class="text-xs text-muted" :class="{ 'dark': darkMode }">Format spreadsheet</div>
                                        </div>
                                    </button>
                                    <button
                                        class="bg-toggle-inactive group flex w-full items-center rounded-lg px-4 py-3 text-sm text-primary transition-colors hover:bg-emerald-50 hover:text-emerald-700"
                                        :class="{ 'dark hover:bg-emerald-800 hover:text-emerald-300': darkMode }"
                                        @click="exportMatPel('excel'); open = false">
                                        <div
                                            class="mr-3 rounded-lg bg-emerald-100 p-2 transition-colors group-hover:bg-emerald-200"
                                            :class="{ 'dark bg-emerald-800 group-hover:bg-emerald-700': darkMode }">
                                            <i class="fas fa-file-excel text-emerald-600" :class="{ 'dark text-emerald-300': darkMode }"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Export Excel</div>
                                            <div class="text-xs text-muted" :class="{ 'dark': darkMode }">Format .xlsx</div>
                                        </div>
                                    </button>
                                    <button
                                        class="bg-toggle-inactive group flex w-full items-center rounded-lg px-4 py-3 text-sm text-primary transition-colors hover:bg-red-50 hover:text-red-700"
                                        :class="{ 'dark hover:bg-red-800 hover:text-red-300': darkMode }"
                                        @click="exportMatPel('pdf'); open = false">
                                        <div
                                            class="mr-3 rounded-lg bg-red-100 p-2 transition-colors group-hover:bg-red-200"
                                            :class="{ 'dark bg-red-800 group-hover:bg-red-700': darkMode }">
                                            <i class="fas fa-file-pdf text-red-600" :class="{ 'dark text-red-300': darkMode }"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Export PDF</div>
                                            <div class="text-xs text-muted" :class="{ 'dark': darkMode }">Format dokumen</div>
                                        </div>
                                    </button>
                                    <div class="my-1 border-t border-default" :class="{ 'dark': darkMode }"></div>
                                    <button
                                        class="bg-toggle-inactive group flex w-full items-center rounded-lg px-4 py-3 text-sm text-primary transition-colors hover:bg-blue-50 hover:text-blue-700"
                                        :class="{ 'dark hover:bg-blue-800 hover:text-blue-300': darkMode }"
                                        @click="printMatPel(); open = false">
                                        <div
                                            class="mr-3 rounded-lg bg-blue-100 p-2 transition-colors group-hover:bg-blue-200"
                                            :class="{ 'dark bg-blue-800 group-hover:bg-blue-700': darkMode }">
                                            <i class="fas fa-print text-blue-600" :class="{ 'dark text-blue-300': darkMode }"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Print Data</div>
                                            <div class="text-xs text-muted" :class="{ 'dark': darkMode }">Cetak ke printer</div>
                                        </div>
                                    </button>
                                    <button
                                        class="bg-toggle-inactive group flex w-full items-center rounded-lg px-4 py-3 text-sm text-primary transition-colors hover:bg-purple-50 hover:text-purple-700"
                                        :class="{ 'dark hover:bg-purple-800 hover:text-purple-300': darkMode }"
                                        @click="copyMatPel(); open = false">
                                        <div
                                            class="mr-3 rounded-lg bg-purple-100 p-2 transition-colors group-hover:bg-purple-200"
                                            :class="{ 'dark bg-purple-800 group-hover:bg-purple-700': darkMode }">
                                            <i class="fas fa-copy text-purple-600" :class="{ 'dark text-purple-300': darkMode }"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Copy Data</div>
                                            <div class="text-xs text-muted" :class="{ 'dark': darkMode }">Salin ke clipboard</div>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <button class="btn-light group" :class="{ 'dark': darkMode }" @click="refreshData">
                            <i class="fas fa-sync-alt mr-1 transition-transform group-hover:rotate-180 sm:mr-2"></i>
                            <span class="sm:hidden">Refresh</span>
                            <span class="hidden sm:inline">Refresh</span>
                        </button>
                    </div>

                    <div class="relative w-full max-w-md lg:w-auto lg:min-w-[280px]">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search icon-muted" :class="{ 'dark': darkMode }"></i>
                        </div>
                        <input
                            class="bg-input text-input block w-full rounded-xl border-0 py-2.5 pl-10 pr-4 text-sm shadow-sm ring-1 transition-all duration-200 placeholder:text-gray-400 hover:ring-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
                            :class="{ 'dark placeholder:text-gray-500': darkMode }"
                            type="text" placeholder="Cari mata pelatihan..." @input="updateQuickFilter" />
                    </div>
                </div>

                <div class="bg-gradient-card fixed inset-0 left-0 top-0 z-[99999] flex items-center justify-center backdrop-blur-sm"
                    :class="{ 'dark': darkMode }"
                    x-show="isLoading" x-transition.opacity>
                    <div class="flex flex-col items-center gap-3">
                        <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600" :class="{ 'dark border-gray-600 border-t-blue-400': darkMode }"></div>
                        <p class="text-sm text-secondary" :class="{ 'dark': darkMode }">Memuat data...</p>
                    </div>
                </div>

                <div class="overflow-hidden rounded-xl bg-surface shadow-lg ring-1 ring-gray-200" :class="{ 'dark ring-gray-700': darkMode }">
                    <div class="ag-theme-alpine-custom" :class="{ 'ag-theme-alpine-dark': darkMode }" id="mata-pelatihan-grid" style="height: 500px; width: 100%"></div>
                </div>
            </div>
        </div>
    </div>

    <div x-data="mataPelatihanForm" @open-modal.window="openModal($event.detail.type, $event.detail.mataPelatihan)">
        @include('master-data.mata-pelatihan.modal')
    </div>

@endsection

@push('style')
    @vite(['resources/js/master-data/mata-pelatihan/import.js'])
@endpush