<!DOCTYPE html><html lang="en" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title><?php echo e(config('app.name', 'Nusa OTP')); ?></title>

    <link rel="icon" type="image/png" href="<?php echo e(asset('public/assets/icon-nusaotp.ico')); ?>">
    <link rel="apple-touch-icon" href="<?php echo e(asset('public/assets/icon-nusaotp.ico')); ?>">

    <meta property="og:title" content="<?php echo e(config('app.name', 'Nusa OTP')); ?>">
    <meta property="og:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta property="og:image" content="<?php echo e(asset('public/assets/og-nusaotp.webp')); ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nusaotp.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo e(config('app.name', 'Nusa OTP')); ?>">
    <meta name="twitter:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta name="twitter:image" content="<?php echo e(asset('public/assets/og-nusaotp.webp')); ?>">
     <meta name="keywords" content="Nusa OTP, nomor virtual murah, Nusa OTP nokos, Nokos, beli nomor virtual, OTP murah, Nokos Indonesia, OTP Wa, nomor virtual, nomor WhatsApp, nomor Telegram, nomor Gmail, nomor registrasi, layanan verifikasi akun, platform nomor virtual, nomor online, nomor SMS verifikasi, nokos wa, nokos indonesia, nomor kosong, nomor virtual murah, otp murah, nokos wa murah, nokos wa, nomor kosong murah, nomor murah, beli nomor kosong, jasa nomor kosong murah, jasa nomor kosong, jasa otp murah, beli nomor kosong wa, nomor kosong">
    
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "surface": "#f8f9ff",
                        "outline": "#757684",
                        "on-primary": "#ffffff",
                        "error-container": "#ffdad6",
                        "primary-container": "#1e40af",
                        "tertiary-fixed": "#6ffbbe",
                        "surface-container-lowest": "#ffffff",
                        "background": "#f8f9ff",
                        "primary-fixed-dim": "#b8c4ff",
                        "on-secondary-fixed": "#001f26",
                        "on-error-container": "#93000a",
                        "on-primary-container": "#a8b8ff",
                        "on-primary-fixed-variant": "#173bab",
                        "on-tertiary": "#ffffff",
                        "outline-variant": "#c4c5d5",
                        "on-surface": "#0b1c30",
                        "surface-container-highest": "#d3e4fe",
                        "primary-fixed": "#dde1ff",
                        "surface-dim": "#cbdbf5",
                        "on-primary-fixed": "#001453",
                        "tertiary-container": "#00563a",
                        "surface-container": "#e5eeff",
                        "secondary-fixed": "#acedff",
                        "on-tertiary-fixed": "#002113",
                        "tertiary-fixed-dim": "#4edea3",
                        "secondary-container": "#57dffe",
                        "secondary-fixed-dim": "#4cd7f6",
                        "surface-bright": "#f8f9ff",
                        "surface-variant": "#d3e4fe",
                        "error": "#ba1a1a",
                        "on-secondary-container": "#006172",
                        "inverse-on-surface": "#eaf1ff",
                        "inverse-surface": "#213145",
                        "on-surface-variant": "#444653",
                        "inverse-primary": "#b8c4ff",
                        "on-secondary": "#ffffff",
                        "surface-container-low": "#eff4ff",
                        "on-secondary-fixed-variant": "#004e5c",
                        "secondary": "#00687a",
                        "on-tertiary-container": "#3fd298",
                        "on-error": "#ffffff",
                        "on-background": "#0b1c30",
                        "tertiary": "#003d27",
                        "surface-container-high": "#dce9ff",
                        "primary": "#00288e",
                        "on-tertiary-fixed-variant": "#005236",
                        "surface-tint": "#3755c3"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "stack-lg": "1.5rem",
                        "stack-md": "1rem",
                        "gutter": "1rem",
                        "container-margin": "1rem",
                        "stack-sm": "0.5rem",
                        "section-gap": "2rem"
                    },
                    "fontFamily": {
                        "headline-md": ["Inter"],
                        "number-display": ["Inter"],
                        "label-md": ["Inter"],
                        "headline-lg": ["Inter"],
                        "headline-lg-mobile": ["Inter"],
                        "body-md": ["Inter"],
                        "body-lg": ["Inter"]
                    },
                    "fontSize": {
                        "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                        "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                        "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
                        "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                        "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
                        "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                        "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
                    }
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f8f9ff;
            -webkit-tap-highlight-color: transparent;
        }
        .custom-card-shadow {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
        }
        .inner-bevel {
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
        }
        .active-interaction:active {
            transform: scale(0.96);
        }
    </style>
