<!DOCTYPE html><html lang="id" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <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;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=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-error-container": "#93000a",
                    "surface-dim": "#cbdbf5",
                    "on-background": "#0b1c30",
                    "tertiary-fixed-dim": "#4edea3",
                    "on-tertiary-fixed": "#002113",
                    "background": "#f8f9ff",
                    "primary": "#00288e",
                    "surface-tint": "#3755c3",
                    "on-secondary-fixed-variant": "#004e5c",
                    "outline": "#757684",
                    "inverse-on-surface": "#eaf1ff",
                    "surface-container": "#e5eeff",
                    "inverse-primary": "#b8c4ff",
                    "primary-fixed-dim": "#b8c4ff",
                    "on-tertiary-container": "#3fd298",
                    "secondary-fixed": "#acedff",
                    "on-primary-fixed-variant": "#173bab",
                    "on-error": "#ffffff",
                    "error": "#ba1a1a",
                    "surface": "#f8f9ff",
                    "tertiary-container": "#00563a",
                    "tertiary": "#003d27",
                    "on-surface-variant": "#444653",
                    "tertiary-fixed": "#6ffbbe",
                    "surface-container-highest": "#d3e4fe",
                    "primary-fixed": "#dde1ff",
                    "on-primary": "#ffffff",
                    "primary-container": "#1e40af",
                    "on-primary-fixed": "#001453",
                    "secondary-container": "#57dffe",
                    "on-primary-container": "#a8b8ff",
                    "outline-variant": "#c4c5d5",
                    "surface-variant": "#d3e4fe",
                    "surface-container-high": "#dce9ff",
                    "error-container": "#ffdad6",
                    "surface-container-lowest": "#ffffff",
                    "secondary-fixed-dim": "#4cd7f6",
                    "on-surface": "#0b1c30",
                    "on-secondary": "#ffffff",
                    "surface-container-low": "#eff4ff",
                    "on-tertiary-fixed-variant": "#005236",
                    "secondary": "#00687a",
                    "on-secondary-fixed": "#001f26",
                    "on-tertiary": "#ffffff",
                    "on-secondary-container": "#006172",
                    "surface-bright": "#f8f9ff",
                    "inverse-surface": "#213145"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
            },
            "spacing": {
                    "container-margin": "1rem",
                    "section-gap": "2rem",
                    "stack-md": "1rem",
                    "stack-lg": "1.5rem",
                    "gutter": "1rem",
                    "stack-sm": "0.5rem"
            },
            "fontFamily": {
                    "headline-lg": ["Inter"],
                    "label-md": ["Inter"],
                    "number-display": ["Inter"],
                    "body-md": ["Inter"],
                    "body-lg": ["Inter"],
                    "headline-md": ["Inter"],
                    "headline-lg-mobile": ["Inter"]
            },
            "fontSize": {
                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
                    "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                    "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}]
            }
          },
        },
      }
    </script>
<style>
        body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .custom-shadow-sm { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02); }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .skeleton{
    position:relative;
    overflow:hidden;
    background:#e5e7eb;
}

.skeleton::after{
    content:'';
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );
    animation:skeleton 1.2s infinite;
}

@keyframes skeleton{
    100%{
        transform:translateX(100%);
    }
}

.selected-item{
    border-color:#2563eb !important;
    background:#eff6ff !important;
    box-shadow:0 0 0 1px #2563eb;
}
    </style>
