@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 dan penyusutan', 'route_name' => 'admin.inventories.index', 'permission' => 'inventories.index'],
        ['title' => 'Laporan Data Anggota', 'subtitle' => 'Laporan master anggota', 'route_name' => 'admin.reports.members.index', 'permission' => 'reports.members'],
        ['title' => 'Laporan Kas Anggota', 'subtitle' => 'Kas anggota koperasi', 'route_name' => 'admin.reports.member-cash.index', 'permission' => 'reports.member-cash'],
        ['title' => 'Laporan Jatuh Tempo', 'subtitle' => 'Pinjaman yang segera jatuh tempo', 'route_name' => 'admin.reports.due-loans.index', 'permission' => 'reports.due-loans'],
        ['title' => 'Laporan Kredit Macet', 'subtitle' => 'Pinjaman bermasalah', 'route_name' => 'admin.reports.bad-debts.index', 'permission' => 'reports.bad-debts'],
        ['title' => 'Laporan Transaksi Kas', 'subtitle' => 'Mutasi kas koperasi', 'route_name' => 'admin.reports.cash-transactions.index', 'permission' => 'reports.cash-transactions'],
        ['title' => 'Laporan Buku Besar', 'subtitle' => 'Rekap akun buku besar', 'route_name' => 'admin.reports.general-ledger.index', 'permission' => 'reports.general-ledger'],
        ['title' => 'Laporan Neraca', 'subtitle' => 'Neraca koperasi', 'route_name' => 'admin.reports.balance-sheet.index', 'permission' => 'reports.balance-sheet'],
        ['title' => 'Laporan Neraca Saldo', 'subtitle' => 'Trial balance koperasi', 'route_name' => 'admin.reports.trial-balance.index', 'permission' => 'reports.trial-balance'],
        ['title' => 'Laporan Kas Simpanan', 'subtitle' => 'Saldo kas simpanan', 'route_name' => 'admin.reports.savings-cash.index', 'permission' => 'reports.savings-cash'],
        ['title' => 'Laporan Kas Pinjaman', 'subtitle' => 'Saldo kas pinjaman', 'route_name' => 'admin.reports.loan-cash.index', 'permission' => 'reports.loan-cash'],
        ['title' => 'Laporan Saldo Kas', 'subtitle' => 'Posisi saldo kas', 'route_name' => 'admin.reports.cash-balance.index', 'permission' => 'reports.cash-balance'],
        ['title' => 'Laporan Laba Rugi', 'subtitle' => 'Income statement koperasi', 'route_name' => 'admin.reports.income-statement.index', 'permission' => 'reports.income-statement'],
        ['title' => 'Laporan SHU', 'subtitle' => 'Sisa hasil usaha', 'route_name' => 'admin.reports.shu.index', 'permission' => 'reports.shu'],
        ['title' => 'Master Jenis Simpanan', 'subtitle' => 'Pengaturan jenis simpanan', 'route_name' => 'admin.master-data.savings-types.index', 'permission' => 'master-data.savings-types.index'],
        ['title' => 'Master Jenis Akun', 'subtitle' => 'Pengaturan akun koperasi', 'route_name' => 'admin.master-data.account-types.index', 'permission' => 'master-data.account-types.index'],
        ['title' => 'Master Data Kas', 'subtitle' => 'Daftar kas aktif', 'route_name' => 'admin.master-data.cash-accounts.index', 'permission' => 'master-data.cash-accounts.index'],
        ['title' => 'Master Lama Angsuran', 'subtitle' => 'Tenor pinjaman', 'route_name' => 'admin.master-data.loan-terms.index', 'permission' => 'master-data.loan-terms.index'],
        ['title' => 'Master Data Barang', 'subtitle' => 'Barang inventaris', 'route_name' => 'admin.master-data.loan-products.index', 'permission' => 'master-data.loan-products.index'],
        ['title' => 'Master Data Anggota', 'subtitle' => 'Anggota koperasi', 'route_name' => 'admin.master-data.members.index', 'permission' => 'master-data.members.index'],
        ['title' => 'Data Pengguna', 'subtitle' => 'User login dan role', 'route_name' => 'admin.master-data.users.index', 'permission' => 'master-data.users.index'],
        ['title' => 'Role', 'subtitle' => 'Pengaturan role sistem', 'route_name' => 'admin.settings.roles.index', 'permission' => 'settings.user.roles.index'],
        ['title' => 'User', 'subtitle' => 'Pengaturan user sistem', 'route_name' => 'admin.settings.users.index', 'permission' => 'settings.user.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-cooperative-mega-search :items='@json($megaSearchItems)'>
    <div class="relative flex w-[550px] max-w-[550px] items-center max-lg:w-[400px] ltr:ml-2.5 rtl:mr-2.5">
        <i class="icon-search absolute top-2 flex items-center text-2xl ltr:left-3 rtl:right-3"></i>

        <input
            type="text"
            class="block w-full rounded-3xl border bg-white px-10 py-1.5 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 dark:hover:border-gray-400 dark:focus:border-gray-400"
            placeholder="@lang('admin::app.components.layouts.header.mega-search.title')"
        >
    </div>
</v-cooperative-mega-search>

@pushOnce('scripts')
    <script type="text/x-template" id="v-cooperative-mega-search-template">
        <div
            class="relative flex w-[550px] max-w-[550px] items-center max-lg:w-[400px] ltr:ml-2.5 rtl:mr-2.5"
            @click.outside="isDropdownOpen = false"
        >
            <i class="icon-search absolute top-2 flex items-center text-2xl ltr:left-3 rtl:right-3"></i>

            <input
                type="text"
                class="peer block w-full rounded-3xl border bg-white px-10 py-1.5 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 dark:hover:border-gray-400 dark:focus:border-gray-400"
                :class="{'border-gray-400': isDropdownOpen}"
                placeholder="@lang('admin::app.components.layouts.header.mega-search.title')"
                v-model="searchTerm"
                @focus="isDropdownOpen = true"
                @input="isDropdownOpen = true"
            >

            <div
                class="absolute top-10 z-10 w-full rounded-lg border bg-white shadow-[0px_0px_0px_0px_rgba(0,0,0,0.10),0px_1px_3px_0px_rgba(0,0,0,0.10),0px_5px_5px_0px_rgba(0,0,0,0.09),0px_12px_7px_0px_rgba(0,0,0,0.05),0px_22px_9px_0px_rgba(0,0,0,0.01),0px_34px_9px_0px_rgba(0,0,0,0.00)] dark:border-gray-800 dark:bg-gray-900"
                v-if="isDropdownOpen"
            >
                <div class="border-b px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:border-gray-800 dark:text-gray-400">
                    Menu Koperasi
                </div>

                <div class="grid max-h-[400px] overflow-y-auto">
                    <template v-if="filteredItems.length">
                        <a
                            v-for="item in filteredItems"
                            :href="item.route"
                            class="flex cursor-pointer items-start justify-between gap-2.5 border-b border-slate-300 p-4 last:border-b-0 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-950"
                        >
                            <div class="grid place-content-start gap-1.5">
                                <p class="text-base font-semibold text-gray-600 dark:text-gray-300">@{{ item.title }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">@{{ item.subtitle }}</p>
                            </div>
                        </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>
    </script>

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

            props: ['items'],

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

            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