</head>
<body class="font-body-md text-on-surface">
<!-- TopAppBar Shell -->
<?php echo $__env->make('apk.partials.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<main class="flex-1 px-container-margin py-stack-md space-y-section-gap mb-24">
<!-- Hero Background Decor (Atmospheric Shader Placeholder) -->
<div class="fixed top-0 left-0 w-full h-64 -z-10 opacity-20 pointer-events-none">

</div>
<!-- Search Section -->
<section class="bg-surface-container-lowest rounded-xl p-4 custom-card-shadow border border-outline-variant/30 space-y-4">

<!-- NEGARA -->
<div class="space-y-1 relative">
    <label class="font-label-md text-label-md text-on-surface-variant px-1">
        Pilih Negara
    </label>

    <div class="relative">
        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">
            public
        </span>

        <input
            id="countryInput"
            type="text"
            placeholder="Ketik negara..."
            class="w-full pl-10 pr-4 py-3 bg-surface-container-low border border-outline-variant rounded-lg">

        <ul
            id="countryList"
            class="hidden absolute z-50 w-full mt-2 bg-white border rounded-xl shadow-lg max-h-60 overflow-y-auto">
        </ul>
    </div>
</div>

<!-- LAYANAN -->
<div class="space-y-1 relative">
    <label class="font-label-md text-label-md text-on-surface-variant px-1">
        Pilih Layanan
    </label>

    <div class="relative">
        <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">
            apps
        </span>

        <input
            id="serviceInput"
            type="text"
            disabled
            placeholder="Pilih negara dulu"
            class="w-full pl-10 pr-4 py-3 bg-surface-container-low border border-outline-variant rounded-lg">

        <ul
            id="serviceList"
            class="hidden absolute z-50 w-full mt-2 bg-white border rounded-xl shadow-lg max-h-60 overflow-y-auto">
        </ul>
    </div>
</div>
<span class="material-symbols-outlined absolute right-3 text-outline pointer-events-none">expand_more</span>
</div>
</div>
<button
    id="searchBtn"
    class="w-full py-4 bg-primary text-on-primary font-bold rounded-lg shadow-md active-interaction transition-all hover:brightness-110 flex items-center justify-center gap-2">
    <span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">search</span>
                Cari Layanan
            </button>
</section>
<!-- Results Section Header -->
<div class="flex items-center justify-between px-1">
<h2 class="font-headline-md text-headline-md text-on-surface">Hasil Pencarian</h2>

</div>
<!-- Results List -->
<div id="resultList" class="space-y-3"></div>
<div id="pagination" class="flex justify-center gap-2 mt-4"></div>
<!-- Promotion Card -->

</div>
</main>
<!-- BottomNavBar Shell -->
<?php echo $__env->make('apk.partials.bar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<script>

const countryInput = document.getElementById('countryInput');
const serviceInput = document.getElementById('serviceInput');
const countryList  = document.getElementById('countryList');
const serviceList  = document.getElementById('serviceList');
const resultList   = document.getElementById('resultList');
const pagination   = document.getElementById('pagination');
const searchBtn    = document.getElementById('searchBtn');

let countries = [];
let services = [];

let selectedCountry = null;
let selectedCountryName = '';
let selectedService = null;

let currentProducts = [];
let currentPage = 1;
const perPage = 10;

/* =========================
   AUTO SELECT
========================= */

function autoSelect(input,list,data,callback){

    const q = input.value.toLowerCase().trim();

    const exact = data.find(
        x => (x.name || '').toLowerCase() === q
    );

    if(exact){
        callback(exact);
        list.classList.add('hidden');
    }
}

/* =========================
   INITIAL
========================= */

countryInput.disabled = true;
serviceInput.disabled = true;

/* =========================
   LOAD COUNTRIES
========================= */

(async () => {

    try{

        countryInput.placeholder =
            'Loading negara...';

        const res =
            await fetch('/ajax/smscode/countries');

        const json =
            await res.json();

        countries =
            json.data || [];

        countryInput.disabled = false;

        countryInput.placeholder =
            'Ketik negara...';

    }catch(err){

        console.error(err);

        countryInput.placeholder =
            'Gagal memuat negara';
    }

})();

/* =========================
   DROPDOWN
========================= */

function renderList(
    input,
    list,
    data,
    callback
){

    const q =
        input.value.toLowerCase();

    list.innerHTML = '';

    const filtered = data.filter(item =>
        (item.name || '')
        .toLowerCase()
        .includes(q)
    );

    if(!q || !filtered.length){

        list.classList.add('hidden');
        return;
    }

    filtered.forEach(item => {

        const li =
            document.createElement('li');

        li.className =
            'px-4 py-3 text-sm cursor-pointer hover:bg-blue-50';

        li.textContent =
            item.name;

        li.onclick = () => {

            callback(item);

            list.classList.add('hidden');
        };

        list.appendChild(li);

    });

    list.classList.remove('hidden');
}

/* =========================
   COUNTRY
========================= */

countryInput.addEventListener('input', () => {

    renderList(
        countryInput,
        countryList,
        countries,
        selectCountry
    );

    autoSelect(
        countryInput,
        countryList,
        countries,
        selectCountry
    );

});

async function selectCountry(country){

    selectedCountry =
        country.id;

    selectedCountryName =
        country.name;

    countryInput.value =
        country.name;

    selectedService = null;

    serviceInput.value = '';

    serviceInput.disabled = true;

    resultList.innerHTML = '';
    pagination.innerHTML = '';

    try{

        serviceInput.placeholder =
            'Loading layanan...';

        const res =
            await fetch(
                `/ajax/smscode/services/${country.id}`
            );

        const json =
            await res.json();

        services =
            json.data || [];

        serviceInput.disabled = false;

        serviceInput.placeholder =
            'Ketik layanan...';

    }catch(err){

        console.error(err);

        serviceInput.placeholder =
            'Gagal memuat layanan';
    }

}

/* =========================
   SERVICE
========================= */

serviceInput.addEventListener('input', () => {

    renderList(
        serviceInput,
        serviceList,
        services,
        selectService
    );

    autoSelect(
        serviceInput,
        serviceList,
        services,
        selectService
    );

});

function selectService(service){

    selectedService =
        service;

    serviceInput.value =
        service.name;
}

/* =========================
   PAGINATION
========================= */

function renderPagination(){

    pagination.innerHTML = '';

    const totalPages =
        Math.ceil(
            currentProducts.length / perPage
        );

    if(totalPages <= 1){
        return;
    }

    pagination.innerHTML += `
        <button
            ${currentPage === 1 ? 'disabled' : ''}
            onclick="renderPage(${currentPage - 1})"
            class="px-3 py-2 rounded-lg border bg-white">
            ←
        </button>
    `;

    for(let i = 1; i <= totalPages; i++){

        pagination.innerHTML += `
            <button
                onclick="renderPage(${i})"
                class="
                    px-3 py-2 rounded-lg border
                    ${
                        i === currentPage
                        ? 'bg-primary text-white border-primary'
                        : 'bg-white'
                    }
                ">
                ${i}
            </button>
        `;
    }

    pagination.innerHTML += `
        <button
            ${currentPage === totalPages ? 'disabled' : ''}
            onclick="renderPage(${currentPage + 1})"
            class="px-3 py-2 rounded-lg border bg-white">
            →
        </button>
    `;
}

function renderPage(page){

    currentPage = page;

    const start =
        (page - 1) * perPage;

    const end =
        start + perPage;

    const items =
        currentProducts.slice(start,end);

    resultList.innerHTML = '';

    items.forEach((p,index) => {

        resultList.innerHTML += `

        <div class="bg-white rounded-xl p-4 custom-card-shadow border border-outline-variant/20">

            <div class="flex justify-between items-start">

                <div>

                   <p class="font-semibold mt-1">
    ${(p.name || '').replace(/\s*\(\$.*?\)/g, '')}
</p>

                </div>

                <div class="text-right">

                    <p class="text-xs text-gray-500">
                        Server ${start + index + 1}
                    </p>

                    <p class="font-bold text-primary mt-1">
                        Rp ${Number(p.harga).toLocaleString('id-ID')}
                    </p>

                </div>

            </div>

        </div>

        `;

    });

    renderPagination();
}

/* =========================
   SEARCH
========================= */

searchBtn.addEventListener('click', async () => {

    if(
        !selectedCountry ||
        !selectedService
    ){
        return;
    }

    searchBtn.disabled = true;

    resultList.innerHTML = `
        <div class="bg-white rounded-xl p-8 text-center">
            <span class="material-symbols-outlined animate-spin text-4xl">
                autorenew
            </span>
            <p class="mt-2">
                Memuat layanan...
            </p>
        </div>
    `;

    pagination.innerHTML = '';

    try{

        const res =
            await fetch(
                '/ajax/smscode/products?country=' +
                selectedCountry +
                '&service=' +
                selectedService.id
            );

        const json =
            await res.json();

        currentProducts =
            json.data || [];

        if(!currentProducts.length){

            resultList.innerHTML = `
                <div class="bg-white rounded-xl p-8 text-center">
                    Tidak ada produk tersedia
                </div>
            `;

            return;
        }

        renderPage(1);

    }catch(err){

        console.error(err);

        resultList.innerHTML = `
            <div class="bg-white rounded-xl p-8 text-center text-red-500">
                Gagal memuat data
            </div>
        `;
    }

    searchBtn.disabled = false;

});

/* =========================
   CLICK OUTSIDE
========================= */

document.addEventListener('click', e => {

    if(
        !countryInput.contains(e.target) &&
        !countryList.contains(e.target)
    ){
        countryList.classList.add('hidden');
    }

    if(
        !serviceInput.contains(e.target) &&
        !serviceList.contains(e.target)
    ){
        serviceList.classList.add('hidden');
    }

});

</script>
</body></html><?php /**PATH /home/nusaotp/public_html/resources/views/apk/daftar-harga.blade.php ENDPATH**/ ?>