</head>
<body class="bg-background text-on-background min-h-screen pb-32">
<!-- TopAppBar -->
<?php echo $__env->make('apk.partials.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<main class="px-container-margin mt-4 flex flex-col gap-section-gap">
<!-- Selection Hero Section (Asymmetric / Modern) -->
<section>
    <div class="relative overflow-hidden rounded-xl p-6 shadow-md bg-gradient-to-br from-blue-600 to-indigo-700 text-white">

        <div class="absolute -right-10 -top-10 opacity-10">
            <span class="material-symbols-outlined text-[120px]">
                public
            </span>
        </div>

        <div class="relative z-10">

            <h2 class="text-2xl font-bold mb-2">
                Beli Nomor Virtual
            </h2>

            <p class="text-sm text-blue-100 max-w-[240px]">
                Pilih nomor dari berbagai belahan dunia untuk verifikasi instan.
            </p>
        </div>

    </div>
</section>

<!-- Ringkasan Pilihan -->
<div
    id="selectedInfoCard"
    class="bg-white rounded-2xl border border-blue-100 shadow-sm p-5 mb-6">

<div class="flex items-center justify-between mb-4">

    <div class="flex items-center gap-2">

        <span class="material-symbols-outlined text-blue-600">
            check_circle
        </span>

        <h3 class="font-bold text-lg">
            Ringkasan
        </h3>

    </div>

    <button
        onclick="resetSelection()"
        class="text-red-600 text-sm font-semibold">

        Hapus Pilihan

    </button>

</div>

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

        <div class="flex justify-between">
            <span class="text-gray-500">
                Negara
            </span>

            <span
                id="selectedCountryText"
                class="font-semibold">
                -
            </span>
        </div>

        <div class="flex justify-between">
            <span class="text-gray-500">
                Layanan
            </span>

            <span
                id="selectedServiceText"
                class="font-semibold">
                -
            </span>
        </div>

        <div class="flex justify-between">
            <span class="text-gray-500">
                Server
            </span>

            <span
                id="selectedServerText"
                class="font-semibold">
                -
            </span>
        </div>

    </div>

</div>

<!-- Pilih Negara Section -->
<section
    id="countrySection"
    class="flex flex-col gap-stack-md">
    <div class="flex justify-between items-center">
<h3 class="font-headline-md text-headline-md">Pilih Negara</h3>
<button
    id="btnCountriesMore"
    onclick="toggleCountries()"
    class="text-primary font-label-md text-label-md">

    Lihat Semua

</button>
</div><div class="relative mt-2"><span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span><input
    id="searchCountry"
    type="text"
    placeholder="Cari Negara..." class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl py-2 pl-10 pr-4 font-body-md focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all custom-shadow-sm"></div>
<div id="countries-list"
     class="grid grid-cols-2 gap-4">
</div>
</section>
<!-- Pilih Layanan Section (Bento Grid Style) -->
<section
    id="serviceSection"
    class="hidden flex-col gap-stack-md">
<div class="flex justify-between items-center">

    <h3 class="font-headline-md text-headline-md">
        Pilih Layanan
    </h3>

    <button
        id="btnServicesMore"
        onclick="toggleServices()"
        class="text-primary font-label-md text-label-md">

        Lihat Semua

    </button>

</div>
<div class="relative mt-2"><span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span><input
    id="searchService"
    type="text"
    placeholder="Cari Layanan..." class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl py-2 pl-10 pr-4 font-body-md focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all custom-shadow-sm"></div>
<div id="services-list"
     class="grid grid-cols-2 gap-4">
</div>
</section>
<!-- Pilih Server Section -->
<section
    id="serverSection"
    class="hidden flex-col gap-stack-md">
    
    <div class="flex justify-between items-center">

    <h3 class="font-headline-md text-headline-md">
        Pilih Server
    </h3>

    <button
        id="btnServersMore"
        onclick="toggleServers()"
        class="text-primary font-label-md text-label-md">

        Lihat Semua

    </button>

</div>
<div class="relative mt-2"><span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span><input
    id="searchServer"
    type="text"
    placeholder="Cari Server..." class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl py-2 pl-10 pr-4 font-body-md focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all custom-shadow-sm"></div>
<div id="servers-list"
     class="flex flex-col gap-stack-sm">
</div>
</section>
</main>
<!-- Bottom Checkout Container -->
<div class="fixed bottom-[72px] left-0 w-full bg-surface-container-lowest px-container-margin py-4 border-t border-outline-variant/30 flex items-center justify-between z-40">
<p id="total-price"
   class="font-number-display text-number-display text-primary">
    Rp 0
</p>
<button
    onclick="buyNow()"
    class="bg-tertiary-container hover:bg-tertiary-container text-white font-headline-md text-headline-md px-8 py-3 rounded-full shadow-lg active:scale-95 transition-transform flex items-center gap-2">

    <span>Beli</span>

    <span class="material-symbols-outlined">
        shopping_cart
    </span>

</button>
</div>

<?php echo $__env->make('apk.partials.bar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<div
    id="errorModal"
    class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 px-4">

    <div class="bg-white rounded-2xl w-full max-w-sm p-5">

        <div class="flex justify-center mb-4">
            <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">

                <span class="material-symbols-outlined text-red-600 text-3xl">
                    error
                </span>

            </div>
        </div>

        <h3 class="text-center font-bold text-lg">
            Order Gagal
        </h3>

        <p
    id="errorModalMessage"
    class="text-center text-gray-500 text-sm mt-2">
    Silahkan coba lagi beberapa saat atau gunakan server lainnya.
</p>

        <button
            id="btnCloseErrorModal"
            class="w-full h-12 rounded-xl bg-red-600 text-white font-bold mt-6">

            Oke

        </button>

    </div>

</div>
<script>

let selectedCountry = null;
let selectedCountryName = '';
let selectedService = null;
let selectedServiceName = '';
let selectedProduct = null;
let allCountries = [];
let allServices = [];
let allServers = [];

let showAllCountries = false;
let showAllServices = false;
let showAllServers = false;
function getFlag(code){

    return code
        .toUpperCase()
        .replace(/./g, char =>
            String.fromCodePoint(
                127397 + char.charCodeAt(0)
            )
        );

}
async function loadCountries(){
const wrap =
    document.getElementById(
        'countries-list'
    );

wrap.innerHTML = '';

for(let i=0;i<10;i++){

    wrap.innerHTML += `
        <div
            class="skeleton rounded-xl h-[60px]">
        </div>
    `;
}
    const res = await fetch('/ajax/smscode/countries');
    const json = await res.json();

allCountries = json.data || [];

renderCountries();
}
function renderCountries(keyword=''){

    const wrap =
        document.getElementById(
            'countries-list'
        );

    let data =
        allCountries.filter(x =>
            x.name
            .toLowerCase()
            .includes(
                keyword.toLowerCase()
            )
        );

    if(!showAllCountries){
        data = data.slice(0,10);
    }

    wrap.innerHTML = '';

    data.forEach(item => {

wrap.innerHTML += `
<div
    id="country-${item.id}"
    onclick="selectCountry(${item.id}, '${item.name.replace(/'/g,"\\'")}')"
    class="country-item cursor-pointer bg-white rounded-xl border p-4 hover:border-blue-500 hover:bg-blue-50 transition-all">

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

        <span class="font-semibold">
            ${item.name}
        </span>

        <span class="text-2xl">
            ${getFlag(item.code)}
        </span>

    </div>

</div>
`;
    });
}

function toggleCountries(){

    showAllCountries =
        !showAllCountries;

    document.getElementById(
        'btnCountriesMore'
    ).innerText =
        showAllCountries
        ? 'Tampilkan 10'
        : 'Lihat Semua';

    renderCountries(
        document.getElementById(
            'searchCountry'
        )?.value || ''
    );
}
async function selectCountry(countryId, countryName){

    selectedCountry = countryId;
    selectedCountryName = countryName;
selectedService = null;
selectedServiceName = '';
selectedProduct = null;

updateSelectedCard();

document
    .getElementById('serviceSection')
    .classList.remove('hidden');

document
    .getElementById('serviceSection')
    .classList.add('flex');

document
    .getElementById('serverSection')
    .classList.add('hidden');

    
document.getElementById(
    'services-list'
).innerHTML = '';

for(let i=0;i<10;i++){

    document.getElementById(
        'services-list'
    ).innerHTML += `
        <div
            class="skeleton rounded-xl h-[80px]">
        </div>
    `;
}
    const res = await fetch(`/orderv2/services/${countryId}`);
    const json = await res.json();

    const wrap = document.getElementById('services-list');

    wrap.innerHTML = '';

    document.getElementById('servers-list').innerHTML = '';

    selectedService = null;
    selectedProduct = null;

    document.getElementById('total-price').innerText = 'Rp 0';

   allServices = json.data || [];

renderServices();

document
.querySelectorAll('.country-item')
.forEach(x=>{
    x.classList.remove(
    'selected-item'
);
});

document
.getElementById(
    `country-${countryId}`
)
?.classList.add(
    'selected-item'
);
document.getElementById('countrySection').classList.add('hidden');

document.getElementById('serviceSection').classList.remove('hidden');
document.getElementById('serviceSection').classList.add('flex');

document.getElementById('serviceSection').scrollIntoView({
    behavior:'smooth',
    block:'start'
});

}
function renderServices(keyword=''){

    const wrap =
        document.getElementById(
            'services-list'
        );

    let data =
        allServices.filter(x =>
            x.name
            .toLowerCase()
            .includes(
                keyword.toLowerCase()
            )
        );

    if(!showAllServices){
        data = data.slice(0,10);
    }

    wrap.innerHTML = '';

data.forEach(item => {

    wrap.innerHTML += `
    <div
        id="service-${item.id}"
        onclick="selectService(${item.id}, '${item.name.replace(/'/g,"\\'")}')"
        class="service-item cursor-pointer bg-white p-4 rounded-xl border hover:border-blue-500 hover:bg-blue-50 transition-all">

        <div class="flex items-center gap-3">

            <img
    src="https://cdn.simpleicons.org/${item.code}/color"
    class="w-7 h-7"
    loading="lazy"
    onerror="this.src='https://placehold.co/28x28?text=?'">

            <span class="font-semibold">
                ${item.name}
            </span>

        </div>

    </div>
    `;
});
}

function toggleServices(){

    showAllServices =
        !showAllServices;

    document.getElementById(
        'btnServicesMore'
    ).innerText =
        showAllServices
        ? 'Tampilkan 10'
        : 'Lihat Semua';

    renderServices(
        document.getElementById(
            'searchService'
        )?.value || ''
    );
}

async function selectService(serviceId, serviceName){

   selectedService = serviceId;
selectedServiceName = serviceName;

selectedProduct = null;

updateSelectedCard();

document
    .getElementById('serverSection')
    .classList.remove('hidden');

document
    .getElementById('serverSection')
    .classList.add('flex');
document.getElementById(
    'servers-list'
).innerHTML = '';

for(let i=0;i<10;i++){

    document.getElementById(
        'servers-list'
    ).innerHTML += `
        <div
            class="skeleton rounded-xl h-[72px]">
        </div>
    `;
}
    const res = await fetch(
        `/orderv2/products/${selectedCountry}/${serviceId}`
    );

    const json = await res.json();

    const wrap = document.getElementById('servers-list');

    wrap.innerHTML = '';

    selectedProduct = null;

    document.getElementById('total-price').innerText = 'Rp 0';

  allServers = json.data || [];

renderServers();

document
.querySelectorAll('.service-item')
.forEach(x=>{
    x.classList.remove(
    'selected-item'
);
});

document
.getElementById(
    `service-${serviceId}`
)
?.classList.add(
    'selected-item'
);
document.getElementById('serviceSection').classList.add('hidden');

document.getElementById('serverSection').classList.remove('hidden');
document.getElementById('serverSection').classList.add('flex');

document.getElementById('serverSection').scrollIntoView({
    behavior:'smooth',
    block:'start'
});
}
function renderServers(keyword=''){

    const wrap =
        document.getElementById(
            'servers-list'
        );

    let data =
        allServers.filter((x,i)=>
            (`Server ${i+1}`)
            .toLowerCase()
            .includes(
                keyword.toLowerCase()
            )
        );

    if(!showAllServers){
        data = data.slice(0,10);
    }

    wrap.innerHTML = '';

    data.forEach((item,index)=>{

        wrap.innerHTML += `
        <div
            id="server-${item.id}"
            onclick='selectProduct(${JSON.stringify(item)})'
            class="server-item cursor-pointer p-4 bg-white rounded-xl border hover:border-blue-500 hover:bg-blue-50 transition-all duration-200">

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

                <div>

                    <p class="font-semibold">
                        Server ${index+1}
                    </p>

                </div>

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

            </div>

        </div>
        `;
    });
}

function toggleServers(){

    showAllServers =
        !showAllServers;

    document.getElementById(
        'btnServersMore'
    ).innerText =
        showAllServers
        ? 'Tampilkan 10'
        : 'Lihat Semua';

    renderServers(
        document.getElementById(
            'searchServer'
        )?.value || ''
    );
}

function selectProduct(product){

    selectedProduct = product.id;
    updateSelectedCard();

    document.getElementById('total-price').innerText =
        'Rp ' +
        Number(product.harga)
            .toLocaleString('id-ID');
document
.querySelectorAll('.server-item')
.forEach(x=>{
    x.classList.remove(
    'selected-item'
);
});

document
.getElementById(
    `server-${product.id}`
)
?.classList.add(
    'selected-item'
);
document.getElementById('serverSection').classList.add('hidden');

window.scrollTo({
    top:0,
    behavior:'smooth'
});
}

async function buyNow(){

    if(!selectedCountry)
        return alert('Pilih negara');

    if(!selectedService)
        return alert('Pilih layanan');

    if(!selectedProduct)
        return alert('Pilih server');

    const btn =
        document.querySelector('[onclick="buyNow()"]');

    try{

        btn.disabled = true;

        btn.innerHTML = `
            <span class="animate-pulse">
                Memproses...
            </span>
        `;

        const res = await fetch(
            '/apk/order/create',
            {
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRF-TOKEN':
                        document.querySelector(
                            'meta[name="csrf-token"]'
                        ).content
                },
                body:JSON.stringify({
                    country_id:selectedCountry,
                    service_id:selectedService,
                    product_id:selectedProduct
                })
            }
        );

        const json = await res.json();

if (!json.success) {

    showOrderError(
        json.message || 'Silahkan coba lagi beberapa saat atau gunakan server lainnya.'
    );

    btn.disabled = false;

    btn.innerHTML = `
        <span>Beli</span>
        <span class="material-symbols-outlined">
            shopping_cart
        </span>
    `;

    return;
}

        window.location.href =
            '/apk/order/' +
            json.data.order_id;

}catch(err){

    showOrderError(
        err.message === 'Failed to fetch'
            ? 'Tidak dapat terhubung ke server.'
            : 'Silahkan coba lagi beberapa saat atau gunakan server lainnya.'
    );

    btn.disabled = false;

    btn.innerHTML = `
        <span>Beli</span>
        <span class="material-symbols-outlined">
            shopping_cart
        </span>
    `;
}
}
document.addEventListener('click', function (e) {

    if (e.target.id === 'btnCloseErrorModal') {

        const modal = document.getElementById('errorModal');

        modal.classList.add('hidden');
        modal.classList.remove('flex');

    }

});

function showOrderError(message = 'Silahkan coba lagi beberapa saat atau gunakan server lainnya.') {

    const modal = document.getElementById('errorModal');

    document.getElementById('errorModalMessage').innerText = message;

    modal.classList.remove('hidden');
    modal.classList.add('flex');
}
document
.getElementById('searchCountry')
?.addEventListener(
    'input',
    e => renderCountries(e.target.value)
);

document
.getElementById('searchService')
?.addEventListener(
    'input',
    e => renderServices(e.target.value)
);

document
.getElementById('searchServer')
?.addEventListener(
    'input',
    e => renderServers(e.target.value)
);
loadCountries();
function updateSelectedCard(){

    document
        .getElementById('selectedInfoCard')
        .classList.remove('hidden');

    document.getElementById('selectedCountryText').innerText =
        selectedCountryName || 'Belum dipilih';

    document.getElementById('selectedServiceText').innerText =
       selectedServiceName || 'Belum dipilih';

    document.getElementById('selectedServerText').innerText =
        selectedProduct
? `Server ${allServers.findIndex(x=>x.id==selectedProduct)+1}`
: 'Belum dipilih';

}
function resetSelection(){

    selectedCountry = null;
    selectedCountryName = '';

    selectedService = null;
    selectedServiceName = '';

    selectedProduct = null;

    allServices = [];
    allServers = [];

    document.getElementById('services-list').innerHTML = '';
    document.getElementById('servers-list').innerHTML = '';

    document.getElementById('selectedInfoCard').classList.add('hidden');

    document.getElementById('countrySection').classList.remove('hidden');

    document.getElementById('serviceSection').classList.add('hidden');
    document.getElementById('serviceSection').classList.remove('flex');

    document.getElementById('serverSection').classList.add('hidden');
    document.getElementById('serverSection').classList.remove('flex');

    document.getElementById('total-price').innerText = 'Rp 0';

    document.querySelectorAll('.selected-item').forEach(el=>{
        el.classList.remove('selected-item');
    });

    window.scrollTo({
        top:0,
        behavior:'smooth'
    });

}
</script>

</body></html><?php /**PATH /home/nusaotp/public_html/resources/views/apk/order.blade.php ENDPATH**/ ?>