@php
    $megaSearchItems = collect([
        ['title' => 'Dashboard', 'subtitle' => 'Beranda koperasi', 'route_name' => 'admin.dashboard.index', 'permission' => 'dashboard'],
        ['title' => 'Pemasukan Kas', 'subtitle' => 'Transaksi kas masuk', 'route_name' => 'admin.cash-transactions.income.index', 'permission' => 'cash-transactions.income.index'],
        ['title' => 'Pengeluaran Kas', 'subtitle' => 'Transaksi kas keluar', 'route_name' => 'admin.cash-transactions.expense.index', 'permission' => 'cash-transactions.expense.index'],
        ['title' => 'Transfer Kas', 'subtitle' => 'Transfer antar kas', 'route_name' => 'admin.cash-transactions.transfer.index', 'permission' => 'cash-transactions.transfer.index'],
        ['title' => 'Setoran Tunai', 'subtitle' => 'Transaksi simpanan masuk', 'route_name' => 'admin.savings.deposit.index', 'permission' => 'savings.deposit.index'],
        ['title' => 'Penarikan Tunai', 'subtitle' => 'Transaksi simpanan keluar', 'route_name' => 'admin.savings.withdrawal.index', 'permission' => 'savings.withdrawal.index'],
        ['title' => 'Simpanan Bunga Harian', 'subtitle' => 'Rekening SBH', 'route_name' => 'admin.daily-interest-savings.index', 'permission' => 'daily-interest-savings.index'],
        ['title' => 'Simpanan Sukarela Berjangka', 'subtitle' => 'Rekening SSB', 'route_name' => 'admin.fixed-term-savings.index', 'permission' => 'fixed-term-savings.index'],
        ['title' => 'Data Pinjaman', 'subtitle' => 'Daftar pinjaman anggota', 'route_name' => 'admin.loans.index', 'permission' => 'loans.index'],
        ['title' => 'Data Angsuran', 'subtitle' => 'Pembayaran dan daftar angsuran', 'route_name' => 'admin.loans.installments.index', 'permission' => 'loans.installments.index'],
        ['title' => 'Pinjaman Lunas', 'subtitle' => 'Riwayat pelunasan pinjaman', 'route_name' => 'admin.loans.settled.index', 'permission' => 'loans.settled.index'],
        ['title' => 'Simulasi Pinjaman', 'subtitle' => 'Simulasi cicilan pinjaman', 'route_name' => 'admin.loans.simulation.index', 'permission' => 'loans.simulation.index'],
        ['title' => 'Inventaris', 'subtitle' => 'Data inventaris', 'route_name' => 'admin.inventories.index', 'permission' => 'inventories.index'],
        ['title' => 'Laporan SHU', 'subtitle' => 'Sisa hasil usaha', 'route_name' => 'admin.reports.shu.index', 'permission' => 'reports.shu'],
        ['title' => 'Data Pengguna', 'subtitle' => 'User login dan role', 'route_name' => 'admin.master-data.users.index', 'permission' => 'master-data.users.index'],
    ])
        ->filter(fn ($item) => \Illuminate\Support\Facades\Route::has($item['route_name']))
        ->filter(fn ($item) => bouncer()->hasPermission($item['permission']))
        ->map(function ($item) {
            $item['route'] = route($item['route_name']);

            unset($item['route_name']);

            return $item;
        })
        ->values();
@endphp

<v-mobile-cooperative-mega-search :items='@json($megaSearchItems)'></v-mobile-cooperative-mega-search>

@pushOnce('scripts')
    <script type="text/x-template" id="v-mobile-cooperative-mega-search-template">
        <div>
            <button
                type="button"
                class="icon-search rounded-md p-2 text-2xl"
                @click="isOpen = true"
            ></button>

            <transition name="modal">
                <div v-if="isOpen" class="fixed inset-0 z-50 bg-black/40">
                    <div class="mx-auto mt-6 w-[92%] rounded-xl bg-white p-4 shadow-xl dark:bg-gray-900">
                        <div class="mb-3 flex items-center gap-2">
                            <i class="icon-search text-2xl text-gray-500"></i>

                            <input
                                type="text"
                                class="block w-full rounded-xl border bg-white px-4 py-2 leading-6 text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
                                placeholder="@lang('admin::app.components.layouts.header.mega-search.title')"
                                v-model="searchTerm"
                            >

                            <button class="text-sm font-semibold text-brandColor" @click="isOpen = false">Tutup</button>
                        </div>

                        <div class="grid max-h-[70vh] overflow-y-auto">
                            <template v-if="filteredItems.length">
                                <a
                                    v-for="item in filteredItems"
                                    :href="item.route"
                                    class="border-b border-slate-300 p-4 last:border-b-0 dark:border-gray-800"
                                >
                                    <p class="text-base font-semibold text-gray-700 dark:text-gray-300">@{{ item.title }}</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">@{{ item.subtitle }}</p>
                                </a>
                            </template>

                            <template v-else>
                                <div class="p-4 text-sm text-gray-500 dark:text-gray-400">
                                    Tidak ada menu yang cocok dengan pencarian.
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </script>

    <script type="module">
        app.component('v-mobile-cooperative-mega-search', {
            template: '#v-mobile-cooperative-mega-search-template',

            props: ['items'],

            data() {
                return {
                    isOpen: false,
                    searchTerm: '',
                };
            },

            computed: {
                filteredItems() {
                    let keyword = this.searchTerm.trim().toLowerCase();

                    if (! keyword) {
                        return this.items.slice(0, 12);
                    }

                    return this.items.filter((item) => {
                        return `${item.title} ${item.subtitle}`.toLowerCase().includes(keyword);
                    }).slice(0, 20);
                },
            },
        });
    </script>
@endPushOnce