x

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <!-- Include Algolia Autocomplete.js and its CSS -->
 <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@alpha"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic">
 </link>
 <style>
     #wrapper.transparent .top_bar:not(.scroll) #menu_wrapper div .nav>li>a,
     #wrapper.transparent .top_bar:not(.scroll) #logo_right_button a#mobile_nav_icon,
     #logo_wrapper .social_wrapper ul li a {
         color: black !important;
     }

     .section-top-ticket {
         justify-content: start !important;
         display: flex;
         -webkit-box-align: center;
         gap: 2rem;
         align-items: center
     }

     .section-line-ticket {
         display: inline-block;
         height: 0.5px;
         width: 100%;
         background-color: gray
     }

     .section-skeleton-ticket {
         list-style-type: none;
         margin: 0;
         display: grid;
         /* grid-template-columns: repeat(2, 1fr); */
         grid-template-columns: repeat(3, 1fr);
         /* grid-template-columns: repeat(3, 1fr); */
         gap: 1rem;
         padding: 2rem 0px 3rem;
     }

     ul li.kotak-ticket {
         width: 100%;
         background-color: white;
         border-radius: 20px;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         cursor: default;
         box-shadow:
             0 4px 6px rgba(0, 0, 0, 0.1),
             /* bayangan besar lembut */
             0 1px 3px rgba(0, 0, 0, 0.08);
         /* bayangan halus di tepi */
         /* filter: drop-shadow(rgba(209, 203, 21, 0.4) 0px 35px 100px); */
         border: none;
     }




     ul li.kotak-ticket.active {
         outline: 4px solid #00537a;
     }

     .kotak-top-ticket {
         width: 100%;
         height: 35px;
         padding: 0.5rem 1rem;
         background-color: rgb(248, 219, 74);
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         border-bottom: 1px solid var(--divider);
     }

     .kotak-top-ticket-nodiscount {
         width: 100%;
         height: 35px;
         padding: 0.5rem 1rem;
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         border-bottom: 1px solid var(--divider);
     }

     .kotak-body-ticket {
         width: 100%;
         padding: 0.75rem 0.75rem 0px;
         display: flex;
         flex-direction: column;
         -webkit-box-pack: start;
         justify-content: flex-start;
         -webkit-box-align: center;
         align-items: center;
         -webkit-box-flex: 1;
         flex-grow: 1;
         position: relative;
         overflow: hidden;
     }

     .kotak-body-tag-ticket {
         position: absolute;
         right: -40%;
         top: 5%;
         background: #E8B44B;
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         padding: 15px 3px 6px;
         transform: rotate(40deg);
         width: 100%;
         min-height: 25px;
         text-align: center;
     }

     .kotak-body-tag-ticket p {
         font-size: 10px !important;
         /* sebelumnya 7px, kamu bisa sesuaikan */
     }

     .kotak-img-ticket {
         position: relative;
         width: 100%;
         height: 138px;
         max-width: 210px;
         margin: 0px auto;
         pointer-events: none;
         filter: drop-shadow(rgba(27, 87, 238, 0.4) 0px 0px 1px)
     }

     .kotak-img-ticket.active {
         filter: drop-shadow(rgba(27, 87, 238, 0.4) 0px 0px 45px)
     }


     .kotak-img-responsive-ticket {
         position: absolute;
         inset: 0px;
         box-sizing: border-box;
         padding: 0px;
         border: none;
         margin: auto;
         display: block;
         width: 0px;
         height: 0px;
         min-width: 100%;
         max-width: 100%;
         min-height: 100%;
         max-height: 100%;
         object-fit: contain;
     }

     .kotak-price-ticket {
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         gap: 0.75rem;
         position: relative;
         font-size: 1.5rem;
     }

     .kotak-price-discount-ticket {
         margin: 0px;
         position: relative;
         font-size: 1rem;
         font-weight: normal;
         opacity: 0.5;
         font-size: 1rem;
         color: var(--color-black);
         font-weight: 700;
         text-decoration: line-through;
     }

     .kotak-footer-ticket {
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         padding: 1rem 1rem 2rem;
         gap: 0.5rem;
         /* width: fit-content; */
         width: auto;
     }

     .btn-select-ticket {
         min-width: 222px;
         min-height: 40px;
         max-width: 100%;
         cursor: pointer;
         background: white;
         border-bottom: 2px solid #E8B44B;
         border-color: #E8B44B;
         padding: 0.5rem 1rem;
         border-radius: 6px;
         color: rgb(4, 0, 21);
         font-weight: 600;
         letter-spacing: 0.05em;
         font-size: 1rem;
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         gap: 10px;
         width: auto;
         position: relative;
         overflow: hidden;
     }

     .btn-select-ticket:hover {
         background: #E8B44B;
         color: white;
     }

     .btn-select-ticket.active {
         background: #E8B44B;
         color: white;
     }

     .section-footer-ticket {
         padding: 2rem 0px;
         position: relative;
         display: flex;
         -webkit-box-pack: justify;
         justify-content: space-between;
         align-items: flex-start;
         gap: 1.25rem;
     }

     ul.section-list-item {
         list-style-position: inside;
         margin-top: 0.5rem;
     }

     .section-price-item {
         display: flex;
         -webkit-box-pack: end;
         justify-content: flex-end;
         align-items: flex-start;
         gap: 1.25rem;
     }

     .section-price-item.total {
         display: flex;
         align-items: flex-start;
         -webkit-box-pack: justify;
         justify-content: space-between;
         gap: 1rem;
         color: var(--text-primary);
     }

     .section-items-ticket {
         text-align: justify;
     }

     .kotak-mobile-ticket {
         /* display: flex;
        flex-direction: column;
        align-items: start; */
         /* position: relative; */
     }

     .kotak-body-mobile-ticket {
         display: none;
         padding: 0px 0.75rem;
         flex-direction: row;
         -webkit-box-align: center;
         align-items: center;
         border-top-left-radius: 0px;
     }

     .kotak-body-mobile-tag-ticket {
         display: none;
     }

     .button-checkout {
         border-color: #E8B44B;
         border-radius: 10px;
         background: white;
         border-bottom: 2px solid #E8B44B;
         border-color: #E8B44B;
         padding: 0.5rem 1rem;
         border-radius: 6px;
         color: rgb(4, 0, 21);
         font-weight: 600;
         letter-spacing: 0.05em;
         font-size: 1rem;
         display: flex;
         -webkit-box-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         align-items: center;
         gap: 10px;
         width: auto;
         position: relative;
         overflow: hidden;
         cursor: not-allowed !important;
     }

     .button-checkout.active {
         background: #E8B44B;
         color: white;
         cursor: pointer !important;
     }

     @media (max-width:1280px) {
         .section-skeleton-ticket {
             grid-template-columns: 1fr 1fr;
             margin: 15px;
         }

         .kotak-body-tag-ticket {
             padding: 8px 6px 6px 27px !important;
         }

         .kotak-footer-ticket {
             padding: 1rem 8rem 2rem;
         }


     }

     .kotak-main-mobile-ticket {
         display: none;
     }

     .kotak-mobile-ticket {
         display: none;
     }

     @media (max-width: 768px) {
         .section-skeleton-ticket {
             grid-template-columns: 1fr;
             padding: 2rem 0px;
         }

         /* .kotak-body-tag-ticket {
            padding: 7px 0px 8px 48px !important;
        } */

         .kotak-mobile-ticket {
             display: block;
             width: 100%;
         }

         .kotak-top-ticket {
             /* display: none; */
         }

         .kotak-body-mobile-ticket {
             display: block;
         }

         .kotak-body-ticket {
             display: none;
         }

         .kotak-footer-ticket {
             /* padding: 0px;
            margin: 0px auto gap: 0px; */
             display: none;
         }

         .kotak-top-ticket-nodiscount {
             display: none;
         }

         .kotak-ticket {
             width: 100%;
             cursor: pointer !important;
             /* outline: transparent solid 5px; */
             background-color: white;
             border-radius: 20px;
             /* overflow: hidden; */
             display: flex;
             flex-direction: column;
             border: 0px;
         }

         .kotak-main-mobile-ticket {
             display: flex;
         }

         .kotak-body-mobile-ticket {
             overflow: hidden !important;
             display: flex;
             padding: 0px 0.75rem;
             flex-direction: row;
             -webkit-box-align: center;
             align-items: center;
             border-top-left-radius: 0px;
         }

         .kotak-ticket.active {
             overflow: hidden;
             margin-top: 20px;
             border: 2px solid white;
             filter: none;
             box-shadow: rgba(255, 255, 255, 0.55) 0px -1px 1px inset;
             filter: drop-shadow(rgba(27, 87, 238, 0.4) 0px 0px 25px);
         }

         /* .kotak-ticket {
            border-top-left-radius: 0px !important;
        } */

         .kotak-mobile-select-ticket {
             font-size: 14px;
             font-weight: 800;
             background-color: rgb(248, 219, 74);
             padding: 3px 10px;
             border-radius: 10px 10px 0px 0px;
             /* display: inline-block; */
             /* z-index: 99; */
             position: absolute;
             top: -31px;
             left: -2px;
         }

         .kotak-body-mobile-image-ticket {
             width: 100px;
             height: 88px;
             margin: 0px 10px;
         }

         .kotak-img-responsive-ticket {
             position: relative;
             box-shadow: rgba(255, 255, 255, 0.55) 0px -1px 1px inset;
             filter: drop-shadow(rgba(27, 87, 238, 0.4) 0px 0px 25px)
         }

         .kotak-body-mobile-discount-ticket {
             border-radius: 50px;
             width: initial;
             padding: 4px 10px;
             height: initial;
             background-color: rgb(248, 219, 74);
             /* display: inline-flex; */
             margin-top: 15px;
         }

         .kotak-body-mobile-price-ticket {
             display: flex;
             -webkit-box-pack: center;
             justify-content: center;
             -webkit-box-align: center;
             align-items: center;
             gap: 0.75rem;
             color: black;
             position: relative;
             justify-content: flex-start;
             -webkit-box-pack: start;

         }

         .kotak-body-mobile-tag-ticket {
             top: 21%;
             right: -48%;
             height: 11px;
             padding: 9px 60px 6px 27px !important;
             font-size: 8px;
             position: absolute;
             background: #E8B44B;
             display: flex;
             -webkit-box-pack: center;
             justify-content: center;
             -webkit-box-align: center;
             align-items: center;
             padding: 3px 6px;
             transform: rotate(40deg);
             width: 100%;
             min-height: 25px;
             text-align: center;
         }

         .btn-select-ticket {
             /* min-width: 111px;
            min-height: 40px;
            max-width: 100%; */
         }

         .kotak-mobile-footer-ticket {
             display: flex;
             -webkit-box-pack: center;
             justify-content: center;
             -webkit-box-align: center;
             align-items: center;
             /* padding: 1rem 1rem 2rem; */
             gap: 0.5rem;
             width: 50%;
             margin: 20px;
             /* width: auto; */
         }

         .kotak-body-mobile-tag-ticket {
             display: none;
         }
     }

     @media (max-width: 690px) {
         .kotak-body-mobile-image-ticket {
             width: 63px;
             height: 69px;
             margin: 0px 10px;
         }

         .kotak-mobile-footer-ticket {
             display: none;
         }

         .kotak-main-mobile-ticket {
             cursor: pointer;
         }

         .section-top-ticket {
             margin-top: 10px;
         }
     }
 </style>

 <style>
     #add-icon,
     #minus-icon {
         background-color: green;
         color: white;
         font-size: 24px;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         border: none;
         outline: none;
         cursor: pointer;
     }

     .addData:hover,
     #minus-icon:hover {
         background-color: #E8B44B;
     }

     .remove[disabled],
     .vocer[disabled],
     .addData[disabled] {
         background-color: lightgray;
         cursor: default;
     }

     #loader {
         position: fixed;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: rgba(255, 255, 255, 0.8);
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .loader {
         border: 16px solid #f3f3f3;
         border-top: 16px solid #3498db;
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: spin 2s linear infinite;
     }

     @keyframes  spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     @media (max-width: 576px) {
         .section-footer-ticket {
             flex-direction: column;
             align-items: stretch;
         }

         .section-items-ticket,
         .section-price-item {
             width: 100%;
             margin-bottom: 1rem;
         }

         .section-price-item {
             text-align: center;
         }

         .section-price-item .total {
             margin-bottom: .5rem;
         }
     }

     /* Hanya untuk mobile (<576px, atau sesuaikan breakpoint µmu) */
     @media (max-width: 575.98px) {

         /* Hilangkan garis pemisah atas */
         .section-line-ticket {
             display: none;
         }

         /* Footer jadi bottom-sheet */
         .section-footer-ticket {
             position: fixed;
             bottom: 0;
             left: 0;
             width: 100%;
             background: linear-gradient(to top, #E8B44B, white);
             color: black;
             padding: 1rem;
             box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
             display: flex !important;
             flex-direction: column;
             gap: 0rem;
             z-index: 555;
         }

         /* Breakdown di atas footer */
         .section-items-ticket {
             display: block;
             color: black;
             font-size: 0.85rem;
         }

         .section-items-ticket #list-item {
             font-weight: bold;
             margin-bottom: 0.5rem;
             font-size: 1.5rem
         }

         .section-items-ticket #include-item {
             padding-left: 1rem;
             font-size: 0.9rem;
             display: none !important;
         }

         /* Total besar */
         .section-price-item {
             align-items: center;
         }

         .section-price-item .total {
             font-size: 1rem;
             opacity: 0.8;
         }

         #total-price {
             font-size: 2rem;
             font-weight: bold;
             color: black;
         }

         /* Tombol gradien full-width */
         .button-checkout {
             width: 100%;
             padding: 0.75rem 0;
             font-size: 1rem;
             font-weight: 600;
             color: black;
             background: linear-gradient(90deg, #ff6a00 0%, #ee0979 100%);
             border: none;
             border-radius: 30px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         }

     }

     .suggestion-list {
         position: absolute;
         top: calc(100% + 4px);
         /* sedikit jarak di bawah input */
         left: 0;
         right: auto;
         /* agar width-nya mengikuti konten */
         width: 100%;
         /* atau width: auto; sesuai kebutuhan */
         max-height: 200px;
         margin: 0;
         padding: 0;
         list-style: none;
         overflow-y: auto;
         z-index: 1050;
         /* di atas modal/backdrop */
         border: 1px solid #ccc;
         border-radius: 0.25rem;
         background: #fff;
     }

     .suggestion-list .suggestion-item {
         padding: 0.5rem;
         cursor: pointer;
     }

     .suggestion-list .suggestion-item:hover {
         background-color: #f0f0f0;
     }
 </style>

 <link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css" />
 <script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
 <style>
     .suggestions-box {
         border: 1px solid #ddd;
         max-height: 150px;
         overflow-y: auto;
         background-color: #fff;
     }

     .suggestions-box div {
         padding: 8px;
         cursor: pointer;
     }

     .suggestions-box div:hover {
         background-color: #f0f0f0;
     }

     .typeahead {
         background-color: #fff !important;
         /* Warna latar belakang putih */
         color: #000 !important;
         /* Warna teks hitam */
         border: 1px solid #ccc !important;
         /* Batas abu-abu */
         z-index: 1051;
         /* Mengatur agar berada di atas elemen lain */
     }

     .typeahead.dropdown-menu {
         display: none;
         /* Ubah menjadi none untuk mencegah tetap tampil */
     }

     .typeahead.dropdown-menu.show {
         display: block !important;
         /* Hanya tampil ketika ada saran */
     }

     .typeahead .active {
         background-color: #007bff !important;
         /* Warna latar belakang untuk item yang dipilih */
         color: #fff !important;
         /* Warna teks putih */
     }

     .iti {
         display: block;
     }

     .text-up {
         font-size: 30px;
     }

     @media (max-width: 576px) {
         .text-up {
             font-size: 13px;
         }
     }

     /* Styling untuk checkbox bulat */
     input[type="checkbox"].round {
         appearance: none;
         -webkit-appearance: none;
         background-color: #fff;
         border: 1.5px solid #aaa;
         width: 14px;
         height: 14px;
         border-radius: 50%;
         /* ini yang bikin bulat */
         position: relative;
         cursor: pointer;
         vertical-align: middle;
         transition: all 0.2s ease;
     }

     input[type="checkbox"].round:hover {
         border-color: #00537a;
     }

     input[type="checkbox"].round:checked {
         border-color: transparent;
         background: #00537a;
     }

     input[type="checkbox"].round:checked::after {
         content: "";
         position: absolute;
         top: 3px;
         left: 3px;
         width: 7px;
         height: 7px;
         border-radius: 50%;
     }

     .section-footer-ticket {
         font-size: 13px;
         line-height: 1.6;
         margin-top: 16px;
     }

     .section-footer-ticket #list-item {
         font-weight: 600;
         text-transform: uppercase;
         margin-bottom: 4px;
     }

     .section-footer-ticket #include-item {
         max-width: 560px;
         margin-left: 8px;
     }

     @media (max-width: 768px) {
         .section-footer-ticket {
             flex-direction: column !important;
             align-items: flex-start !important;
         }

         .section-footer-ticket #include-item {
             margin-left: 0;
             margin-top: 4px;
         }
     }

     .ticket-tag-text {
         font-size: 8px;
         font-style: italic;
         line-height: 1.4;
         color: #333;
         margin-top: 6px;
         padding: 0 10px;
         text-align: center;
     }

     .ticket-tag-text b {
         font-style: normal;
         font-weight: 700;
         color: #000;
     }

     .section-footer-ticket {
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         background: #fff;
         box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
         z-index: 1000;
         padding: 1rem 1.5rem;
         transform: translateY(100%);
         transition: transform 0.3s ease;
     }

     .section-footer-ticket.show {
         transform: translateY(0);
     }

     body.has-footer-ticket {
         padding-bottom: 120px;
     }

     .kotak-ticket {
         cursor: pointer;
     }

     .kotak-ticket:hover {
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
         transition: .12s ease;
     }

     /* === SKIN V2: gaya seperti contoh gambar === */

     /* 1) Bingkai luar + inner card putih */
     .kotak-ticket[data-is-free="0"] {
         position: relative;
         border-radius: 22px;
         padding: 14px;
         /* ruang untuk bingkai */
         background: #00537a;
         /* emas: bingkai */
         box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
         overflow: hidden;
     }

     /* inner panel putih (tanpa ubah HTML) */
     .kotak-ticket[data-is-free="0"]::after {
         content: "";
         position: absolute;
         inset: 10px;
         background: #ffffff;
         border-radius: 18px;
         box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
         z-index: 0;
     }

     /* pastikan isi kartu berada di atas inner panel */
     .kotak-ticket[data-is-free="0"]>* {
         position: relative;
         z-index: 1;
     }

     /* 2) Header "SAVE USD ..." jadi chip center */
     .kotak-ticket[data-is-free="0"] .kotak-top-ticket {
         background: transparent;
         border: 0;
         height: auto;
         padding-top: 8px;
     }

     .kotak-ticket[data-is-free="0"] .kotak-top-ticket strong {
         display: inline-block;
         background: #00537a;
         color: white;
         font-weight: 800;
         padding: .35rem 1.25rem;
         border-radius: 999px;
         box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
     }

     /* 3) Glow lembut di belakang gambar tiket */
     .kotak-ticket[data-is-free="0"] .kotak-img-ticket {
         max-width: 260px;
         margin-top: 8px;
     }

     .kotak-ticket[data-is-free="0"] .kotak-img-ticket::before {
         content: "";
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 320px;
         height: 180px;
         background: radial-gradient(ellipse at center,
                 rgba(9, 41, 76, .10) 0%, rgba(9, 41, 76, 0) 70%);
         z-index: -1;
     }

     /* 4) Judul & harga lebih tegas */
     .kotak-ticket[data-is-free="0"] p {
         border-bottom: 3px solid #00537a !important;
     }

     .kotak-ticket[data-is-free="0"] .kotak-price-ticket b {
         color: #00537a;
         /* navy */
         font-weight: 800;
         font-size: 1.75rem;
         /* agak lebih besar */
     }

     .kotak-ticket[data-is-free="0"] .kotak-price-discount-ticket {
         color: #9aa3af;
         opacity: .9;
     }

     /* 5) Tombol ‘Select’ gaya gold rounded */
     .kotak-ticket[data-is-free="0"] .btn-select-ticket {
         background: #00537a;
         color: #fff;
         border: none;
         border-radius: 14px;
         padding: .75rem 1.25rem;
         min-width: 240px;
         box-shadow:
             inset 0 -4px 0 rgba(0, 0, 0, .12),
             0 8px 18px rgba(0, 0, 0, .12);
         transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
     }

     .kotak-ticket[data-is-free="0"] .btn-select-ticket:hover,
     .kotak-ticket[data-is-free="0"] .btn-select-ticket.active {
         filter: brightness(1.05);
         transform: translateY(-1px);
     }

     /* 6) FREE tickets: beda visual tapi tetap clean */
     .kotak-ticket[data-is-free="1"] {
         position: relative;
         border-radius: 22px;
         padding: 14px;
         /* background: #00537a; */
         background: #e1b347;
         /* bingkai hijau muda */
         box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
     }

     .kotak-ticket[data-is-free="1"]::after {
         content: "";
         position: absolute;
         inset: 10px;
         background: #fff;
         border-radius: 18px;
         z-index: 0;
     }

     .kotak-ticket[data-is-free="1"]>* {
         position: relative;
         z-index: 1;
     }

     .kotak-ticket[data-is-free="1"] .kotak-top-ticket {
         background: transparent;
         border: 0;
         height: auto;
         padding-top: 8px;
     }

     .kotak-ticket[data-is-free="1"] .kotak-top-ticket strong {
         display: inline-block;
         background: #8ee1a2;
         color: #0b3d24;
         font-weight: 800;
         padding: .35rem 1.25rem;
         border-radius: 999px;
         box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
     }

     .kotak-ticket[data-is-free="1"] .kotak-price-ticket b {
         color: #e1b347;
         font-weight: 800;
     }

     .kotak-ticket[data-is-free="1"] .btn-select-ticket {
         background: #e1b347;
         color: #fff;
         border: none;
         border-radius: 14px;
         padding: .75rem 1.25rem;
         min-width: 240px;
         box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .10);
     }

     .kotak-ticket[data-is-free="1"] .btn-select-ticket:hover,
     .kotak-ticket[data-is-free="1"] .btn-select-ticket.active {
         filter: brightness(1.06);
         transform: translateY(-1px);
     }

     /* 7) Hover umum */
     .kotak-ticket:hover {
         transform: none;
     }

     /* override hover lama biar stabil */
 </style>
<!DOCTYPE html>
<html lang="en" style="--bs-primary:#00537a;--bs-warning:#E8B44B;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">

    
    <link rel="icon" href="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img/logo.jpg" type="image/png">

    
    <title>Indonesia Miner Conference &amp; Exhibition 2026 | May 5–7, Jakarta</title>
    <meta name="description" content="Indonesia Miner is the premier platform for mining news, events, and industry updates.">
    <meta name="keywords" content="Indonesia Miner, Mining Conference, Coal, EV Battery, Minerals, Mining News, Indonesia Mining">
    <link rel="canonical" href="https://indonesiaminer.com/d/ticket">

    
    <meta property="og:title" content="Indonesia Miner Conference &amp; Exhibition 2026 | May 5–7, Jakarta" />
    <meta property="og:description" content="Indonesia Miner is the premier platform for mining news, events, and industry updates." />
    <meta property="og:image" content="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/public/img-2026.png" />
    <meta property="og:url" content="https://indonesiaminer.com/d/ticket" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Indonesia Miner" />

    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Indonesia Miner Conference &amp; Exhibition 2026 | May 5–7, Jakarta">
    <meta name="twitter:description" content="Your trusted source for mining industry news.">
    <meta name="twitter:image" content="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/public/img-2026.png">

    
    <!-- Bootstrap CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
 <!-- intl-tel-input CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <style>
     .marquee {
         width: 100%;
         overflow: hidden;
         position: relative;
         white-space: nowrap;
         box-sizing: border-box;
     }

     /* Sponsor */
     .marquee-content-sponsor {
         display: inline-block;
         white-space: nowrap;
         animation: marqueeAnimationSponsor var(--marquee-duration-sponsor, 50s) linear infinite;
     }

     /* Exhibitor */
     .marquee-content-exhibitor {
         display: inline-block;
         white-space: nowrap;
         animation: marqueeAnimationExhibitor var(--marquee-duration-exhibitor, 50s) linear infinite;
     }

     @keyframes  marqueeAnimationSponsor {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(calc(-1 * var(--content-width-sponsor, 1000px)));
         }
     }

     @keyframes  marqueeAnimationExhibitor {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(calc(-1 * var(--content-width-exhibitor, 1000px)));
         }
     }

     /* Styling gambar umum */
     .marquee-content-sponsor img,
     .marquee-content-exhibitor img {
         margin-right: 5px;
         vertical-align: middle;
     }

     .exhibitor-logo {
         width: 100px;
         height: 80px;
         object-fit: contain;
     }
 </style>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         function setupMarquee({
             marqueeId,
             contentClass,
             speed,
             widthVar,
             durationVar
         }) {
             const marquee = document.getElementById(marqueeId);
             if (!marquee) return;
             const content = marquee.querySelector(`.${contentClass}`);
             if (!content) return;

             // Clone content untuk looping seamless
             marquee.appendChild(content.cloneNode(true));

             setTimeout(function() {
                 let contentWidth = content.offsetWidth;
                 let marqueeWidth = marquee.offsetWidth;

                 if (contentWidth < marqueeWidth) {
                     contentWidth = marqueeWidth;
                 }

                 marquee.style.setProperty(widthVar, contentWidth + 'px');

                 let duration = contentWidth / speed;
                 if (duration < 20) duration = 20;

                 marquee.style.setProperty(durationVar, duration + 's');
             }, 500);
         }

         // Sponsor
         setupMarquee({
             marqueeId: 'marquee2025',
             contentClass: 'marquee-content-sponsor',
             speed: 100,
             widthVar: '--content-width-sponsor',
             durationVar: '--marquee-duration-sponsor'
         });

         // Exhibitor
         setupMarquee({
             marqueeId: 'marquee2024',
             contentClass: 'marquee-content-exhibitor',
             speed: 100,
             widthVar: '--content-width-exhibitor',
             durationVar: '--marquee-duration-exhibitor'
         });
     });
 </script>

 <!-- Custom CSS -->
 <style>
     :root {
         /* custom theme vars */
         --bs-primary: #00537a;
         --bs-primary-rgb: 0, 83, 122;
         --bs-warning: #E8B44B;
         --bs-warning-rgb: 232, 180, 75;
     }

     /* skeleton placeholder */
     .lazy-placeholder {
         background-color: #e0e0e0;
         border-radius: .25rem;
         position: relative;
         overflow: hidden;
     }

     .lazy-placeholder::after {
         content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(to right,
                 transparent 0%,
                 rgba(255, 255, 255, 0.6) 50%,
                 transparent 100%);
         animation: shimmer 1.5s infinite;
     }

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

     body {
         margin: 0;
         padding: 0;
     }

     .custom-navbar {
         backdrop-filter: blur(15px);
         background-color: rgba(255, 255, 255, 0.5);
         transition: background-color 0.3s, box-shadow 0.3s;
     }

     .custom-navbar.scrolled {
         background-color: rgba(255, 255, 255, 0.9);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     }

     .jarallax {
         position: relative;
         height: 75vh;
         color: white;
     }

     .jarallax>.container {
         position: relative;
         z-index: 2;
     }

     .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1;
     }

     .jarallax h1 {
         font-size: 3.2rem;
     }

     .jarallax p {
         font-size: 1.1rem;
     }

     /* Pastikan ini di-load setelah Bootstrap */
     .btn-outline-warning:hover {
         /* biar teks default link juga putih */
         color: #fff !important;
         background-color: var(--bs-warning) !important;
         border-color: var(--bs-warning) !important;
     }

     /* Override nested text-warning dan ikon */
     .btn-outline-warning:hover .text-warning,
     .btn-outline-warning:hover .bi-play-fill {
         color: #fff !important;
     }


     @media (max-width: 768px) {
         .jarallax {
             height: 500px;
         }

         .jarallax h1 {
             font-size: 2rem;
         }

         .jarallax p {
             font-size: 1rem;
         }
     }

     .sticky-bottom-bar {
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         background: linear-gradient(126deg, #00537a, #5fa8cb);
         /* ganti gradien sesuai selera */
         padding: 0.75rem 1rem;
         z-index: 1000;
         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
     }

     .sticky-bottom-bar .timer {
         font-weight: bold;
         font-size: 0.9rem;
     }

     @media (max-width: 576px) {
         .timer .values {
             display: flex;
             gap: .25rem;
             align-items: center;
             margin-top: .25rem;
             font-size: 10px;
         }

         .sticky-bottom-bar {
             flex-direction: row !important;
             /* tetap sebar kiri–kanan */
             justify-content: flex-start !important;
             /* mulai dari kiri */
             align-items: center;
             /* beri extra padding kanan untuk space widget Qontak */
             padding: 0.75rem 4rem 0.75rem 1rem;
         }

         /* Price (“timer”) lebih kecil */
         .sticky-bottom-bar .timer {
             font-size: 10px;
         }

         /* Tombol di kanan, tapi geser sedikit ke kiri via margin-right */
         .sticky-bottom-bar .btn-warning {
             margin-left: 85px;
             font-size: 8px;
         }
     }




     .navbar-nav .dropdown:hover .dropdown-menu {
         display: block;
         margin-top: 0;
     }

     .navbar-collapse {
         transition: transform 0.3s ease-in-out;
     }

     .lazy-placeholder {
         background-color: #e0e0e0;
         border-radius: .25rem;
         position: relative;
         overflow: hidden;
     }

     .lazy-placeholder::after {
         content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
         animation: shimmer 1.5s infinite;
     }

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

     @media (max-width: 768px) {
         .navbar-collapse {
             position: fixed;
             top: 0;
             right: 0;
             transform: translateX(100%);
             height: 100vh;
             width: 80%;
             max-width: 320px;
             background: linear-gradient(135deg, #e6f7ff, #ccf2ff);
             padding: 2rem 1rem;
             box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
             border-radius: 1rem 0 0 1rem;
             z-index: 1050;
             overflow-y: auto;
         }

         .navbar-collapse.show {
             transform: translateX(0);
         }

         .navbar-toggler.collapsed {
             position: absolute;
             top: 1.25rem;
             right: 1.25rem;
             z-index: 1100;
         }
     }

     @media (max-width: 991px) {

         /* Panel utama */
         nav.d-lg-none .navbar-collapse {
             position: fixed;
             top: 0;
             right: 0;
             width: 75%;
             max-width: 320px;
             height: 100vh;
             padding: 1.5rem 1rem;
             border-top-left-radius: 1rem;
             border-bottom-left-radius: 1rem;
             background: linear-gradient(to bottom, #e9faff, #d5f3ff);
             z-index: 1045;
             overflow-y: auto;
         }

         .mobile-close {
             /* hilangkan SVG default */
             background-image: none !important;
             /* gunakan content pseudo-element untuk X */
             position: absolute;
             top: 1rem;
             right: 1rem;
             width: auto;
             height: auto;
             padding: 0;
             font-size: 1.5rem;
             font-weight: bold;
             color: #333;
             background: transparent;
             box-shadow: none;
         }

         .mobile-close::before {
             content: '×';
         }

         .mobile-close:hover {
             opacity: 1;
         }

         /* CTA buttons */
         .mobile-ctas {
             margin: 3rem 0 2rem;
             /* top utk ruang tombol close */
         }

         .mobile-ctas .btn-warning,
         .mobile-ctas .btn-outline-warning {
             width: 100%;
             font-weight: 600;
             border-radius: 0.5rem;
             margin-bottom: 0.75rem;
         }

         .mobile-ctas .btn-warning {
             padding: 0.75rem;
             font-size: 1rem;
         }

         .mobile-ctas .btn-outline-warning {
             padding: 0.7rem;
             font-size: 0.95rem;
         }

         /* List menu utama */
         .navbar-nav.flex-column {
             gap: 0.5rem;
         }

         .navbar-nav .nav-item {
             margin: 0;
         }

         .navbar-nav .nav-link {
             display: block;
             color: #333;
             font-size: 1rem;
             padding: 0.65rem 0;
             transition: background .2s;
         }

         .navbar-nav .nav-link:hover {
             background: rgba(0, 0, 0, 0.03);
             border-radius: 0.25rem;
             color: #000;
         }

         /* Submenu default (tersembunyi) */
         .has-submenu .submenu {
             display: none;
             margin-top: 0.25rem;
             padding-left: 1rem;
         }

         .has-submenu .submenu .nav-link {
             color: #555;
             font-size: 0.95rem;
             padding-left: 0;
         }

         /* Toggle caret */
         .has-submenu>.submenu-toggle {
             position: relative;
             padding-right: 2rem;
             color: #333;
             cursor: pointer;
         }

         .has-submenu>.submenu-toggle .caret {
             position: absolute;
             top: 50%;
             right: 0.5rem;
             width: 0.6em;
             height: 0.6em;
             border: solid #333;
             border-width: 0.15em 0.15em 0 0;
             transform: translateY(-50%) rotate(135deg);
             transition: transform .3s, border-color .3s;
         }

         /* Submenu terbuka */
         .has-submenu.open .submenu {
             display: block;
         }

         .has-submenu.open>.submenu-toggle {
             display: block;
             margin: 0.25rem 0;
             padding: 0.75rem 1rem;
             background-color: #1e88e5;
             color: #fff;
             border-radius: 0.5rem;
         }

         .has-submenu.open>.submenu-toggle .caret {
             transform: translateY(-50%) rotate(-45deg);
             border-color: #fff;
             right: 1rem;
         }

         .has-submenu.open {
             /* margin: 0 0.5rem; */
             /* ruang kiri/kanan */
         }

         /* Overlay backdrop */
         #mobileMenuOverlay {
             position: fixed;
             inset: 0;
             background: rgba(255, 255, 255, 0.2);
             backdrop-filter: blur(6px);
             visibility: hidden;
             opacity: 0;
             transition: opacity .3s ease;
             z-index: 1020;
         }

         #mobileMenuOverlay.show {
             visibility: visible;
             opacity: 1;
         }

         /* Social footer */
         .mobile-social {
             margin-top: auto;
             padding-top: 2rem;
             border-top: 1px solid rgba(0, 0, 0, 0.1);
         }

         .mobile-social span {
             display: block;
             color: #333;
             font-weight: 500;
             margin-bottom: 0.5rem;
         }

         .mobile-social .icons a {
             font-size: 1.2rem;
             color: #333;
             opacity: 0.8;
             margin-right: 0.75rem;
         }

         .mobile-social .icons a:hover {
             opacity: 1;
         }
     }


     /* Modal overlay */
     .modal-custom {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         z-index: 1050;
         align-items: center;
         justify-content: center;
     }

     /* Tampilkan modal ketika .show */
     .modal-custom.show {
         display: flex;
     }

     /* Konten modal */
     .modal-custom-content {
         position: relative;
         background: var(--bs-primary);
         padding: 2rem;
         border-radius: .5rem;
         width: 90%;
         max-width: 600px;
         color: #fff;
     }

     /* Tombol close */
     .modal-custom-content .close {
         position: absolute;
         top: .5rem;
         right: .75rem;
         font-size: 1.5rem;
         cursor: pointer;
         color: #fff;
     }

     /* Radio group styling */
     .radio-group {
         display: flex;
         gap: 1rem;
     }

     .radio-item input {
         margin-right: .25rem;
     }

     /* MODAL CUSTOM */
     #interestModal .modal-dialog {
         max-width: 800px;
     }

     #interestModal .modal-content {
         background-color: var(--bs-primary);
         border-radius: 1rem;
         padding: 2rem;
         /* color: #fff; */
         border: none;
     }

     /* di home.css, setelah styling modal sebelumnya */

     #interestModal .modal-header {
         /* non-flex supaya judul bisa benar-benar di tengah */
         display: block;
         padding: 1rem 2rem 0;
         /* atur padding atas & samping */
         position: relative;
         /* untuk positioning close icon */
         text-align: center;
         /* center teks */
         border: none;
         /* hilangkan garis bawah */
     }

     #interestModal .modal-title {
         margin: 0;
         font-size: 1.25rem;
         line-height: 1.4;
     }

     #interestModal .btn-close {
         /* posisikan close icon fixed di pojok kanan atas header */
         position: absolute;
         top: 1rem;
         right: 1rem;
         /* tombol bawaan Bootstrap sudah memiliki background transparan */
     }


     #interestModal .modal-body {
         padding-top: 1rem;
     }

     #interestModal .form-control:focus {
         box-shadow: none;
     }

     /* PHONE INPUT GROUP */
     .input-group .input-group-text {
         background-color: #fff;
         border: none;
         border-top-left-radius: 0.5rem;
         border-bottom-left-radius: 0.5rem;
     }

     .input-group .form-control {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }

     /* SUBMIT BUTTON */
     #interestModal .btn-submit {
         background-color: var(--bs-warning);
         color: #000;
         font-weight: 500;
         border: none;
         border-radius: 2rem;
         padding: 0.75rem 2rem;
     }

     /* buat teks “Mining Resilience” 4px lebih besar */
     .resilience-text {
         /* mobile: fs-6 (1rem) + 4px = 1rem + .25rem = 1.25rem */
         font-size: 1.25rem !important;
     }

     /* responsive font adjustments for jarallax */
     @media (max-width: 767.98px) {
         .header-line {
             font-size: 1.2rem !important;
         }

         .resilience-text {
             font-size: 1rem !important;
         }
     }

     /* typewriter effect + blinking cursor */
     .typewriter {
         overflow: hidden;
         white-space: nowrap;
         /* border-right: .15em solid var(--bs-warning); */
         /* pause before start: */
         animation:
             typing 3s steps(40, end),
             blink-cursor .7s step-end infinite;
     }

     /* keyframes for the typing */
     @keyframes  typing {
         from {
             width: 0;
         }

         to {
             width: 100%;
         }
     }

     /* blink cursor */
     @keyframes  blink-cursor {
         50% {
             border-color: transparent;
         }
     }

     /* fade-in effect */
     /* Fade-in saja, tanpa cursor */
     .fade-in {
         opacity: 0;
         transform: translateY(10px);
         animation: fadeInUp 0.8s ease-out forwards;
     }

     /* Hanya pakai typewriter di desktop (>=768px) */
     @media (min-width: 768px) {
         .typewriter {
             overflow: hidden;
             white-space: nowrap;
             animation: typing 3s steps(40, end) forwards;
         }

         @keyframes  typing {
             from {
                 width: 0;
             }

             to {
                 width: 100%;
             }
         }
     }

     /* Di mobile (<768px), disable typewriter dan gunakan fade-in biasa */
     @media (max-width: 767.98px) {
         .typewriter {
             /* kembalikan ke wrapping normal */
             white-space: normal !important;
             overflow: visible !important;
             width: auto !important;
             /* pakai fade-in agar tetap muncul smooth */
             animation: fadeInUp 0.8s ease-out forwards !important;
         }
     }

     /* animasi fade-in yang sudah ada */
     @keyframes  fadeInUp {
         from {
             opacity: 0;
             transform: translateY(10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* ============================================
   Enable typewriter hanya di layar lebar (>=992px)
   ============================================ */
     @media (min-width: 992px) {
         .typewriter {
             white-space: nowrap;
             overflow: hidden;
             width: 0;
             animation:
                 typing 3s steps(40, end) forwards;
         }

         @keyframes  typing {
             from {
                 width: 0;
             }

             to {
                 width: 100%;
             }
         }
     }

     /* ==================================================
   Disable typewriter & pakai fade-in untuk <=991px
   ================================================== */
     @media (max-width: 991.98px) {
         .typewriter {
             /* kembalikan wrapping & lebar default */
             white-space: normal !important;
             overflow: visible !important;
             width: auto !important;
             /* pakai fade-in supaya muncul halus */
             animation: fadeInUp 0.8s ease-out forwards !important;
         }
     }

     /* fade-in effect (dipakai juga di mobile) */
     @keyframes  fadeInUp {
         from {
             opacity: 0;
             transform: translateY(10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }


     .iti {
         display: block;
     }
 </style>
 <style>
     /* tiket card dasar */
     .ticket-card {
         border: none;
         border-radius: 1rem;
         overflow: hidden;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         position: relative;
         transition: transform .3s ease, box-shadow .3s ease;
     }

     /* efek hover: kartu naik & bayangan tegas */
     .ticket-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     }

     /* overlay putih semi-transparent untuk efek “fade” */
     .ticket-card::before {
         content: "";
         position: absolute;
         inset: 0;
         background: rgba(255, 255, 255, 0);
         transition: background .3s ease;
         border-radius: 1rem;
         pointer-events: none;
     }

     .ticket-card:hover::before {
         /* background: rgba(255, 255, 255, 0.3); */
     }

     /* header kartu */
     .ticket-card .card-header {
         font-size: 1.25rem;
         font-weight: 700;
         padding: 1rem;
         border-bottom: none;
         background: #fff;
     }

     /* section harga */
     .ticket-price-section {
         background: linear-gradient(90deg, #F9DB4A, #FF9F28);
         color: #000;
         padding: 2rem 1rem;
     }

     /* daftar benefit */
     .ticket-features li {
         padding: .5rem 0;
         border-bottom: 1px solid #e9ecef;
     }

     .ticket-features li:last-child {
         border-bottom: none;
     }

     /* tombol BUY NOW */
     .ticket-btn {
         border-radius: .5rem;
         padding: .75rem 1.5rem;
         font-size: 1rem;
         font-weight: 500;
         transition: background-color .3s ease;
     }

     .ticket-btn:hover {
         background-color: #e0a534 !important;
     }

     /* ribbone diskon */
     .ribbon {
         position: absolute;
         top: 1rem;
         left: -2rem;
         width: 8rem;
         text-align: center;
         transform: rotate(-45deg);
         font-size: .85rem;
         font-weight: 600;
         color: #fff;
         z-index: 2;
     }

     .ribbon.bg-danger {
         background: #dc3545 !important;
     }

     /* override utilitas Bootstrap warning menjadi kuning konsisten */
     .bg-warning {
         background: #E8B44B !important;
         border-color: #E8B44B !important;
     }

     /* responsive untuk tablet/mobile */
     @media (max-width: 768px) {
         .ribbon {
             top: .5rem;
             left: -1.5rem;
             width: 6rem;
             font-size: .75rem;
         }

         .display-4 {
             font-size: 2rem !important;
         }
     }

     .reserve-modal-content {
         background: linear-gradient(to bottom, #E8B44B, white);
         border-radius: 1rem;
     }

     .reserve-modal-content .form-control {
         border-radius: .5rem;
     }

     .reserve-modal-content .btn-close {
         filter: invert(1);
     }

     .g-recaptcha {
         margin: 1rem 0;
     }

     /* Section jarallax: custom responsive font-sizes */
     @media (max-width: 768px) {

         /* tablet ke bawah: tarik turun satu step ukuran */
         .jarallax .display-6,
         .jarallax .display-md-5 {
             font-size: 2rem !important;
             /* default display-5 adalah ~3rem, kita ke ~2rem */
             line-height: 1.2;
         }

         .jarallax .resilience-text {
             font-size: 1rem !important;
             /* dari fs-md-5 (1.5rem) ke 1rem */
         }
     }

     @media (max-width: 576px) {

         /* HP kecil: lagi turunkan */
         .jarallax .display-6,
         .jarallax .display-md-5 .jarallax .display-4 {
             font-size: 1.5rem !important;
             line-height: 1.2;
         }

         .jarallax .resilience-text {
             font-size: 0.9rem !important;
         }

         .jarallax p.typewriter {
             font-size: 0.85rem;
             /* paragraf juga kecilkan */
             line-height: 1.4;
         }

         .jarallax .container {
             padding-top: 2.5rem !important;
         }

         /* Kalau masih kurang: beri margin pada judul */
         .jarallax .container>.fw-bold {
             margin-top: 1rem;
         }

         #exhibition-page .container-fluid {
             padding-bottom: 3rem;
         }
     }


     /* ========== Base (desktop & general) ========== */
     .custom-yellow-btn {
         background: linear-gradient(180deg, #FFF27A 0%, #F7C100 100%);
         color: #333;
         /* gunakan font-size fluid agar adaptif antar layar */
         font-size: clamp(.95rem, 1vw + .6rem, 1rem);
         padding: .75rem 1.75rem;
         text-transform: uppercase;
         letter-spacing: .05em;
         border: none;
         border-radius: 12px;
         box-shadow:
             0 8px 16px rgba(0, 0, 0, .15),
             inset 0 -4px 8px rgba(0, 0, 0, .10);
         transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
         outline: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: .5rem;
         line-height: 1.1;
         white-space: nowrap;
     }

     .custom-yellow-btn:hover {
         transform: translateY(-2px);
         box-shadow:
             0 12px 24px rgba(0, 0, 0, .20),
             inset 0 -4px 8px rgba(0, 0, 0, .10);
     }

     /* Active (klik/tap) */
     .custom-yellow-btn:active {
         transform: translateY(0);
         box-shadow:
             0 6px 12px rgba(0, 0, 0, .18),
             inset 0 -2px 6px rgba(0, 0, 0, .10);
         filter: brightness(.98);
     }

     /* Focus keyboard (aksesibilitas) */
     .custom-yellow-btn:focus-visible {
         outline: 2px solid #B88400;
         /* gold-ish */
         outline-offset: 2px;
         box-shadow:
             0 0 0 3px rgba(255, 214, 10, .35),
             0 8px 16px rgba(0, 0, 0, .15),
             inset 0 -4px 8px rgba(0, 0, 0, .10);
     }

     /* Disabled */
     .custom-yellow-btn:disabled,
     .custom-yellow-btn[aria-disabled="true"] {
         opacity: .6;
         cursor: not-allowed;
         box-shadow: none;
     }

     /* ========== Tablet (≤ 991.98px) ========== */
     @media (max-width: 991.98px) {
         .custom-yellow-btn {
             padding: .65rem 1.25rem;
             letter-spacing: .04em;
             /* sedikit rapat */
             border-radius: 10px;
             box-shadow:
                 0 6px 12px rgba(0, 0, 0, .14),
                 inset 0 -3px 6px rgba(0, 0, 0, .10);
         }

         /* kalau dua tombol berdampingan di navbar, beri jarak aman */
         .navbar .custom-yellow-btn+.custom-yellow-btn {
             margin-left: .5rem;
         }
     }

     /* ========== Mobile (≤ 575.98px) ========== */
     @media (max-width: 575.98px) {
         .custom-yellow-btn {
             /* full-width by default di mobile (bisa dicabut kalau perlu) */
             width: 100%;
             padding: .6rem 1rem;
             font-size: clamp(.9rem, 3.5vw, .95rem);
             letter-spacing: .035em;
             border-radius: 10px;
             box-shadow:
                 0 5px 10px rgba(0, 0, 0, .12),
                 inset 0 -3px 6px rgba(0, 0, 0, .10);
         }

         /* kalau dua tombol ditaruh berurutan, kasih gap vertikal */
         .custom-yellow-btn+.custom-yellow-btn {
             margin-top: .5rem;
             margin-left: 0;
         }
     }

     /* ========== Very small devices (≤ 360px) ========== */
     @media (max-width: 360px) {
         .custom-yellow-btn {
             padding: .55rem .9rem;
             letter-spacing: .025em;
             border-radius: 9px;
         }
     }

     /* ========== Motion preference ========== */
     @media (prefers-reduced-motion: reduce) {
         .custom-yellow-btn {
             transition: none;
         }
     }


     .custom-primary-btn {
         background: linear-gradient(126deg, #00537a, #5fa8cb);
         color: white;
         padding: 0.75rem 1.75rem;
         font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         border: none;
         border-radius: 12px;
         box-shadow:
             0 8px 16px rgba(0, 0, 0, 0.15),
             inset 0 -4px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.15s ease, box-shadow 0.15s ease;
     }

     .custom-primary-btn:hover {
         transform: translateY(-2px);
         box-shadow:
             0 12px 24px rgba(0, 0, 0, 0.2),
             inset 0 -4px 8px rgba(0, 0, 0, 0.1);
     }

     @media (max-width: 576px) {
         .resilience-text {
             font-size: 0.95rem;
         }
     }

     .stat-box {
         background: linear-gradient(126deg, #1b6584, #043e60, #3bb0e4);
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
         transition: transform 0.2s ease-in-out;
     }

     .stat-box:hover {
         transform: translateY(-5px);
     }

     /* ---- Pricing styles ---- */
     .price-wrap .label {
         letter-spacing: .03em;
     }

     .price-wrap .currency {
         font-size: .95rem;
         letter-spacing: .02em;
     }

     .deal-pill {
         background: #fff8cc;
         /* pale yellow */
         border-radius: 9999px;
         border: 1px solid rgba(0, 0, 0, .06);
         font-size: 1.1rem;
         text-align: center;
     }


     /* Vertical divider tweak on small screens */
     @media (max-width: 575.98px) {
         .price-wrap {
             flex-direction: column;
             gap: 1rem;
         }

         .price-wrap .border-end {
             border-right: 0 !important;
             padding-right: 0 !important;
         }

         .full-block {
             padding-left: 0 !important;
         }
     }

     /* Optional: tighten card look */
     .ticket-card {
         border-radius: 14px;
     }

     .fab-packages {
         position: fixed;
         right: 14px;
         bottom: calc(210px + env(safe-area-inset-bottom));
         /* aman dari sticky bar */
         display: flex;
         flex-direction: column;
         gap: 10px;
         z-index: 1045;
         pointer-events: none;
         /* biar area kosong nggak ganggu klik */
     }

     /* Tombol */
     .fab-packages .fab-vert {
         pointer-events: auto;
         width: 55px;
         /* lebih lebar biar teks muat */
         min-height: 160px;
         border-radius: 16px;
         text-decoration: none;
         display: flex;
         flex-direction: column;
         /* icon di atas, teks di bawah */
         align-items: center;
         justify-content: center;
         padding: 12px 6px;
         gap: 6px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
         transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
         overflow: hidden;
     }

     /* Icon */
     .fab-packages .fab-icon {
         font-size: 15px;
         background: #fff;
         /* lingkaran putih biar kontras */
         color: #1c1c1c;
         width: 25px;
         height: 25px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
     }

     /* Teks vertikal */
     .fab-packages .fab-vert-text {
         writing-mode: vertical-rl;
         /* teks ditulis vertikal */
         text-orientation: mixed;
         font-weight: 700;
         font-size: 13px;
         line-height: 1.1;
         white-space: normal;
         word-break: break-word;
         text-align: center;
     }

     /* Warna varian */
     .fab-exhibit {
         background: linear-gradient(180deg, #FFE05A 0%, #F5A623 100%);
         /* kuning */
     }

     .fab-exhibit .fab-vert-text {
         color: #1c1c1c;
     }

     .fab-exhibit .fab-icon {
         color: #1c1c1c;
     }

     .fab-sponsor {
         background: linear-gradient(180deg, #9BD5FF 0%, #1F74FF 100%);
         /* biru */
     }

     .fab-sponsor .fab-vert-text {
         color: #fff;
     }

     .fab-sponsor .fab-icon {
         color: #1c1c1c;
     }

     /* Hover/active */
     .fab-packages .fab-vert:hover {
         transform: translateY(-2px);
         box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
     }

     .fab-packages .fab-vert:active {
         transform: translateY(0);
     }

     /* Fade hide (auto-hide dari JS) */
     .fab-hidden {
         opacity: 0;
         pointer-events: none !important;
         transition: opacity .18s ease;
     }

     /* Responsive: viewport pendek -> tombol lebih kecil */
     @media (max-height: 740px) {
         .fab-packages .fab-vert {
             min-height: 140px;
         }
     }

     @media (max-height: 640px) {
         .fab-packages .fab-vert {
             min-height: 120px;
         }
     }

     /* Optional: hide di mobile */
     @media (max-width: 768px) {
         .fab-packages {
             /* display: none; */
         }
     }

     /* ===== Text-only Companies Wall ===== */
     #imce-companies-text h2 {
         letter-spacing: .3px;
     }

     .names-wall {
         position: relative;
         background: #fff;
         border: 1px solid #eee;
         border-radius: 14px;
         padding: 16px 18px;
         transition: max-height .25s ease;
         max-height: 220px;
         /* collapsed */
         overflow: hidden;
     }

     .names-wall.is-expanded {
         max-height: 9999px;
     }

     .names-fade {
         position: absolute;
         inset: auto 0 0 0;
         height: 56px;
         background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 60%);
         pointer-events: none;
     }

     .names-wall.is-expanded .names-fade {
         display: none;
     }

     .names-columns {
         column-gap: 28px;
         margin: 0;
         padding: 0;
         list-style: none;
         column-fill: balance;
     }

     /* columns responsive */
     @media (min-width: 576px) {
         .names-columns {
             column-count: 2;
         }
     }

     @media (min-width: 992px) {
         .names-columns {
             column-count: 3;
         }
     }

     @media (min-width: 1200px) {
         .names-columns {
             column-count: 4;
         }
     }

     .name-item {
         break-inside: avoid;
         padding: 6px 0;
         border-bottom: 1px dashed #eee;
         font-weight: 600;
         color: #1f1f1f;
         position: relative;
         padding-left: 16px;
     }

     .name-item::before {
         content: "•";
         position: absolute;
         left: 0;
         top: 6px;
         color: #F7C100;
         /* nyambung sama custom-yellow-btn */
         font-weight: 700;
     }
 </style>
        
    <style>
        /* Naikkan posisi bubble Qontak di mobile & tablet */
        @media (max-width: 992px) {

            /* Jika Qontak pakai iframe */
            iframe[src*="webchat.qontak.com"] {
                position: fixed !important;
                right: 14px !important;
                bottom: 110px !important;
                /* ← sesuaikan 100–150 */
                z-index: 2147483647 !important;
            }

            /* Jika bukan iframe (fallback) */
            [id*="qchat"],
            [class*="qchat"],
            [id*="qontak"],
            [class*="qontak"] {
                position: fixed !important;
                right: 14px !important;
                bottom: 110px !important;
                /* ← sesuaikan 100–150 */
                z-index: 2147483647 !important;
            }
        }

        /* Hargai safe area iOS (biar gak ketahan notch/homebar) */
        @supports (padding: max(0px)) {
            @media (max-width: 992px) {

                iframe[src*="webchat.qontak.com"],
                [id*="qchat"],
                [class*="qchat"],
                [id*="qontak"],
                [class*="qontak"] {
                    margin-bottom: max(env(safe-area-inset-bottom), 0px);
                }
            }
        }

        /* ===== Desktop: prioritas ke logo+date, menu yang ngalah ===== */
        .brand-block {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        /* non-shrink */
        #navMenuDesktop {
            flex: 1 1 auto;
        }

        /* shrink/collapse */

        .nav-event-meta {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .nav-event-date {
            font-weight: 700;
            color: #2a2a2a;
            font-size: clamp(14px, 1.4vw + 6px, 20px);
            letter-spacing: clamp(.5px, .25vw, 2px);
        }

        .nav-event-venue {
            font-weight: 600;
            text-transform: uppercase;
            color: #666;
            font-size: clamp(8.6px, .6vw + 5px, 7px);
        }

        /* Kalau ruang desktop mulai sempit (≤1400px), hide venue dulu */
        @media (max-width:1400px) {
            .nav-event-venue {
                display: none;
            }
        }

        /* Sedikit kecilkan logo saat ruang makin padat */
        @media (max-width:1100px) {
            .navbar-brand img {
                height: 38px;
            }
        }

        /* ===== Mobile/Tablet: meta ringkas di samping logo ===== */
        .brand-meta-xs {
            line-height: 1.05;
            white-space: nowrap;
        }

        .nav-date-xs {
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 1px;
            color: #2a2a2a;
        }

        .nav-venue-xs {
            font-weight: 600;
            font-size: 8px;
            text-transform: uppercase;
            color: #666;
        }

        @media (max-width:360px) {
            .nav-venue-xs {
                display: none;
            }

            /* super sempit: sembunyikan venue */
        }
    </style>
</head>

<body>

    
    <nav class="navbar navbar-expand-xl fixed-top navbar-light shadow-sm custom-navbar d-none d-xl-flex">
    <div class="container-fluid px-3 align-items-center">

        
        <div class="brand-block d-flex align-items-center">
            <a class="navbar-brand fw-bold me-3" href="#">
                <img src="https://indonesiaminer.com/vendor/front/images/indominer-icon.png" alt="Logo" height="45">
            </a>
            
        </div>

        
        <button class="navbar-toggler ms-auto d-xl-none" type="button" data-bs-toggle="collapse"
            data-bs-target="#navMenuDesktop" aria-controls="navMenuDesktop" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        
        <div class="collapse navbar-collapse ms-auto" id="navMenuDesktop">
            <ul class="navbar-nav ms-auto me-3 mb-2 mb-xl-0 align-items-center">
                <li class="nav-item px-2"><a class="nav-link" href="https://indonesiaminer.com/#">Home</a></li>
                <li class="nav-item px-2"><a class="nav-link" href="https://indonesiaminer.com/2025-highlights">2025 Highlights</a>
                </li>
                <li class="nav-item px-2"><a class="nav-link" href="https://indonesiaminer.com/directory">Mining Directory</a></li>
                <li class="nav-item dropdown px-2">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">More</a>
                    <ul class="dropdown-menu">
                        <li><a class="nav-link" href="https://indonesiaminer.com/2025-highlights/#speakers">Speakers</a></li>
                        <li><a class="nav-link" href="https://indonesiaminer.com/foim">FOIM</a></li>
                        <li><a class="nav-link" href="https://indonesiaminer.com/news">News</a></li>
                    </ul>
                </li>
                <li class="nav-item px-2">
                    <button class="btn btn-warning custom-yellow-btn fw-bold me-2" data-bs-toggle="modal"
                        data-bs-target="#interestModal">
                        REGISTER YOUR INTEREST
                    </button>
                </li>
                                                            <a href="https://indonesiaminer.com/ticket" class="btn btn-warning custom-yellow-btn fw-bold me-2">GET YOUR
                            PASS</a>
                                                </ul>
        </div>
    </div>
</nav>

<nav class="navbar custom-navbar fixed-top d-lg-none">
    <div class="container-fluid px-3">
        <div class="d-flex align-items-center">
            <a class="navbar-brand" href="#">
                <img src="https://indonesiaminer.com/vendor/front/images/indominer-icon.png" height="40"
                    alt="Logo">
            </a>
            
        </div>

        
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navMenuMobile"
            aria-controls="navMenuMobile" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- overlay backdrop -->
        <!-- panel -->
        <div class="collapse navbar-collapse" id="navMenuMobile">
            <!-- lihat baris ini -->
            <button type="button" class="btn-close mobile-close" data-bs-toggle="collapse"
                data-bs-target="#navMenuMobile" aria-controls="navMenuMobile" aria-label="Close">
            </button>

            <div class="mobile-ctas mb-4">
                <button class="btn btn-warning custom-yellow-btn w-100" data-bs-toggle="modal"
                    data-bs-target="#interestModal">
                    REGISTER YOUR INTEREST
                </button>
            </div>
            <ul class="navbar-nav flex-column">
                <li class="nav-item"><a class="nav-link" href="https://indonesiaminer.com">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="https://indonesiaminer.com/2025-highlights">2025 Highlights</a>
                </li>
                <li class="nav-item"><a class="nav-link" href="https://indonesiaminer.com/directory">Mining Directory</a></li>
                <li class="nav-item has-submenu">
                    <a class="nav-link submenu-toggle" href="#">More <span class="caret"></span></a>
                    <ul class="submenu list-unstyled ps-3">
                        <li><a class="nav-link" href="https://indonesiaminer.com/2025-highlights/#speakers">Speakers
                            </a></li>
                        <li><a class="nav-link" href="https://indonesiaminer.com/foim">FOIM
                            </a></li>
                        <li><a class="nav-link" href="https://indonesiaminer.com/news">News</a></li>
                    </ul>
                </li>
            </ul>
            <div class="mobile-social mt-auto pt-4">
                <span class="d-block mb-2">Follow us:</span>
                <div class="d-flex">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="ms-3"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="ms-3"><i class="fab fa-x-twitter"></i></a>
                    <a href="#" class="ms-3"><i class="fab fa-youtube"></i></a>
                    <a href="#" class="ms-3"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div id="mobileMenuOverlay"></div>

        <div style="position: relative; margin-top:60px;">
        <div class="one withsmallpadding ppb_header "
            style="text-align:center;padding:60px 0 60px 0;background: linear-gradient(to top, #E8B44B, white);">
            <div class="standard_wrapper">
                <div class="page_content_wrapper">
                    <div class="inner">
                        <div style="margin:auto;width:100%">
                            <h2 class="ppb_title text-up" style="text-align:center;color:black;">CHOOSE YOUR
                                PASS TO
                                ATTEND
                                <br>INDONESIA MINER CONFERENCE & EXHIBITION 2026
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="container-fluid bg-light">

            <div class="section-top-ticket">

                <span class="section-line-ticket"></span>
            </div>

            

            <ul class="section-skeleton-ticket">
                                                        <li class="kotak-ticket" id="kotak1" data-is-free="0"
                        data-cta="Continue to checkout" data-modal="#paymentNew"
                        onclick="selectTicket(
                        450,
                        7501950,
                        167,
                        'DELEGATE PASS',
                        'Platinum',
                        1,
                        1270,
                        21172170,
                        'kotak1'
                        )">

                        
                                                    <div class="kotak-top-ticket"><strong>SAVE USD 820</strong></div>
                        
                        
                        <div class="kotak-body-ticket">
                            <p
                                style="font-size:20px; font-weight:700; margin:0;
                            border-bottom:3px solid #ffc619; display:inline-block; padding-bottom:2px;">
                                DELEGATE PASS
                            </p>

                            <figure class="kotak-img-ticket">
                                <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate.png" alt="Ticket DELEGATE PASS"
                                    class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill" sizes="100vw">
                            </figure>
                            
                                                            <div style="font-size: 1.5rem">
                                    <b>Early Bird</b>
                                </div>
                                                        <div class="kotak-price-ticket">
                                                                    <b>USD 450</b>
                                                                            <p class="kotak-price-discount-ticket">USD 1,270
                                        </p>
                                                                                                </div>
                            

                        </div>

                        
                        <div class="kotak-main-mobile-ticket" data-target="kotak1">
                            <div class="kotak-mobile-ticket">
                                <div class="kotak-body-mobile-ticket">
                                    <figure class="kotak-body-mobile-image-ticket">
                                        <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate.png" alt="Ticket Early Bird"
                                            class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill"
                                            sizes="100vw">
                                    </figure>
                                    <div style="white-space: nowrap">
                                        <h3>Early Bird</h3>
                                        
                                        <div class="kotak-body-mobile-price-ticket">
                                                                                            <b>USD 450</b>
                                                                                                    <p class="kotak-price-discount-ticket">
                                                        USD 1,270</p>
                                                                                                                                    </div>

                                    </div>
                                </div>
                            </div>
                            <div class="kotak-mobile-footer-ticket">
                                <button class="btn-select-ticket" data-target="kotak1">Select</button>
                            </div>
                        </div>

                        <div class="kotak-footer-ticket">
                            <button class="btn-select-ticket" data-target="kotak1">Select</button>
                        </div>
                    </li>
                                                        <li class="kotak-ticket" id="kotak2" data-is-free="0"
                        data-cta="Continue to checkout" data-modal="#paymentNewMultiple"
                        onclick="selectTicket(
                        1250,
                        20838750,
                        168,
                        'DELEGATE PASS',
                        'Platinum',
                        3,
                        3810,
                        63516510,
                        'kotak2'
                        )">

                        
                                                    <div class="kotak-top-ticket"><strong>SAVE USD 2,560</strong></div>
                        
                        
                        <div class="kotak-body-ticket">
                            <p
                                style="font-size:20px; font-weight:700; margin:0;
                            border-bottom:3px solid #ffc619; display:inline-block; padding-bottom:2px;">
                                DELEGATE PASS
                            </p>

                            <figure class="kotak-img-ticket">
                                <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate_x3.png" alt="Ticket DELEGATE PASS"
                                    class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill" sizes="100vw">
                            </figure>
                            
                                                            <div style="font-size: 1.5rem">
                                    <b>3X Early Bird</b>
                                </div>
                                                        <div class="kotak-price-ticket">
                                                                    <b>USD 1,250</b>
                                                                            <p class="kotak-price-discount-ticket">USD 3,810
                                        </p>
                                                                                                </div>
                            

                        </div>

                        
                        <div class="kotak-main-mobile-ticket" data-target="kotak2">
                            <div class="kotak-mobile-ticket">
                                <div class="kotak-body-mobile-ticket">
                                    <figure class="kotak-body-mobile-image-ticket">
                                        <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate_x3.png" alt="Ticket 3X Early Bird"
                                            class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill"
                                            sizes="100vw">
                                    </figure>
                                    <div style="white-space: nowrap">
                                        <h3>3X Early Bird</h3>
                                        
                                        <div class="kotak-body-mobile-price-ticket">
                                                                                            <b>USD 1,250</b>
                                                                                                    <p class="kotak-price-discount-ticket">
                                                        USD 3,810</p>
                                                                                                                                    </div>

                                    </div>
                                </div>
                            </div>
                            <div class="kotak-mobile-footer-ticket">
                                <button class="btn-select-ticket" data-target="kotak2">Select</button>
                            </div>
                        </div>

                        <div class="kotak-footer-ticket">
                            <button class="btn-select-ticket" data-target="kotak2">Select</button>
                        </div>
                    </li>
                                                        <li class="kotak-ticket" id="kotak3" data-is-free="0"
                        data-cta="Continue to checkout" data-modal="#paymentNewMultiple"
                        onclick="selectTicket(
                        1900,
                        31674900,
                        169,
                        'DELEGATE PASS',
                        'Platinum',
                        3,
                        6350,
                        105860850,
                        'kotak3'
                        )">

                        
                                                    <div class="kotak-top-ticket"><strong>SAVE USD 4,450</strong></div>
                        
                        
                        <div class="kotak-body-ticket">
                            <p
                                style="font-size:20px; font-weight:700; margin:0;
                            border-bottom:3px solid #ffc619; display:inline-block; padding-bottom:2px;">
                                DELEGATE PASS
                            </p>

                            <figure class="kotak-img-ticket">
                                <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate_x5.png" alt="Ticket DELEGATE PASS"
                                    class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill" sizes="100vw">
                            </figure>
                            
                                                            <div style="font-size: 1.5rem">
                                    <b>5x Early Bird</b>
                                </div>
                                                        <div class="kotak-price-ticket">
                                                                    <b>USD 1,900</b>
                                                                            <p class="kotak-price-discount-ticket">USD 6,350
                                        </p>
                                                                                                </div>
                            

                        </div>

                        
                        <div class="kotak-main-mobile-ticket" data-target="kotak3">
                            <div class="kotak-mobile-ticket">
                                <div class="kotak-body-mobile-ticket">
                                    <figure class="kotak-body-mobile-image-ticket">
                                        <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/img//ticket/delegate_x5.png" alt="Ticket 5x Early Bird"
                                            class="kotak-img-responsive-ticket" decoding="async" data-nimg="fill"
                                            sizes="100vw">
                                    </figure>
                                    <div style="white-space: nowrap">
                                        <h3>5x Early Bird</h3>
                                        
                                        <div class="kotak-body-mobile-price-ticket">
                                                                                            <b>USD 1,900</b>
                                                                                                    <p class="kotak-price-discount-ticket">
                                                        USD 6,350</p>
                                                                                                                                    </div>

                                    </div>
                                </div>
                            </div>
                            <div class="kotak-mobile-footer-ticket">
                                <button class="btn-select-ticket" data-target="kotak3">Select</button>
                            </div>
                        </div>

                        <div class="kotak-footer-ticket">
                            <button class="btn-select-ticket" data-target="kotak3">Select</button>
                        </div>
                    </li>
                            </ul>

            <div class="section-line-ticket my-4"></div>
            <div class="container">
                <div class="section-footer-ticket d-flex justify-content-between align-items-center flex-wrap">
                    <!-- Kiri: daftar item -->
                    <div class="section-items-ticket d-flex flex-column flex-sm-row align-items-start">
                        <div id="list-item" class="me-sm-4 mb-2 mb-sm-0"></div>
                        <div id="include-item"></div>
                    </div>

                    <!-- Kanan: harga & tombol -->
                    <div class="section-price-item d-flex flex-column align-items-end">
                        <div class="total" style="font-size: 20px;">
                            Total:
                            <b id="total-price" style="font-size: 30px"> USD 0</b>
                        </div>
                        <button class="button-checkout active btn btn-warning custom-yellow-btn fw-bold mt-2">
                            Continue to checkout
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>



    
    


    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row gx-5">
                <!-- About & Social -->
                <div class="col-md-4 mb-4">
                    <img src="https://sin1.contabostorage.com/ee5317510fad4e33b9e308839348b77b:indonesiaminer/web/new-home/logo/miner.png" width="158" alt="Indonesia Miner Logo"
                        class="mb-3">
                    <p class="text-justify">
                        INDONESIA MINER offers partners an unsurpassed platform to reach Indonesia mining community
                        and Global audience. INDONESIA MINER hosts a premier conference that combines Metals, Coal
                        and Other minerals, including EV Battery Industry discussion. With digital media news
                        centred on Minerals and Coal project updates and operational technology and Intelligent
                        Directory our platform will create influential content that engages audiences and establish
                        a brand as industry innovative thought leaders.
                    </p>
                    <div>
                        <a href="https://www.facebook.com/IndonesiaMiner/" target="_blank" class="text-white me-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://twitter.com/#" target="_blank" class="text-white me-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.youtube.com/channel/UC5ENaOi6ROvFl5PWMkjmEQA" target="_blank"
                            class="text-white me-3">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/14762536/" target="_blank" class="text-white me-3">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="https://www.instagram.com/indonesia_miner/" target="_blank" class="text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>

                <!-- Get In Touch -->
                <div class="col-md-4 mb-4">
                    <h5 class="fw-bold">GET IN TOUCH</h5>
                    <p class="mb-1">PT. Indonesiaminer Bisnis Global</p>
                    <p>CIBIS NINE - 11th Floor<br>TB. Simatupang No. 2 Jakarta, Indonesia 12560</p>
                    <p class="mb-1">
                        <i class="fas fa-phone-volume me-2"></i>
                        622129557233
                    </p>
                    <p class="mb-1">
                        <i class="fas fa-mobile-alt me-2"></i>
                        628111798599
                    </p>
                    <p>
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:info@indonesiaminer.com" class="text-white">
                            info@indonesiaminer.com
                        </a>
                    </p>
                    <p>
                        <a href="https://api.indonesiaminer.com/term">Term & Conditions</a>
                    </p>
                </div>

                <!-- Bulletin Signup -->
                <div class="col-md-4">
                    <h5 class="fw-bold">Indonesia Miner Bulletin</h5>
                    <p>Don't miss a thing!<br>Sign up now to receive our weekly bulletin</p>

                    <form id="footer-subscribe" action="https://indonesiaminer.com/contact/news-subscribe" method="POST">
                        <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                        <div class="mb-3">
                            <input type="email" name="email_subscribe_footer" class="form-control"
                                placeholder="Your email address" required>
                        </div>
                        <div class="mb-3">
                            <input type="text" name="name_subscribe" class="form-control" placeholder="Your Name"
                                required>
                        </div>
                        <div class="mb-3 text-center">
                            <div class="g-recaptcha" data-sitekey="6LeIALErAAAAAJSNwjRk-jAMEpBwkqaqcGsWNSc8">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning w-100">Sign up</button>
                    </form>

                    <script>
                        document.getElementById('footer-subscribe').addEventListener('submit', function(e) {
                            const name = document.querySelector('[name="name_subscribe"]').value.trim();
                            const email = document.querySelector('[name="email_subscribe_footer"]').value.trim();
                            const recaptcha = grecaptcha.getResponse();

                            if (!name || !email) {
                                alert('Please fill in your name and email.');
                                e.preventDefault();
                                return;
                            }

                            if (!recaptcha) {
                                alert('Please complete the reCAPTCHA.');
                                e.preventDefault();
                                return;
                            }

                            // kalau semua valid, biarkan form submit normal ke server
                        });
                    </script>
                </div>
            </div>
        </div>
    </footer>
    <!-- Modal -->
<div class="modal fade" id="interestModal" tabindex="-1" aria-labelledby="interestModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content p-0 border-0 rounded-3 overflow-hidden">
            <div class="modal-header bg-primary text-white border-0 px-4 py-3">
                <h5 class="modal-title mb-0" id="interestModalLabel">
                    Be part of Indonesia #1 Premier Conference &amp; Exhibition!
                    <small class="d-block fs-6 mt-1">please fill in your details below to be notified</small>
                </h5>
                <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body bg-primary px-4 pt-4 pb-5">
                <form id="form-interest" method="POST" action="https://indonesiaminer.com/contact/interest" class="text-white">
                    <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">
                    <!-- Honeypot (harus kosong) -->
                    <input type="text" name="website" value="" style="display:none" tabindex="-1"
                        autocomplete="off">

                    <!-- Timestamp (buat cek submit terlalu cepat) -->
                    <input type="hidden" name="hp_time" value="1765605298">

                    <!-- reCAPTCHA / Turnstile Token -->
                    <input type="hidden" name="captcha_token" id="captcha_token">

                    <!-- EVENT TYPE -->
                    <div class="mb-4 text-center">
                        <label class="form-label fw-semibold mb-2">I'm interested in:</label>
                        <div class="d-flex flex-wrap justify-content-center gap-3">
                                                            <div class="form-check">
                                    <input class="form-check-input" type="radio" name="eventType"
                                        id="sponsoring" value="sponsoring" required>
                                    <label class="form-check-label"
                                        for="sponsoring">Sponsoring</label>
                                </div>
                                                            <div class="form-check">
                                    <input class="form-check-input" type="radio" name="eventType"
                                        id="exhibiting" value="exhibiting" required>
                                    <label class="form-check-label"
                                        for="exhibiting">Exhibiting</label>
                                </div>
                                                            <div class="form-check">
                                    <input class="form-check-input" type="radio" name="eventType"
                                        id="attending" value="attending" required>
                                    <label class="form-check-label"
                                        for="attending">Attending</label>
                                </div>
                                                    </div>
                    </div>

                    <!-- INPUT FIELDS -->
                    <div class="mb-3"><input name="name_interest" class="form-control form-control-lg"
                            placeholder="Name*" required></div>
                    <div class="mb-3"><input name="phone" class="form-control form-control-lg" placeholder="Phone*"
                            required></div>
                    <div class="mb-3"><input name="email_interest" class="form-control form-control-lg"
                            placeholder="Business Email*" required></div>
                    <div class="mb-3"><input name="job_title_interest" class="form-control form-control-lg"
                            placeholder="Job Title*" required></div>
                    <div class="mb-3"><input name="company_interest" class="form-control form-control-lg"
                            placeholder="Company*" required></div>

                    <!-- SUBMIT -->
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-submit btn-lg w-100">
                            SUBMIT
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>


<!-- Reserve Your Spot Modal -->
<div class="modal fade" id="reserveModal" tabindex="-1" aria-labelledby="reserveModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content reserve-modal-content">
            <div class="modal-header border-0">
                <h2 class="modal-title fw-bold mx-auto" id="reserveModalLabel">RESERVE YOUR SPOT</h2>
                <button type="button" class="btn-close position-absolute end-0 me-3" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body px-5 pb-4">
                <p class="text-center mb-4">Complete the form below</p>

                <form id="reserveForm" method="POST" action="https://indonesiaminer.com/ticket/reserve">
                    <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                    <!-- Hidden input di form -->
                    <input type="hidden" name="package" id="reserve-package" value="">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="reserve-name" class="form-label">Name</label>
                            <input type="text"
                                class="form-control form-control-lg "
                                id="reserve-name" name="name" required>
                                                    </div>

                        <div class="col-md-6">
                            <label for="reserve-job" class="form-label">Job Title</label>
                            <input type="text" class="form-control "
                                id="reserve-job" name="job_title" required>
                                                    </div>

                        <div class="col-md-6">
                            <label for="reserve-company" class="form-label">Company Name</label>
                            <input type="text" class="form-control "
                                id="reserve-company" name="company_name" required>
                                                    </div>

                        <div class="col-md-6">
                            <label for="reserve-email" class="form-label">Email</label>
                            <input type="email" class="form-control "
                                id="reserve-email" name="email" required>
                                                    </div>

                        <div class="col-md-6">
                            <label for="reserve-phone" class="form-label">Mobile Number</label>
                            <input type="tel" class="form-control "
                                id="reserve-phone" name="phone" required>
                                                    </div>

                        <div class="col-12">
                            <div class="g-recaptcha "
                                data-sitekey="6LeIALErAAAAAJSNwjRk-jAMEpBwkqaqcGsWNSc8"></div>
                                                    </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer border-0 justify-content-end pe-5 pb-4">
                <button type="submit" form="reserveForm" class="btn btn-warning custom-yellow-btn fw-bold">
                    Submit
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Coming Soon Modal -->
<div class="modal fade" id="comingSoonModal" tabindex="-1" aria-labelledby="comingSoonLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">

            <!-- HEADER -->
            <div class="modal-header bg-primary text-white border-0 rounded-top">
                <h5 class="modal-title" id="comingSoonLabel">
                    Feature Coming Soon
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>

            <!-- BODY -->
            <div class="modal-body text-center" style="background-color: #00537a; padding: 1.5rem 1rem;">
                <p class="text-white mb-0" style="font-size: .95rem; opacity: .9;">
                    Our full speaker lineup is on its way!<br>
                    Stay tuned — we’ll update this page shortly.
                </p>
            </div>

            <!-- FOOTER -->
            <div class="modal-footer justify-content-center border-0 bg-primary py-3">
                <button type="button" class="btn btn-warning custom-yellow-btn fw-bold" data-bs-dismiss="modal">
                    CLOSE
                </button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="miningModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="modalFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFormLabel">Claim Your  Now</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="https://indonesiaminer.com/storePass" method="POST" class="needs-validation" id="eventForm">
                <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                <!-- Input hidden dengan nilai dinamis -->
                <input type="hidden" name="link_reference" id="linkReference">
                <input type="hidden" name="registration_type" value="mining">
                <input type="hidden" name="company_reference" value="">
                <input type="hidden" name="collage" value="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="job_title" class="form-label" style="color:white">*</label>
                            <select name="ms_company_type_id" id="ms_company_type_id" class="form-control" required>
                                <option value="1">PT</option>
                                <option value="2">CV</option>
                                <option value="3">Ltd</option>
                                <option value="4">GmbH</option>
                                <option value="6">Limited</option>
                                <option value="7">Llc</option>
                                <option value="8">Corp</option>
                                <option value="9">Pte Ltd</option>
                                <option value="10">Association</option>
                                <option value="11">Government</option>
                            </select>
                            <div class="invalid-feedback">
                                Please provide a Job Title
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <label for="company_name" class="form-label">Company Name *</label>
                            <input type="text" class="form-control" name="company_name[]" placeholder="" required
                                value="">

                            <div class="invalid-feedback">
                                Please provide a Company Name.
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" name="name[]" class="form-control" required
                                    value="">

                            </div>
                            <div class="form-group">
                                <label for="email">Business Email</label>
                                <input type="email" name="email[]" class="form-control" required
                                    value="">

                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" class="form-control phone" name="phone[]" placeholder="+62"
                                    inputmode="tel" autocomplete="tel" required value="">

                                <div class="invalid-feedback">
                                    Please provide a valid Mobile Number
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="job_title">Job Title</label>
                                <input type="text" name="job_title[]" class="form-control" required
                                    value="">

                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="events_tickets_type_new" value="mining">
                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                    <div class="g-recaptcha" data-sitekey="6LeIALErAAAAAJSNwjRk-jAMEpBwkqaqcGsWNSc8"
                        data-callback="recaptchaCallback"></div>
                    
                    <div class="col-12 mb-1">
                        <small style="font-size:12px; text-align:justify; display:block; width:100%;">
                            <i>
                                By submitting your registration, you agree that participation is subject to eligibility
                                checks. The organizer/Indonesia Miner reserves the right to cancel or refuse
                                registration from participants who represent business operating in the same or similar
                                field with Indonesia Miner.
                            </i>
                        </small>

                        <div style="font-size:10px; margin-top:4px; color:#aaa; line-height:1.4;">
                            <label style="display:block; margin-bottom:2px; font-weight:normal; opacity:0.7;">
                                Let us know how you’d like to stay in touch:
                            </label>

                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_email" value="1">
                                Email
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_phone" value="1">
                                Phone calls
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_whatsapp" value="1">
                                WhatsApp messages
                            </label>
                            <label style="opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_mail" value="1">
                                Mail
                            </label>

                            <label style="display:block; margin-top:6px; font-weight:normal; opacity:0.7;">
                                (Selecting one or more contact methods grants us permission to reach you
                                through those channels. If none are indicated, we may contact you via
                                any available option.)
                            </label>
                        </div>
                    </div>
                    <input type="hidden" name="events_id" value="14">
                    <input type="hidden" name="events_tickets" value="162">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="registerButton">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="mediaModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="modalFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFormLabel">Claim Your  Now</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="https://indonesiaminer.com/storePass" method="POST" class="needs-validation"
                id="eventForm">
                <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                <!-- Input hidden dengan nilai dinamis -->
                <input type="hidden" name="link_reference" id="linkReference">
                <input type="hidden" name="registration_type" value="media">
                <input type="hidden" name="company_reference" value="">
                <input type="hidden" name="collage" value="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="job_title" class="form-label" style="color:white">*</label>
                            <select name="ms_company_type_id" id="ms_company_type_id" class="form-control" required>
                                <option value="1">PT</option>
                                <option value="2">CV</option>
                                <option value="3">Ltd</option>
                                <option value="4">GmbH</option>
                                <option value="6">Limited</option>
                                <option value="7">Llc</option>
                                <option value="8">Corp</option>
                                <option value="9">Pte Ltd</option>
                                <option value="10">Association</option>
                                <option value="11">Government</option>
                            </select>
                            <div class="invalid-feedback">
                                Please provide a Job Title
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <label for="company_name" class="form-label">Company Name *</label>
                            <input type="text" class="form-control" name="company_name[]" placeholder="" required
                                value="">

                            <div class="invalid-feedback">
                                Please provide a Company Name.
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" name="name[]" class="form-control" required
                                    value="">

                            </div>
                            <div class="form-group">
                                <label for="email">Business Email</label>
                                <input type="email" name="email[]" class="form-control" required
                                    value="">

                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" class="form-control phone" name="phone[]" placeholder="+62"
                                    inputmode="tel" autocomplete="tel" required value="">

                                <div class="invalid-feedback">
                                    Please provide a valid Mobile Number
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="job_title">Job Title</label>
                                <input type="text" name="job_title[]" class="form-control" required
                                    value="">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="events_tickets_type_new" value="media">
                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                    <div class="g-recaptcha" data-sitekey="6LeIALErAAAAAJSNwjRk-jAMEpBwkqaqcGsWNSc8"
                        data-callback="recaptchaCallback"></div>
                    
                    <div class="col-12 mb-1">
                        <small style="font-size:12px; text-align:justify; display:block; width:100%;">
                            <i>
                                By submitting your registration, you agree that participation is subject to eligibility
                                checks. The organizer/Indonesia Miner reserves the right to cancel or refuse
                                registration from participants who represent business operating in the same or similar
                                field with Indonesia Miner.
                            </i>
                        </small>

                        <div style="font-size:10px; margin-top:4px; color:#aaa; line-height:1.4;">
                            <label style="display:block; margin-bottom:2px; font-weight:normal; opacity:0.7;">
                                Let us know how you’d like to stay in touch:
                            </label>

                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_email" value="1">
                                Email
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_phone" value="1">
                                Phone calls
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_whatsapp" value="1">
                                WhatsApp messages
                            </label>
                            <label style="opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_mail" value="1">
                                Mail
                            </label>

                            <label style="display:block; margin-top:6px; font-weight:normal; opacity:0.7;">
                                (Selecting one or more contact methods grants us permission to reach you
                                through those channels. If none are indicated, we may contact you via
                                any available option.)
                            </label>
                        </div>
                    </div>
                    <input type="hidden" name="events_id" value="14">
                    <input type="hidden" name="events_tickets" value="161">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="registerButton">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="investorModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="modalFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFormLabel">Claim Your  Now</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="https://indonesiaminer.com/storePass" method="POST" class="needs-validation"
                id="eventForm">
                <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                <!-- Input hidden dengan nilai dinamis -->
                <input type="hidden" name="link_reference" id="linkReference">
                <input type="hidden" name="registration_type" value="investor">
                <input type="hidden" name="company_reference" value="">
                <input type="hidden" name="collage" value="">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="job_title" class="form-label" style="color:white">*</label>
                            <select name="ms_company_type_id" id="ms_company_type_id" class="form-control" required>
                                <option value="1">PT</option>
                                <option value="2">CV</option>
                                <option value="3">Ltd</option>
                                <option value="4">GmbH</option>
                                <option value="6">Limited</option>
                                <option value="7">Llc</option>
                                <option value="8">Corp</option>
                                <option value="9">Pte Ltd</option>
                                <option value="10">Association</option>
                                <option value="11">Government</option>
                            </select>
                            <div class="invalid-feedback">
                                Please provide a Job Title
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <label for="company_name" class="form-label">Company Name *</label>
                            <input type="text" class="form-control" name="company_name[]" placeholder="" required
                                value="">

                            <div class="invalid-feedback">
                                Please provide a Company Name.
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" name="name[]" class="form-control" required
                                    value="">

                            </div>
                            <div class="form-group">
                                <label for="email">Business Email</label>
                                <input type="email" name="email[]" class="form-control" required
                                    value="">

                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="phone">Phone Number</label>
                                <input type="tel" class="form-control phone" name="phone[]" placeholder="+62"
                                    inputmode="tel" autocomplete="tel" required value="">

                                <div class="invalid-feedback">
                                    Please provide a valid Mobile Number
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="job_title">Job Title</label>
                                <input type="text" name="job_title[]" class="form-control" required
                                    value="">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="events_tickets_type_new" value="investor">
                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                    <div class="g-recaptcha" data-sitekey="6LeIALErAAAAAJSNwjRk-jAMEpBwkqaqcGsWNSc8"
                        data-callback="recaptchaCallback"></div>
                    
                    <div class="col-12 mb-1">
                        <small style="font-size:12px; text-align:justify; display:block; width:100%;">
                            <i>
                                By submitting your registration, you agree that participation is subject to eligibility
                                checks. The organizer/Indonesia Miner reserves the right to cancel or refuse
                                registration from participants who represent business operating in the same or similar
                                field with Indonesia Miner.
                            </i>
                        </small>

                        <div style="font-size:10px; margin-top:4px; color:#aaa; line-height:1.4;">
                            <label style="display:block; margin-bottom:2px; font-weight:normal; opacity:0.7;">
                                Let us know how you’d like to stay in touch:
                            </label>

                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_email" value="1">
                                Email
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_phone" value="1">
                                Phone calls
                            </label>
                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_whatsapp" value="1">
                                WhatsApp messages
                            </label>
                            <label style="opacity:0.6; font-weight:normal;">
                                <input type="checkbox" class="round" name="optout_mail" value="1">
                                Mail
                            </label>

                            <label style="display:block; margin-top:6px; font-weight:normal; opacity:0.7;">
                                (Selecting one or more contact methods grants us permission to reach you
                                through those channels. If none are indicated, we may contact you via
                                any available option.)
                            </label>
                        </div>
                    </div>
                    <input type="hidden" name="events_id" value="14">
                    <input type="hidden" name="events_tickets" value="163">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="registerButton">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    (function() {
        const DEFAULT_PREFIX = '+62';

        function normalizePhone(raw) {
            if (!raw) return '';
            let v = String(raw).trim();

            // buang semua selain digit/plus/spasi
            v = v.replace(/[^\d+ ]+/g, '');

            // "00" -> "+" (misal 0062...)
            if (v.startsWith('00')) v = '+' + v.slice(2);

            // bersihkan spasi ganda di depan
            v = v.replace(/^\+\s+/, '+');

            // Kasus umum:
            // +62...  -> biarkan
            // 62...   -> jadi +62...
            // 0xxx    -> +62xxx (tanpa nol)
            // 8xxx    -> +628xxx
            if (v.startsWith('+')) {
                // sudah plus, rapihkan: +62 0... -> +62...
                v = v.replace(/^\+62\s*0+/, '+62');
                // buang spasi di dalam
                v = v.replace(/\s+/g, '');
                return v;
            }

            // tanpa plus:
            if (v.startsWith('62')) {
                v = '+' + v;
            } else if (v.startsWith('0')) {
                v = DEFAULT_PREFIX + v.slice(1);
            } else if (v.length) {
                // user ketik 812xxxx
                v = DEFAULT_PREFIX + v.replace(/^\s+/, '');
            }

            // final cleanup
            v = v.replace(/\s+/g, '');
            return v;
        }

        function caretToEnd(el) {
            try {
                const len = el.value.length;
                el.setSelectionRange(len, len);
            } catch (e) {}
        }

        function onFocus(e) {
            const el = e.target;
            if (!el.value.trim()) {
                // tampilkan hint +62 tapi tetap mudah dihapus
                el.value = DEFAULT_PREFIX + ' ';
                // letakkan caret di akhir
                setTimeout(() => caretToEnd(el), 0);
            }
        }

        function onInput(e) {
            const el = e.target;
            let v = el.value;

            // hanya karakter valid
            v = v.replace(/[^\d+ ]+/g, '');

            // hindari duplikasi prefix (contoh "+62+62", "+6262", "+6208..."):
            // 1) "00" diawal -> "+"
            if (v.startsWith('00')) v = '+' + v.slice(2);

            // 2) rapihkan pola ganda
            v = v
                .replace(/^\+62\s*\+?62?/, '+62 ') // +62 +62 -> +62
                .replace(/^\+62\s*0+/, '+62 '); // +62 0... -> +62 ...

            el.value = v;
        }

        function onBlur(e) {
            const el = e.target;
            const cleaned = normalizePhone(el.value);

            // kalau user gak jadi isi, kosongin (biar kena required kalau perlu)
            if (cleaned === DEFAULT_PREFIX || cleaned === DEFAULT_PREFIX + '' || cleaned === '+') {
                el.value = '';
                return;
            }
            el.value = cleaned;
        }

        function initPhoneField(el) {
            // Hindari double-binding
            if (el.dataset.phoneBound === '1') return;
            el.addEventListener('focus', onFocus);
            el.addEventListener('input', onInput);
            el.addEventListener('blur', onBlur);
            el.dataset.phoneBound = '1';
        }

        function initAll() {
            document.querySelectorAll('input.phone').forEach(initPhoneField);

            // normalize semua phone di setiap submit form
            document.querySelectorAll('form').forEach(form => {
                if (form.dataset.phoneSubmitBound === '1') return;
                form.addEventListener('submit', () => {
                    form.querySelectorAll('input.phone').forEach(el => {
                        el.value = normalizePhone(el.value);
                    });
                });
                form.dataset.phoneSubmitBound = '1';
            });
        }

        document.addEventListener('DOMContentLoaded', initAll);

        // kalau pakai Bootstrap modal, re-init saat modal muncul (konten bisa di-clone/dynamic)
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('shown.bs.modal', () => {
                modal.querySelectorAll('input.phone').forEach(initPhoneField);
            });
        });
    })();
</script>
<script>
    (function() {
        const API_URL = 'https://digitalbisnis.indonesiaminer.com/autocomplete_company?q=';
        const MIN_CHARS = 2; // mulai fetch setelah 2 karakter
        const DEBOUNCE_MS = 250;

        // state per input company_name[]
        const resultsMap = new WeakMap(); // Map<HTMLInputElement, Array<result>>
        const debounceTimers = new WeakMap();

        // helper: debounce per-input
        function debouncePerInput(input, fn) {
            return function(...args) {
                const t = debounceTimers.get(input);
                if (t) clearTimeout(t);
                const nt = setTimeout(() => fn.apply(this, args), DEBOUNCE_MS);
                debounceTimers.set(input, nt);
            };
        }

        // buat datalist unik untuk setiap input (biar gak bentrok antar modal)
        function ensureDatalist(input) {
            if (input.dataset.datalistId) return document.getElementById(input.dataset.datalistId);
            const id = 'dl-' + Math.random().toString(36).slice(2);
            const dl = document.createElement('datalist');
            dl.id = id;
            input.setAttribute('list', id);
            input.dataset.datalistId = id;
            input.insertAdjacentElement('afterend', dl);
            return dl;
        }

        // pastikan hidden inputs untuk satu baris ada (ditempatkan setelah input company_name)
        function ensureHiddenFields(input) {
            const names = [
                'company_category_id[]',
                'company_category_name[]',
                'company_city[]',
                'company_address[]',
                'company_web[]',
                'company_country[]'
            ];
            const store = {};
            names.forEach(n => {
                // cari sibling hidden terdekat (setelah input company_name)
                let el = input.parentElement.querySelector('input[type="hidden"][name="' + n + '"]');
                if (!el) {
                    el = document.createElement('input');
                    el.type = 'hidden';
                    el.name = n;
                    // taruh tepat setelah input company_name agar index array sejajar
                    input.insertAdjacentElement('afterend', el);
                }
                store[n] = el;
            });
            return store;
        }

        // isi hidden fields dari satu hasil
        function fillHiddenFromResult(input, result) {
            const hidden = ensureHiddenFields(input);
            hidden['company_category_id[]'].value = result.category_id ?? '';
            hidden['company_category_name[]'].value = result.category_name ?? '';
            hidden['company_city[]'].value = result.city ?? '';
            hidden['company_address[]'].value = result.company_address ?? '';
            hidden['company_web[]'].value = result.company_web ?? '';
            hidden['company_country[]'].value = result.country ?? '';
        }

        // kosongkan hidden kalau user menghapus / ganti jadi tidak cocok
        function clearHidden(input) {
            const hidden = ensureHiddenFields(input);
            Object.values(hidden).forEach(h => h.value = '');
        }

        // render datalist
        function renderOptions(dl, results) {
            dl.innerHTML = '';
            results.forEach((r) => {
                const opt = document.createElement('option');
                // value yang ditulis ke input
                opt.value = r.company_name || '';
                // tambahan hint category/city via label (fallback: beberapa browser abaikan label)
                opt.label = [
                    r.category_name || '',
                    r.city || r.country || ''
                ].filter(Boolean).join(' • ');
                dl.appendChild(opt);
            });
        }

        // cari result yang match dengan input value (case-insensitive, full match dulu, lalu startsWith)
        function pickResultForValue(input) {
            const val = (input.value || '').trim().toLowerCase();
            const arr = resultsMap.get(input) || [];
            if (!val) return null;
            let hit = arr.find(r => (r.company_name || '').toLowerCase() === val);
            if (!hit) hit = arr.find(r => (r.company_name || '').toLowerCase().startsWith(val));
            return hit || null;
        }

        // init satu input company_name[]
        function bindCompanyInput(input) {
            if (input.dataset.companyBound === '1') return;
            input.dataset.companyBound = '1';

            const dl = ensureDatalist(input);
            clearHidden(input);

            // on input: debounce fetch
            const doFetch = debouncePerInput(input, async function() {
                const q = input.value.trim();
                if (q.length < MIN_CHARS) {
                    resultsMap.set(input, []);
                    renderOptions(dl, []);
                    clearHidden(input);
                    return;
                }
                try {
                    const res = await fetch(API_URL + encodeURIComponent(q), {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    if (!res.ok) throw new Error('HTTP ' + res.status);
                    const data = await res.json();
                    if (!Array.isArray(data)) throw new Error('Invalid JSON');
                    resultsMap.set(input, data);
                    renderOptions(dl, data);

                    // jika value saat ini sama persis dengan salah satu hasil, isi hidden
                    const hit = pickResultForValue(input);
                    if (hit) fillHiddenFromResult(input, hit);
                    else clearHidden(input);
                } catch (err) {
                    // gagal fetch ⇒ kosongkan opsi & hidden
                    resultsMap.set(input, []);
                    renderOptions(dl, []);
                    clearHidden(input);
                    // optional: console.warn('Company autocomplete error:', err);
                }
            });

            input.addEventListener('input', doFetch);

            // on change/blur: lock pilihan jika cocok; jika tidak cocok, kosongkan hidden
            input.addEventListener('change', function() {
                const hit = pickResultForValue(input);
                if (hit) fillHiddenFromResult(input, hit);
                else clearHidden(input);
            });
            input.addEventListener('blur', function() {
                const hit = pickResultForValue(input);
                if (hit) fillHiddenFromResult(input, hit);
                else clearHidden(input);
            });

            // saat submit form: terakhir pastikan sinkron (kalau user ketik cepat)
            const form = input.closest('form');
            if (form && form.dataset.companySubmitBound !== '1') {
                form.addEventListener('submit', () => {
                    form.querySelectorAll('input[name="company_name[]"]').forEach(inp => {
                        const hit = pickResultForValue(inp);
                        if (hit) fillHiddenFromResult(inp, hit);
                        else clearHidden(inp);
                    });
                });
                form.dataset.companySubmitBound = '1';
            }
        }

        // init semua yang ada saat ini
        function initAll() {
            document.querySelectorAll('input[name="company_name[]"]').forEach(bindCompanyInput);
        }

        document.addEventListener('DOMContentLoaded', initAll);

        // jika pakai Bootstrap modal, bind ulang ketika modal muncul (konten bisa baru)
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('shown.bs.modal', () => {
                modal.querySelectorAll('input[name="company_name[]"]').forEach(bindCompanyInput);
            });
        });

    })();
</script>
    <!-- Bootstrap 5.3 JS bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  <!-- intl-tel-input CSS 已在 <head> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

  <script>
      document.addEventListener('DOMContentLoaded', function() {
          // ambil semua input dengan class .phone
          const phoneInputs = document.querySelectorAll('.phone');

          if (!phoneInputs.length) return;

          phoneInputs.forEach(function(phoneInput) {
              const iti = window.intlTelInput(phoneInput, {
                  initialCountry: 'id',
                  nationalMode: false, // biar selalu +62
                  formatOnDisplay: true,
                  separateDialCode: false,
                  utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js',
              });

              // cari form terdekat dari input ini
              const form = phoneInput.closest('form');
              if (!form) return;

              form.addEventListener('submit', function(e) {
                  // skip kalau input disembunyikan (misal di modal lain)
                  if (!phoneInput.offsetParent) return;

                  if (!iti.isValidNumber()) {
                      e.preventDefault();
                      alert('Please enter a valid phone number');
                      phoneInput.focus();
                  } else {
                      // ubah nilai ke format internasional sebelum submit
                      phoneInput.value = iti.getNumber();
                  }
              });
          });
      });
  </script>
  <!-- 初始化 ITI -->
  <script defer>
      // TYPEWRITER EFFECT
      function typeWriter(el, speed = 40) {
          const text = el.textContent;
          el.textContent = '';
          let i = 0;
          const timer = setInterval(() => {
              el.textContent += text.charAt(i);
              i++;
              if (i >= text.length) clearInterval(timer);
          }, speed);
      }

      document.addEventListener('DOMContentLoaded', () => {
          const tw = document.querySelector('.typewriter');
          if (tw) typeWriter(tw, 40);
      });
  </script>
  <script>
      document.querySelectorAll('.ticket-btn[data-package]')
          .forEach(btn => {
              btn.addEventListener('click', () => {
                  document
                      .getElementById('reserve-package')
                      .value = btn.getAttribute('data-package');
              });
          });
  </script>

  <script>
      document.addEventListener('DOMContentLoaded', () => {
          const overlay = document.getElementById('mobileMenuOverlay');
          const menuEl = document.getElementById('navMenuMobile');

          // Saat panel akan dibuka
          menuEl.addEventListener('show.bs.collapse', () => {
              overlay.classList.add('show');
          });

          // Saat panel tertutup
          menuEl.addEventListener('hide.bs.collapse', () => {
              overlay.classList.remove('show');
          });

          // Klik di area overlay juga tutup menu
          overlay.addEventListener('click', () => {
              const bsCollapse = bootstrap.Collapse.getInstance(menuEl);
              bsCollapse.hide();
          });
      });
      document.addEventListener('DOMContentLoaded', () => {
          const btn = document.querySelector('.navbar-toggler');
          const overlay = document.getElementById('mobileMenuOverlay');
          const menuEl = document.getElementById('navMenuMobile');
          const closeBtn = document.querySelector('.mobile-close');

          function openMenu() {
              menuEl.classList.add('show');
              overlay.classList.add('show');
          }

          function closeMenu() {
              menuEl.classList.remove('show');
              overlay.classList.remove('show');
          }

          btn.addEventListener('click', openMenu);
          closeBtn.addEventListener('click', closeMenu);
          overlay.addEventListener('click', closeMenu);
      });
  </script>
  <script>
      document.addEventListener('DOMContentLoaded', () => {
          // ambil semua tombol toggle submenu
          document.querySelectorAll('.submenu-toggle').forEach(btn => {
              btn.addEventListener('click', e => {
                  e.preventDefault();
                  const li = btn.closest('.has-submenu');
                  // tutup submenu lain (opsional)
                  document.querySelectorAll('.has-submenu.open').forEach(openLi => {
                      if (openLi !== li) openLi.classList.remove('open');
                  });
                  // toggle submenu ini
                  li.classList.toggle('open');
              });
          });
      });
  </script>
  <script>
      document.addEventListener('DOMContentLoaded', function() {
          const nav = document.querySelector('.custom-navbar');
          if (!nav) return;
          const SCROLL_THRESHOLD = 50; // pixels scrolled before we flip

          window.addEventListener('scroll', () => {
              if (window.scrollY > SCROLL_THRESHOLD) {
                  nav.classList.add('scrolled');
              } else {
                  nav.classList.remove('scrolled');
              }
          });
      });
  </script>


  <script>
      // deadline input (format DD/MM/YYYY)
      const deadlineInput = "12/07/2025";

      function parseDMY(dmy) {
          const [day, month, year] = dmy.split("/").map(Number);
          return new Date(year, month - 1, day, 0, 0, 0).getTime();
      }

      const btDeadline = parseDMY(deadlineInput);

      function setText(id, value) {
          const el = document.getElementById(id);
          if (el) el.innerText = value;
      }

      function updateBottomBar() {
          const diff = btDeadline - Date.now();
          if (diff <= 0) {
              ['days', 'hours', 'minutes', 'seconds'].forEach(id =>
                  setText(`bt-${id}`, "00")
              );
              return;
          }
          const days = Math.floor(diff / (1000 * 60 * 60 * 24));
          const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
          const secs = Math.floor((diff % (1000 * 60)) / 1000);

          setText('bt-days', String(days).padStart(2, '0'));
          setText('bt-hours', String(hours).padStart(2, '0'));
          setText('bt-minutes', String(mins).padStart(2, '0'));
          setText('bt-seconds', String(secs).padStart(2, '0'));
      }

      setInterval(updateBottomBar, 1000);
      updateBottomBar();

      document.addEventListener('DOMContentLoaded', () => {
          const sections = document.querySelectorAll('.lazy-section');

          // fungsi untuk fetch dan inject HTML
          const loadSection = container => {
              const url = container.dataset.url;
              fetch(url)
                  .then(r => {
                      if (!r.ok) throw new Error('Failed to load');
                      return r.text();
                  })
                  .then(html => {
                      container.innerHTML = html;
                      // jika butuh inisialisasi ulang (jarallax, plugins, reCAPTCHA, dsb.)
                      if (typeof jarallax === 'function') {
                          jarallax(container.querySelectorAll('[data-jarallax]'));
                      }
                  })
                  .catch(console.error);
          };

          if ('IntersectionObserver' in window) {
              const io = new IntersectionObserver((entries, obs) => {
                  entries.forEach(e => {
                      if (e.isIntersecting) {
                          loadSection(e.target);
                          obs.unobserve(e.target);
                      }
                  });
              }, {
                  rootMargin: '200px'
              });

              sections.forEach(s => io.observe(s));
          } else {
              // fallback: load semua langsung
              sections.forEach(loadSection);
          }
      });
  </script>

  <!-- CountUp.js UMD (global window.CountUp) -->
  <script src="https://cdn.jsdelivr.net/npm/countup.js@2.9.0/dist/countUp.umd.js"></script>
  <script>
      (function() {
          // Utils
          const hasCountUp = () => !!(window.CountUp || (window.countUp && window.countUp.CountUp));
          const CountUpClass = () => window.CountUp || (window.countUp && window.countUp.CountUp);

          // Start animasi untuk satu elemen
          function startCount(el) {
              if (el.dataset.initialized === '1') return; // cegah double start
              el.dataset.initialized = '1';

              const target = +el.getAttribute('data-target') || 0;

              if (hasCountUp()) {
                  const cu = new(CountUpClass())(el, target, {
                      separator: '.',
                      suffix: '+',
                      duration: 2.0
                  });
                  if (!cu.error) cu.start();
                  else console.error('[CountUp] Error:', cu.error);
              } else {
                  // Fallback manual
                  const duration = 2000;
                  const start = performance.now();
                  const tick = (now) => {
                      const p = Math.min((now - start) / duration, 1);
                      const val = Math.floor(p * target);
                      el.textContent = val.toLocaleString('id-ID') + '+';
                      if (p < 1) requestAnimationFrame(tick);
                  };
                  requestAnimationFrame(tick);
              }
          }

          // Cari .counter di dalam root dan pasang IO
          function initCounters(root) {
              const nodes = (root || document).querySelectorAll('.counter:not([data-initialized])');
              if (!nodes.length) return;

              // Observer: start saat terlihat
              const io = new IntersectionObserver((entries, obs) => {
                  entries.forEach(entry => {
                      if (entry.isIntersecting) {
                          startCount(entry.target);
                          obs.unobserve(entry.target);
                      }
                  });
              }, {
                  threshold: 0.3
              });

              nodes.forEach(el => io.observe(el));
          }

          // 1) Inisialisasi jika sudah ada (SSR / non-lazy)
          window.addEventListener('load', () => initCounters(document.getElementById('statistic')));

          // 2) Pantau #statistic buat konten yang disuntik oleh lazy loader
          const stat = document.getElementById('statistic');
          if (stat) {
              const mo = new MutationObserver((muts) => {
                  for (const m of muts) {
                      // kalau ada node baru masuk, coba init di node itu
                      m.addedNodes.forEach(n => {
                          if (n.nodeType === 1) initCounters(n); // element node
                      });
                  }
              });
              mo.observe(stat, {
                  childList: true,
                  subtree: true
              });
          }

          // 3) (Opsional) kalau lazy loader kamu trigger event custom, bisa listen juga:
          // document.addEventListener('lazy:loaded', (e) => initCounters(e.target || stat));
      })();
  </script>
  <script>
      (function() {
          // Count-up sederhana
          const total = document.querySelectorAll('#companiesUl .name-item').length;
          const el = document.getElementById('companyCount');
          let n = 0;
          const step = Math.max(1, Math.round(total / 30));
          const timer = setInterval(() => {
              n += step;
              if (n >= total) {
                  n = total;
                  clearInterval(timer);
              }
              el.textContent = n;
          }, 30);

          // Toggle expand/collapse
          const wall = document.getElementById('namesWall');
          const btn = document.getElementById('btnToggleCompanies');
          if (btn && wall) {
              btn.addEventListener('click', function() {
                  const expanded = wall.classList.toggle('is-expanded');
                  wall.classList.toggle('is-collapsed', !expanded);
                  wall.setAttribute('aria-expanded', expanded ? 'true' : 'false');
                  this.textContent = expanded ? 'Show less' : 'Show all';
              });
          }
      })();
  </script>
    <script>
        async function loadLazySection(wrap) {
            const url = wrap.dataset.url;
            const placeholder = wrap.querySelector('.lazy-placeholder');

            const html = await (await fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })).text();
            wrap.innerHTML = html;

            // cari semua <script> di dalam konten baru lalu eksekusi ulang
            wrap.querySelectorAll('script').forEach(old => {
                const s = document.createElement('script');
                if (old.src) {
                    s.src = old.src;
                    s.async = false; // jaga urutan
                } else {
                    s.textContent = old.textContent;
                }
                // untuk menghindari eksekusi ganda di reload berikutnya, bisa tandai:
                s.dataset.fromLazy = '1';
                old.replaceWith(s);
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.lazy-section').forEach(loadLazySection);
        });
    </script>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Ambil semua tombol dengan class "btn-select-ticket"
        const buttons = document.querySelectorAll(".btn-select-ticket");
        const mobileTicketElements = document.querySelectorAll('.kotak-main-mobile-ticket');
        const continueButton = document.querySelector(".button-checkout");
        const imgDesktop = document.querySelector('.kotak-img-ticket');

        function handleButtonClick(triggerEl) {
            const targetID = triggerEl.getAttribute("data-target") ||
                triggerEl.closest("[data-target]")?.getAttribute("data-target");
            if (!targetID) return;

            const targetTicket = document.getElementById(targetID);
            const ds = targetTicket?.dataset || {};
            const ctaBtn = document.querySelector(".button-checkout");

            // reset/aktifkan tampilan (opsional sesuai punyamu)
            document.querySelectorAll(".kotak-ticket, .kotak-img-ticket").forEach(el => el.classList.remove("active"));
            document.querySelectorAll(".btn-select-ticket, .kotak-main-mobile-ticket").forEach(el => el.classList.remove(
                "active"));
            targetTicket?.classList.add("active");
            targetTicket?.querySelector(".kotak-img-ticket")?.classList.add("active");
            triggerEl.classList.add("active");

            // set CTA & modal dari data-*
            if (!ctaBtn) return;
            ctaBtn.classList.add("active");
            ctaBtn.setAttribute("data-bs-toggle", "modal");

            const isFree = ds.isFree === "1";
            const modalSel = ds.modal || (isFree ? "#miningModal" : "#paymentNew");
            const ctaText = ds.cta || (isFree ? "Claim Free Pass" : "Continue to checkout");

            ctaBtn.setAttribute("data-bs-target", modalSel);
            ctaBtn.textContent = ctaText;
        }



        // Loop melalui semua tombol dan tambahkan event listener
        buttons.forEach(button => {
            button.addEventListener("click", () => {
                handleButtonClick(button);
            });
        });

        // Jika dalam tampilan mobile, tambahkan fungsi yang sama untuk elemen "kotak-main-mobile-ticket"
        if (mobileTicketElements.length > 0) {
            mobileTicketElements.forEach(mobileElement => {
                mobileElement.addEventListener("click", () => {
                    handleButtonClick(mobileElement);
                });
            });
        }
    </script>
    <script>
        (function() {
            // helper format
            const fmt = (n) => (Number(n) || 0).toLocaleString();

            /**
             * Attach voucher apply handler to a modal
             * @param  {string} modalSel   ex: '#paymentNew' atau '#paymentNewMultiple'
             * @param  {string} btnSel     ex: '#vocer' (Apply button di modal tsb)
             * @param  {function():number} getQty  fungsi yang return jumlah peserta saat ini (qty)
             * @param  {function():object} getTicket fungsi yang return {ticketId, ticketTitle, ticketType}
             */
            function wireVoucher(modalSel, btnSel, getQty, getTicket) {
                $(document).on('click', `${modalSel} ${btnSel}`, async function() {
                    const code = $(`${modalSel} input[name="voucher_code"]`).val().trim();
                    const {
                        ticketId
                    } = getTicket();
                    const qty = getQty();

                    if (!code) {
                        return Swal.fire({
                            title: 'Voucher',
                            text: 'Masukkan kode voucher dulu.',
                            icon: 'warning'
                        });
                    }
                    if (!ticketId || qty < 1) {
                        return Swal.fire({
                            title: 'Voucher',
                            text: 'Ticket/qty belum valid.',
                            icon: 'warning'
                        });
                    }

                    try {
                        const res = await $.ajax({
                            url: "https://indonesiaminer.com/voucher/apply",
                            method: "POST",
                            data: {
                                _token: "ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ",
                                code,
                                ticket_id: ticketId,
                                qty
                            },
                            dataType: "json"
                        });

                        if (!res || res.status !== 1) {
                            const msg = (res && res.message) ? res.message : 'Voucher tidak valid';
                            return Swal.fire({
                                title: 'Voucher',
                                text: msg,
                                icon: 'error'
                            });
                        }

                        // data dari server
                        const {
                            unit,
                            qty: serverQty,
                            discount,
                            totals
                        } = res.data;

                        // Tampilkan breakdown
                        // Event Price (sebelum diskon)
                        // Tampilkan subtotal (setelah diskon) terlebih dulu
                        $(`${modalSel} #event_price, ${modalSel} #event_price_new`).html(
                            `USD ${fmt(totals.before.usd)} (IDR ${fmt(totals.before.idr)})`
                        );
                        const vatUSD = Number((totals.after.usd * 0.11).toFixed(2));
                        const vatIDR = Math.round(totals.after.idr * 0.11);
                        const grandUSD = Number((totals.after.usd + vatUSD).toFixed(2));
                        const grandIDR = Math.round(totals.after.idr + vatIDR);
                        $(`${modalSel} #vat, ${modalSel} #vat_new`).html(
                            `USD ${fmt(vatUSD)} (IDR ${fmt(vatIDR)})`);
                        $(`${modalSel} #total_price, ${modalSel} #total_price_new`).html(
                            `USD ${fmt(grandUSD)} (IDR ${fmt(grandIDR)})`);

                        // Hidden untuk backend
                        $(`${modalSel} #vat_usd, ${modalSel} #vat_usd_new`).val(vatUSD);
                        $(`${modalSel} #vat_idr, ${modalSel} #vat_idr_new`).val(vatIDR);
                        $(`${modalSel} #grand_total_usd, ${modalSel} #grand_total_usd_new`).val(grandUSD);
                        $(`${modalSel} #grand_total_idr, ${modalSel} #grand_total_idr_new`).val(grandIDR);
                        // Discount (TOTAL diskon)
                        // $(`${modalSel} #voucher, ${modalSel} #voucher_new`).html(
                        //     `USD ${fmt(discount.usd)} (IDR ${fmt(discount.idr)})`
                        // );
                        // Total setelah diskon
                        $(`${modalSel} #total_price, ${modalSel} #total_price_new`).html(
                            `USD ${fmt(totals.after.usd)} (IDR ${fmt(totals.after.idr)})`
                        );
                        // Qty UI
                        $(`${modalSel} #ticket_increment, ${modalSel} #ticket_increment_new`).html(
                            `${serverQty}×`);

                        // Hidden inputs (untuk dikirim — tapi SERVER TETAP hitung ulang!)
                        $(`${modalSel} #price_rupiah, ${modalSel} #price_rupiah_new`).val(unit
                            .idr); // harga normal per tiket (IDR)
                        $(`${modalSel} #price_dollar, ${modalSel} #price_dollar_new`).val(unit
                            .usd); // harga normal per tiket (USD)

                        $(`${modalSel} #voucher_price_new`).val(discount.idr); // TOTAL diskon IDR
                        $(`${modalSel} #voucher_price_dollar_new`).val(discount.usd); // TOTAL diskon USD

                        $(`${modalSel} #total_price_val, ${modalSel} #total_price_val_new`).val(totals.after
                            .idr);
                        $(`${modalSel} #total_price_dollar_val, ${modalSel} #total_price_dollar_val_new`)
                            .val(totals.after.usd);

                        Swal.fire({
                            title: 'Voucher',
                            text: 'Voucher berhasil diterapkan.',
                            icon: 'success'
                        });

                    } catch (e) {
                        Swal.fire({
                            title: 'Voucher',
                            text: 'Gagal menerapkan voucher.',
                            icon: 'error'
                        });
                    }
                });
            }

            // Contoh wiring untuk #paymentNew (single)
            wireVoucher(
                '#paymentNew',
                '#vocer',
                () => Number($('#paymentNew #countTicket_val_new').val() || '1'),
                () => ({
                    ticketId: $('#paymentNew #events_tickets_id_new').val(),
                })
            );

            // Contoh wiring untuk #paymentNewMultiple (multiple)
            wireVoucher(
                '#paymentNewMultiple',
                '#vocer',
                () => Number($('#paymentNewMultiple #countTicket_val').val() || $(
                    '#paymentNewMultiple #ticket_increment').text().replace('×', '') || '1'),
                () => ({
                    ticketId: $('#paymentNewMultiple #events_tickets_id').val(),
                })
            );
        })();
    </script>

    <script>
        (function() {
            const fmt = n => (Number(n) || 0).toLocaleString();

            /**
             * Set nilai auto-discount (selisih original vs price) ke hidden + UI
             * @param  {string} modalSel '#paymentNew' atau '#paymentNewMultiple'
             * @param  {number} priceUsd      harga DISKON per tiket (price_usd)
             * @param  {number} originalUsd   harga NORMAL per tiket (original_usd)
             * @param  {number} qty           jumlah tiket (klik)
             */
            function setAutoDiscount(modalSel, priceUsd, originalUsd, qty) {
                priceUsd = Number(priceUsd) || 0;
                originalUsd = Number(originalUsd) || 0;
                qty = Number(qty) || 1;

                // rate diambil dari hidden di dalam modal tsb
                const rateIdr = Number($(`${modalSel} input[name="rate_idr"]`).val() || 0);

                // diskon per tiket = original - price
                const discPerUsd = Math.max(originalUsd - priceUsd, 0);
                const totalDiscUsd = discPerUsd * qty;
                const totalDiscIdr = totalDiscUsd * rateIdr;

                // set hidden (yang dibaca controller)
                $(`${modalSel} #voucher_price_dollar_new`).val(Number(totalDiscUsd.toFixed(2)));
                $(`${modalSel} #voucher_price_new`).val(Math.round(totalDiscIdr));

                // update tampilan "Discount" kalau ada
                // $(`${modalSel} #voucher, ${modalSel} #voucher_new`).html(
                //     `USD ${fmt(totalDiscUsd)} (IDR ${fmt(totalDiscIdr)})`
                // );
            }

            // expose ke window kalau butuh dipakai di file js lain
            window.__setAutoDiscount = setAutoDiscount;
        })();
    </script>

    <script>
        // Kirim data dari PHP ke JS
        const TICKETS = [{"id":167,"qty":1,"name":"DELEGATE PASS","type":"delegate","image":"\/ticket\/delegate.png","ticket_name":"Early Bird","price_usd":450,"original_usd":1270,"is_free":0,"cta":"Continue to checkout","modal":"#paymentNew","tag":null,"tag_label":null,"includes":["Full access to the 3-day Conference \u0026 Exhibition","Entry to daily networking functions, including coffee breaks and lunch","\u003Cb\u003EUnlimited\u003C\/b\u003E access to the Indonesia Miner Mobile App \u2013 featuring attendee live chat, speaker presentations, on-demand session recordings, and more","Personalized profile on the Mobile App, showcasing your company name and logo"]},{"id":168,"qty":3,"name":"DELEGATE PASS","type":"delegate","image":"\/ticket\/delegate_x3.png","ticket_name":"3X Early Bird","price_usd":1250,"original_usd":3810,"is_free":0,"cta":"Continue to checkout","modal":"#paymentNewMultiple","tag":null,"tag_label":null,"includes":["Full access to the 3-day Conference \u0026 Exhibition","Entry to daily networking functions, including coffee breaks and lunch","\u003Cb\u003EUnlimited\u003C\/b\u003E access to the Indonesia Miner Mobile App \u2013 featuring attendee live chat, speaker presentations, on-demand session recordings, and more","Personalized profile on the Mobile App, showcasing your company name and logo"]},{"id":169,"qty":3,"name":"DELEGATE PASS","type":"delegate","image":"\/ticket\/delegate_x5.png","ticket_name":"5x Early Bird","price_usd":1900,"original_usd":6350,"is_free":0,"cta":"Continue to checkout","modal":"#paymentNewMultiple","tag":null,"tag_label":null,"includes":["Full access to the 3-day Conference \u0026 Exhibition","Entry to daily networking functions, including coffee breaks and lunch","\u003Cb\u003EUnlimited\u003C\/b\u003E access to the Indonesia Miner Mobile App \u2013 featuring attendee live chat, speaker presentations, on-demand session recordings, and more","Personalized profile on the Mobile App, showcasing your company name and logo"]}];
        const TICKET_BY_ID = Object.fromEntries(TICKETS.map(t => [String(t.id), t]));

        function renderIncludes(includes = []) {
            if (!includes.length) return '';
            // output <ul> rapi, bisa kamu ganti jadi <p> baris-baris jika mau
            return `
      <div>
        <div style="font-weight:600;margin-bottom:6px;">Include access to:</div>
        <ul style="padding-left:18px;margin:0;">
          ${includes.map(txt => `<li style="margin:2px 0;">${txt}</li>`).join('')}
        </ul>
      </div>
    `;
        }
    </script>

    <script>
        var selectTicket = function(price_dollar, price_rupiah, events_tickets_id, events_tickets_title,
            events_tickets_type, klik, discount_dollar, discount_price) {

            // Set total
            var change_format_price = parseInt(price_dollar).toLocaleString();
            var price_text = "USD " + change_format_price;
            $("#total-price").html(price_text);

            // Set nama tiket terpilih
            $("#list-item").html(`${events_tickets_title}`);

            // Cari includes dari master
            const picked = TICKET_BY_ID[String(events_tickets_id)];
            const includesHtml = renderIncludes(picked?.includes || []);

            // Isi panel include
            $("#include-item").html(includesHtml);

            // Flow lama tetap dipakai (single vs multiple, auto-discount, dll)
            if (klik > 1) {
                selectPaymentMultiple(price_dollar, price_rupiah, events_tickets_id, events_tickets_title,
                    events_tickets_type, klik, discount_dollar, discount_price);
                __setAutoDiscount('#paymentNewMultiple', price_dollar, discount_dollar, klik);
            } else {
                selectPayment(price_dollar, price_rupiah, events_tickets_id, events_tickets_title,
                    events_tickets_type, klik, discount_dollar, discount_price);
                __setAutoDiscount('#paymentNew', price_dollar, discount_dollar, klik);
            }
        }
    </script>
    <script>
        // === Floating ticket footer handler ===
        function showFooterTicket() {
            const footer = document.querySelector('.section-footer-ticket');
            const body = document.body;
            if (!footer) return;

            footer.classList.add('show');
            body.classList.add('has-footer-ticket');
            body.style.paddingBottom = footer.offsetHeight + 'px';
        }

        function hideFooterTicket() {
            const footer = document.querySelector('.section-footer-ticket');
            const body = document.body;
            if (!footer) return;

            footer.classList.remove('show');
            body.classList.remove('has-footer-ticket');
            body.style.paddingBottom = '';
        }

        // Simpan referensi original selectTicket()
        const originalSelectTicket = selectTicket;
        selectTicket = function(...args) {
            originalSelectTicket.apply(this, args);

            // Saat pilih tiket, pastikan footer tampil
            showFooterTicket();

            // Tambahkan indikator bahwa tiket sudah dipilih
            $('.btn-select-ticket').removeClass('active');
            const clickedButton = args[
                5]; // parameter klik biasanya mengandung index/button, kalau tidak bisa gunakan selector global
            $(clickedButton).addClass('active');
        };

        // Kalau benar-benar ingin tombol buat hide manual (misal user klik tombol X), baru panggil ini:
        $(document).on('click', '.button-checkout.cancel', function() {
            hideFooterTicket();
        });
    </script>

    <script>
        const __fmt = (n) => (Number(n) || 0).toLocaleString();
        const __computeVat = (subtotalUSD, subtotalIDR, rate = 0.11) => ({
            vatUSD: Number((subtotalUSD * rate).toFixed(2)),
            vatIDR: Math.round(subtotalIDR * rate)
        });
    </script>


    <div class="modal fade" id="paymentNew" tabindex="-1" role="dialog" aria-labelledby="choose-package" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body modal-body-no-padding">
                <form action="https://indonesiaminer.com/payment" method="post" id="paymentNewForm">
                    <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                    <div class="row">
                        <div class="col-12 col-lg-8">
                            <input type="hidden" id="events_id_new" value="14" name="events_id_new">
                            <input type="hidden" name="link_reference">
                            <!-- events ticket -->
                            <input type="hidden" id="events_tickets_id_new" name="events_tickets_id_new">
                            <input type="hidden" id="events_tickets_title_new" name="events_tickets_title_new">
                            <input type="hidden" id="events_tickets_type_new" name="events_tickets_type_new">
                            <!-- voucher -->
                            <input type="hidden" id="voucher_price_new" name="voucher_price_new">
                            <input type="hidden" id="voucher_price_dollar_new" name="voucher_price_dollar_new">
                            <input type="hidden" id="voucher_id_new" name="voucher_id_new">
                            <input type="hidden" id="voucher_value_new" name="voucher_value_new">
                            <input type="hidden" id="curs_dollar_new" name="curs_dollar_new">
                            <!-- event price -->
                            <input type="hidden" id="price_rupiah_new" name="price_rupiah_new">
                            <input type="hidden" id="price_dollar_new" name="price_dollar_new">
                            <!-- total price -->
                            <input type="hidden" id="total_price_val_new" name="total_price_val_new">
                            <input type="hidden" id="total_price_dollar_val_new" name="total_price_dollar_val_new">
                            <input type="hidden" id="countTicket_val_new" name="countTicket_val_new">

                            <input type="hidden" name="rate_idr" value="16671">

                            <!-- SINGLE -->
                            <input type="hidden" id="vat_idr_new" name="vat_idr_new">
                            <input type="hidden" id="vat_usd_new" name="vat_usd_new">
                            <input type="hidden" id="grand_total_idr_new" name="grand_total_idr_new">
                            <input type="hidden" id="grand_total_usd_new" name="grand_total_usd_new">

                            <div class="col-md-12 col-lg-12">
                                <div class="row g-3">
                                    <div class="col-sm-12">
                                        <div class="alert alert-info" role="alert">
                                            <h4 class="alert-heading" style="text-align: left">* ATTENDEES</h4>
                                            <hr>
                                            <p class="mb-0" style="text-align: left">Enter Attendees Details
                                                Here
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="wrapper-login-forgot" style="margin: 0px;">
                                            <div class="btn-group-bt">
                                                <input class="form-check-input flexCheckDefault" type="checkbox"
                                                    value="">
                                                <span class="form-check-label" for="flexCheckDefault">
                                                    Same as contact person
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="name" class="form-label">Full Name
                                            *</label>
                                        <input type="text" class="form-control name" name="name[]" placeholder=""
                                            value="" required>
                                        <div class="invalid-feedback">
                                            Valid full name is required.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control email" name="email[]"
                                            placeholder="" value="" required>
                                        <div class="invalid-feedback">
                                            Valid email is required.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="phone" class="form-label">Mobile Number
                                            <span class="text-muted"></span></label>
                                        <input type="text" class="form-control phone" name="phone[]"
                                            placeholder="" value="62" required>
                                        <div class="invalid-feedback">
                                            Please enter a valid phone.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label class="form-label">Company *</label>
                                        <div class="position-relative" style="width: 100%;">
                                            <input type="text" class="form-control company" name="company[]"
                                                placeholder="PT" autocomplete="off"
                                                value="">
                                            <ul class="list-group suggestion-list"></ul>
                                        </div>
                                        <div class="invalid-feedback">Please enter your company.</div>
                                    </div>


                                    <div class="col-sm-12">
                                        <label for="job_title" class="form-label">Job Title <span
                                                class="text-muted"></span></label>
                                        <select class="form-control job-title-select" name="job_title[]" required>
                                            <option value="">Select Job Title</option>
                                                                                            <option value="Chairman"
                                                    data-tier="TIER 1">
                                                    Chairman
                                                </option>
                                                                                            <option value="CEO"
                                                    data-tier="TIER 1">
                                                    CEO
                                                </option>
                                                                                            <option value="CFO"
                                                    data-tier="TIER 1">
                                                    CFO
                                                </option>
                                                                                            <option value="COO"
                                                    data-tier="TIER 1">
                                                    COO
                                                </option>
                                                                                            <option value="Commissioner"
                                                    data-tier="TIER 1">
                                                    Commissioner
                                                </option>
                                                                                            <option value="President"
                                                    data-tier="TIER 1">
                                                    President
                                                </option>
                                                                                            <option value="Owner"
                                                    data-tier="TIER 1">
                                                    Owner
                                                </option>
                                                                                            <option value="Founder"
                                                    data-tier="TIER 1">
                                                    Founder
                                                </option>
                                                                                            <option value="Director"
                                                    data-tier="TIER 1">
                                                    Director
                                                </option>
                                                                                            <option value="Vice President"
                                                    data-tier="TIER 1">
                                                    Vice President
                                                </option>
                                                                                            <option value="Senior Management"
                                                    data-tier="TIER 1">
                                                    Senior Management
                                                </option>
                                                                                            <option value="General Manager"
                                                    data-tier="TIER 2">
                                                    General Manager
                                                </option>
                                                                                            <option value="Manager"
                                                    data-tier="TIER 2">
                                                    Manager
                                                </option>
                                                                                            <option value="Operation"
                                                    data-tier="TIER 2">
                                                    Operation
                                                </option>
                                                                                            <option value="Engineering"
                                                    data-tier="TIER 2">
                                                    Engineering
                                                </option>
                                                                                            <option value="Geologist"
                                                    data-tier="TIER 2">
                                                    Geologist
                                                </option>
                                                                                            <option value="Purchasing"
                                                    data-tier="TIER 2">
                                                    Purchasing
                                                </option>
                                                                                            <option value="Procurement"
                                                    data-tier="TIER 2">
                                                    Procurement
                                                </option>
                                                                                            <option value="Business Development"
                                                    data-tier="TIER 3">
                                                    Business Development
                                                </option>
                                                                                            <option value="Sales"
                                                    data-tier="TIER 3">
                                                    Sales
                                                </option>
                                                                                            <option value="Marketing"
                                                    data-tier="TIER 3">
                                                    Marketing
                                                </option>
                                                                                            <option value="Finance"
                                                    data-tier="TIER 4">
                                                    Finance
                                                </option>
                                                                                            <option value="Legal"
                                                    data-tier="TIER 4">
                                                    Legal
                                                </option>
                                                                                            <option value="Consultant"
                                                    data-tier="TIER 4">
                                                    Consultant
                                                </option>
                                                                                            <option value="Government"
                                                    data-tier="TIER 4">
                                                    Government
                                                </option>
                                                                                            <option value="Advisor"
                                                    data-tier="TIER 4">
                                                    Advisor
                                                </option>
                                                                                            <option value="Traders"
                                                    data-tier="TIER 4">
                                                    Traders
                                                </option>
                                                                                            <option value="Others"
                                                    data-tier="TIER 4">
                                                    Others
                                                </option>
                                                                                    </select>
                                        <input type="hidden" name="job_title_tier" class="selected-job-title-tier">
                                        <div class="invalid-feedback">
                                            Please select a valid job title.
                                        </div>
                                    </div>

                                    <!-- Menyembunyikan Job Title Detail secara default -->
                                    <div class="col-sm-12 job-title-detail-container d-none">
                                        <label for="job_title_detail" class="form-label">Job Function<span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control job-title-detail-input"
                                            name="job_title_detail[]" required>
                                        <div class="invalid-feedback">
                                            Please enter a valid job title detail.
                                        </div>
                                    </div>

                                    <div class="col-sm-12">

                                        <div class="wrapper-login-forgot" style="margin: 0px;">
                                            <div class="btn-group-bt">
                                                <a href="javascript:void(0)"
                                                    class="addData btn btn-warning float-right">Add
                                                    Guest</a>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="customer">


                                    </div>
                                    <hr style="margin:10px">
                                    <div class="col-sm-12">
                                        <div class="alert alert-warning" role="alert">
                                            <h4 class="alert-heading" style="text-align: left">* Booking Contact
                                            </h4>
                                            <hr>
                                            <p class="mb-0" style="text-align: left">Enter the best person we
                                                can
                                                contact for this booking in the event of unplanned changes.
                                            </p>
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="name" class="form-label">Full Name
                                            *</label>
                                        <input type="text" class="form-control name_booking" name="name_booking"
                                            placeholder="" value="" id="name_booking"
                                            required>
                                        <div class="invalid-feedback">
                                            Valid full name is required.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control email_booking" name="email_booking"
                                            placeholder="" value="" id="email_booking"
                                            required>
                                        <div class="invalid-feedback">
                                            Valid email is required.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="phone" class="form-label">Mobile Number
                                            <span class="text-muted"></span></label>
                                        <input type="text" class="form-control phone_booking" name="phone_booking"
                                            placeholder="" id="phone_booking" value=""
                                            required>
                                        <div class="invalid-feedback">
                                            Please enter a valid phone.
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <label for="job_title_booking" class="form-label">Job Title <span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control job_title_booking"
                                            name="job_title_booking" placeholder="" id="job_title_booking"
                                            value="" required>
                                        <div class="invalid-feedback">
                                            Please enter a valid job title.
                                        </div>
                                    </div>

                                    <div class="col-sm-3 position-relative">
                                        <label class="form-label">Company *</label>
                                        <input type="text" class="form-control company_booking"
                                            name="company_booking" id="company_booking" placeholder="PT" required
                                            autocomplete="off" value="">
                                        <ul class="list-group suggestion-list position-absolute w-100 d-none"></ul>
                                        <div class="invalid-feedback">Please enter your company.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="city" class="form-label">City * </label>
                                        <input type="text" class="form-control" name="city"
                                            placeholder="Jakarta" id="city" required>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="country" class="form-label">Country/Region
                                            *</label>
                                        <input type="text" class="form-control" name="country"
                                            placeholder="Indonesia" id="country" required>
                                        <div class="invalid-feedback">
                                            Please provide a Country
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="zip" class="form-label">Zip/Postal Code
                                            *</label>
                                        <input type="number" class="form-control" name="zip" id="zip"
                                            required>
                                        <div class="invalid-feedback">
                                            Please provide a Zip/Postal Code.
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="company_website" class="form-label">Company
                                            Website *</label>
                                        <input type="text" class="form-control" name="company_website"
                                            placeholder="https://indonesiaminer.com" id="company_website" required>
                                        <div class="invalid-feedback">
                                            Please provide a Company Website.
                                        </div>
                                    </div>
                                </div>
                                <hr class="my-4">
                            </div>
                        </div>
                        <div class="col-12 col-md-12 col-lg-4">
                            <div class="card bg-light h-100 shadow-sm">
                                <div class="card-body d-flex flex-column">

                                    <!-- Discount Code -->
                                    <label class="form-label fw-semibold mb-1">Discount Code</label>
                                    <div class="input-group mb-4">
                                        <input type="text" name="voucher_code" id="voucher_code"
                                            class="form-control" placeholder="Input discount code">
                                        <button type="button" class="btn btn-outline-secondary" id="vocer">
                                            Apply
                                        </button>
                                    </div>

                                    <!-- Price Breakdown -->
                                    <div class="flex-grow-1 mb-4">
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Quantity</span>
                                            <span id="ticket_increment_new">1×</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Event Price</span>
                                            <span id="event_price_new">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Discount</span>
                                            <span id="voucher_new">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>VAT (11%)</span>
                                            <span id="vat_new">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2">
                                            <strong>Total Price</strong>
                                            <strong id="total_price_new">USD 0 (IDR 0)</strong>
                                        </div>
                                    </div>

                                    <!-- Actions -->
                                    
                                    <div class="col-12 mb-1">
                                        <small style="font-size:12px; text-align:justify; display:block; width:100%;">
                                            <i>
                                                By submitting your registration, you agree that participation is subject
                                                to eligibility checks. The organizer/Indonesia Miner reserves the right
                                                to cancel or refuse registration from participants who represent
                                                business operating in the same or similar field with Indonesia Miner.
                                                Please note that no refunds will be provided in such cases.
                                            </i>
                                        </small>

                                        <div style="font-size:10px; margin-top:4px; color:#aaa; line-height:1.4;">
                                            <label
                                                style="display:block; margin-bottom:2px; font-weight:normal; opacity:0.7;">
                                                Let us know how you’d like to stay in touch:
                                            </label>

                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_email"
                                                    value="1">
                                                Email
                                            </label>
                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_phone"
                                                    value="1">
                                                Phone calls
                                            </label>
                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_whatsapp"
                                                    value="1">
                                                WhatsApp messages
                                            </label>
                                            <label style="opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_mail"
                                                    value="1">
                                                Mail
                                            </label>

                                            <label
                                                style="display:block; margin-top:6px; font-weight:normal; opacity:0.7;">
                                                (Selecting one or more contact methods grants us permission to reach you
                                                through those channels. If none are indicated, we may contact you via
                                                any available option.)
                                            </label>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between mt-auto">

                                        <button type="button" class="btn btn-outline-secondary"
                                            data-bs-dismiss="modal">
                                            Cancel
                                        </button>
                                        <button type="submit"
                                            class="btn btn-warning custom-yellow-btn fw-bold beforePayment">
                                            Checkout
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Event delegation for job title change on all current and future .job-title-select elements
        $(document).on('change', '.job-title-select', function() {
            var selectedOption = $(this).find('option:selected');
            var tier = selectedOption.data('tier');

            // Store the tier in the hidden input
            $(this).closest('.row').find('.selected-job-title-tier').val(tier);

            // Show or hide the Job Function input based on the selected job title
            var jobTitleDetailContainer = $(this).closest('.row').find('.job-title-detail-container');
            if (selectedOption.val() !== '') {
                jobTitleDetailContainer.removeClass('d-none');
            } else {
                jobTitleDetailContainer.addClass('d-none');
            }
        });
    });


    var selectPayment = function(price_usd, price_idr, events_tickets_id, events_tickets_title,
        events_tickets_type, klik, original_usd, original_idr) {

        // --- Normalisasi nilai per tiket ---
        const unitAfterUSD = Number(price_usd) || 0; // setelah diskon (per tiket)
        const unitAfterIDR = Number(price_idr) || 0;
        const unitBeforeUSD = Number(original_usd) || 0; // harga normal (per tiket)
        const unitBeforeIDR = Number(original_idr) || 0;

        // Diskon per tiket
        const discPerUSD = Math.max(unitBeforeUSD - unitAfterUSD, 0);
        const discPerIDR = Math.max(unitBeforeIDR - unitAfterIDR, 0);

        // Qty (awal 1 utk single; kalau mau pakai 'klik' pastikan min 1)
        let qty = Math.max(1, Number(klik) || 1);
        const maxQty = 6;

        // Format angka ke UI
        const fmt = (n) => (Number(n) || 0).toLocaleString();

        // Set field tiket yang dipilih
        $("#events_tickets_id_new").val(events_tickets_id);
        $("#events_tickets_title_new").val(events_tickets_title);
        $("#events_tickets_type_new").val(events_tickets_type);

        // Harga per tiket (pakai HARGA NORMAL agar server bisa hitung ulang dengan voucher/logic lain)
        $("#price_rupiah_new").val(unitBeforeIDR);
        $("#price_dollar_new").val(unitBeforeUSD);

        // Reset area peserta dinamis
        $(".customer").empty();

        // Renderer tunggal utk refresh UI + hidden inputs
        function render() {
            const subtotalBeforeUSD = qty * unitBeforeUSD;
            const subtotalBeforeIDR = qty * unitBeforeIDR;

            const subtotalAfterUSD = qty * unitAfterUSD; // setelah auto-discount
            const subtotalAfterIDR = qty * unitAfterIDR;

            const totalDiscUSD = qty * discPerUSD;
            const totalDiscIDR = qty * discPerIDR;

            // SELALU PPN 11%
            const {
                vatUSD,
                vatIDR
            } = __computeVat(subtotalAfterUSD, subtotalAfterIDR, 0.11);
            const grandUSD = subtotalAfterUSD + vatUSD;
            const grandIDR = subtotalAfterIDR + vatIDR;

            // UI breakdown
            $("#event_price_new").html(`USD ${__fmt(subtotalBeforeUSD)} (IDR ${__fmt(subtotalBeforeIDR)})`);
            $("#voucher_new").html(`USD ${__fmt(totalDiscUSD)} (IDR ${__fmt(totalDiscIDR)})`);
            $("#vat_new").html(`USD ${__fmt(vatUSD)} (IDR ${__fmt(vatIDR)})`);
            $("#total_price_new").html(`USD ${__fmt(grandUSD)} (IDR ${__fmt(grandIDR)})`);
            $("#ticket_increment_new").html(`${qty}×`);

            // Hidden (server tetap re-calc)
            $("#voucher_price_dollar_new").val(Number(totalDiscUSD.toFixed(2)));
            $("#voucher_price_new").val(Math.round(totalDiscIDR));

            // subtotal setelah diskon (TANPA PPN)
            $("#total_price_dollar_val_new").val(Number(subtotalAfterUSD.toFixed(2)));
            $("#total_price_val_new").val(Math.round(subtotalAfterIDR));

            // VAT & GRAND TOTAL
            $("#vat_usd_new").val(vatUSD);
            $("#vat_idr_new").val(vatIDR);
            $("#grand_total_usd_new").val(Number(grandUSD.toFixed(2)));
            $("#grand_total_idr_new").val(Math.round(grandIDR));

            $("#countTicket_val_new").val(qty);
        }


        // Render awal
        render();

        // ADD GUEST
        $(".addData").off("click").on("click", function() {
            if (qty >= maxQty) {
                $(this).attr("disabled", true);
                return;
            }
            qty += 1;

            // Tambah 1 blok form peserta
            $(".customer").append(`
      <div class="row g-3 tambah" style="margin-left: 5px">
        <div class="col-sm-6">
          <label class="form-label">Full Name *</label>
          <input type="text" class="form-control name" name="name[]" required>
          <div class="invalid-feedback">Valid full name is required.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Email</label>
          <input type="email" class="form-control email" name="email[]" required>
          <div class="invalid-feedback">Valid email is required.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Mobile Number <span class="text-muted"></span></label>
          <input type="text" class="form-control phone" name="phone[]" value="62" required>
          <div class="invalid-feedback">Please enter a valid phone.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Company *</label>
          <input type="text" class="form-control company" name="company[]" placeholder="PT" required>
          <div class="invalid-feedback">Please enter your company.</div>
        </div>
        <div class="col-sm-12">
          <label class="form-label">Job Title</label>
          <select class="form-control job-title-select" name="job_title[]" required>
            <option value="">Select Job Title</option>
                          <option value="Chairman" data-tier="TIER 1">Chairman</option>
                          <option value="CEO" data-tier="TIER 1">CEO</option>
                          <option value="CFO" data-tier="TIER 1">CFO</option>
                          <option value="COO" data-tier="TIER 1">COO</option>
                          <option value="Commissioner" data-tier="TIER 1">Commissioner</option>
                          <option value="President" data-tier="TIER 1">President</option>
                          <option value="Owner" data-tier="TIER 1">Owner</option>
                          <option value="Founder" data-tier="TIER 1">Founder</option>
                          <option value="Director" data-tier="TIER 1">Director</option>
                          <option value="Vice President" data-tier="TIER 1">Vice President</option>
                          <option value="Senior Management" data-tier="TIER 1">Senior Management</option>
                          <option value="General Manager" data-tier="TIER 2">General Manager</option>
                          <option value="Manager" data-tier="TIER 2">Manager</option>
                          <option value="Operation" data-tier="TIER 2">Operation</option>
                          <option value="Engineering" data-tier="TIER 2">Engineering</option>
                          <option value="Geologist" data-tier="TIER 2">Geologist</option>
                          <option value="Purchasing" data-tier="TIER 2">Purchasing</option>
                          <option value="Procurement" data-tier="TIER 2">Procurement</option>
                          <option value="Business Development" data-tier="TIER 3">Business Development</option>
                          <option value="Sales" data-tier="TIER 3">Sales</option>
                          <option value="Marketing" data-tier="TIER 3">Marketing</option>
                          <option value="Finance" data-tier="TIER 4">Finance</option>
                          <option value="Legal" data-tier="TIER 4">Legal</option>
                          <option value="Consultant" data-tier="TIER 4">Consultant</option>
                          <option value="Government" data-tier="TIER 4">Government</option>
                          <option value="Advisor" data-tier="TIER 4">Advisor</option>
                          <option value="Traders" data-tier="TIER 4">Traders</option>
                          <option value="Others" data-tier="TIER 4">Others</option>
                      </select>
          <input type="hidden" name="job_title_tier[]" class="selected-job-title-tier">
          <div class="invalid-feedback">Please select a valid job title.</div>
        </div>
        <div class="col-sm-12 job-title-detail-container d-none">
          <label class="form-label">Job Function<span class="text-muted"></span></label>
          <input type="text" class="form-control job-title-detail-input" name="job_title_detail[]" required>
          <div class="invalid-feedback">Please enter a valid job function.</div>
        </div>
        <div class="col-sm-12">
          <div class="wrapper-login-forgot" style="margin: 0px;">
            <div class="btn-group-bt">
              <a href="javascript:void(0)" class="remove btn btn-danger float-right">Remove Delegate</a>
            </div>
          </div>
        </div>
      </div>
    `);

            render(); // refresh seluruh angka

            // re-enable/disable tombol add
            if (qty < maxQty) $(".addData").removeAttr("disabled");
            else $(".addData").attr("disabled", true);
        });

        // REMOVE GUEST (event delegation)
        $(".customer").off("click", ".remove").on("click", ".remove", function() {
            if (qty <= 1) return;
            $(this).closest(".tambah").remove();
            qty -= 1;

            render(); // refresh seluruh angka

            if (qty < maxQty) $(".addData").removeAttr("disabled");
        });
    };


    function loadingState(form) {
        const button = form.querySelector('.beforePayment');
        button.disabled = true;
        button.innerHTML = 'Processing...';
    }

    </script>
<script>
    $(function() {
        // Debounce helper to limit API calls
        function debounce(fn, delay) {
            let timer;
            return function(...args) {
                clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, args), delay);
            };
        }

        // Autocomplete trigger for .company and .company_booking inputs
        $(document).on('input', '.company, .company_booking', debounce(function() {
            const $input = $(this);
            const q = $input.val().trim();
            const $list = $input.siblings('.suggestion-list');

            if (q.length < 4) {
                $list.empty().addClass('d-none');
                return;
            }

            $.getJSON('https://digitalbisnis.indonesiaminer.com/autocomplete_company', {
                    q
                })
                .done(function(data) {
                    $list.empty();
                    if (!Array.isArray(data) || data.length === 0) {
                        return $list.addClass('d-none');
                    }

                    data.forEach(item => {
                        $list.append(`
                <li class="list-group-item suggestion-item"
                    data-name="${item.company_name.replace(/"/g,'&quot;')}"
                    data-address="${item.company_address.replace(/"/g,'&quot;')}"
                    data-city="${item.city.replace(/"/g,'&quot;')}"
                    data-country="${item.country.replace(/"/g,'&quot;')}"
                    data-website="${item.company_web.replace(/"/g,'&quot;')}">
                  <div class="fw-bold">${item.company_name}</div>
                  <div class="text-muted small">${item.company_address}</div>
                </li>`);
                    });

                    $list.removeClass('d-none');
                })
                .fail(function() {
                    $list.empty().addClass('d-none');
                });
        }, 300));

        // When a suggestion is clicked, fill the form fields
        $(document).on('click', '.suggestion-item', function() {
            const $li = $(this);
            const name = $li.data('name');
            const address = $li.data('address');
            const city = $li.data('city');
            const country = $li.data('country');
            const website = $li.data('website');

            const $form = $li.closest('form');

            // Fill company name
            $form.find('input.company, input.company_booking').val(name);
            // Fill address if present
            $form.find('input.company_address').val(address);
            // Fill city, country, website
            $form.find('input[name="city"]').val(city);
            $form.find('input[name="country"]').val(country);
            $form.find('input[name="company_website"]').val(website);

            // Hide and clear the suggestion list
            $li.parent().empty().addClass('d-none');
        });

        // Hide dropdown if clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.position-relative').length) {
                $('.suggestion-list').addClass('d-none');
            }
        });
    });
</script>
<script>
    (function() {
        // helper normalisasi email (trim + lowercase)
        const norm = (s) => (s || "").toString().trim().toLowerCase();

        function getPrimaryEmail() {
            return norm($("#paymentNew .email").first().val());
        }

        // validasi satu field terhadap email pertama
        function validateAgainstPrimary($el) {
            const first = getPrimaryEmail();
            const curr = norm($el.val());
            const isPrimary = $el.is($("#paymentNew .email").first());

            if (!isPrimary && curr && first && curr === first) {
                Swal.fire({
                    title: "Duplicate emails",
                    text: "Each attendee must have a unique email address.",
                    icon: "error"
                });
                $el.val("").addClass("is-invalid").focus();
                return false;
            } else {
                $el.removeClass("is-invalid");
                return true;
            }
        }

        // Cek saat user mengubah/keluar dari field email (termasuk yang ditambahkan dinamis)
        $(document).on("change blur", "#paymentNew .email", function() {
            validateAgainstPrimary($(this));
        });

        // Cek ulang saat submit; kalau invalid, tahan submit
        $("#paymentNew form").on("submit", function(e) {
            let ok = true;
            $("#paymentNew .email").each(function() {
                if (!validateAgainstPrimary($(this))) ok = false;
            });
            if (!ok) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            }
        });
    })();
</script>
<script>
    (function() {
        const $modal = $('#paymentNew');
        const $form = $('#paymentNewForm');
        const $btn = $form.find('.beforePayment');
        const defaultLabel = 'Checkout';

        function setLoading(isLoading) {
            $btn.prop('disabled', isLoading).html(isLoading ? 'Processing...' : defaultLabel);
        }

        // ====== Validasi email unik untuk semua attendee ======
        function validateUniqueEmails() {
            const seen = new Set();
            let ok = true;
            $form.find('.email').each(function() {
                const v = (this.value || '').trim().toLowerCase();
                if (!v) return;
                if (seen.has(v)) {
                    ok = false;
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                    seen.add(v);
                }
            });
            if (!ok) {
                Swal.fire({
                    title: 'Duplicate emails',
                    text: 'Each attendee must have a unique email address.',
                    icon: 'error'
                });
            }
            return ok;
        }

        // ====== Handler submit tunggal ======
        $form.on('submit', function(e) {
            // 1) Built-in HTML5 validity
            if (!this.checkValidity()) {
                // Biarkan browser menampilkan invalid feedback
                e.preventDefault();
                e.stopImmediatePropagation();
                setLoading(false);
                return false;
            }
            // 2) Custom validity (email unik)
            if (!validateUniqueEmails()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                setLoading(false);
                return false;
            }

            // Semua valid -> kunci tombol
            setLoading(true);

            // Safety: kalau 12 detik kemudian masih di halaman yang sama (gagal/422),
            // kembalikan tombol supaya user bisa submit ulang.
            const hrefNow = location.href;
            setTimeout(function() {
                if (location.href === hrefNow) setLoading(false);
            }, 12000);
        });

        // ====== Reset saat modal ditutup ======
        $modal.on('hidden.bs.modal', function() {
            setLoading(false);
        });

        // ====== Reset saat ada error AJAX yang menyentuh endpoint ini (kalau di masa depan kamu pakai ajax) ======
        $(document).ajaxError(function(_evt, xhr, settings) {
            if (settings && settings.url && settings.url.includes('/payment')) {
                setLoading(false);
            }
        });

        // (Opsional) Kalau kamu masih punya listener lain yang bisa mencegah submit,
        // pastikan mereka TIDAK mengubah tombol. Biarkan hanya blok ini yang mengatur state tombol.
    })();
</script>
    <div class="modal fade" id="paymentNewMultiple" tabindex="-1" role="dialog" aria-labelledby="choose-package"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body modal-body-no-padding">
                <form action="https://indonesiaminer.com/payment" method="post">
                    <input type="hidden" name="_token" value="ZlOr6IdfSaLc1nVrYWeWzgB35AXxCQzWEXXKcEPZ">                    <div class="row">
                        <div class="col-12 col-lg-8">
                            <input type="hidden" id="events_id_new" value="14" name="events_id_new">
                            <input type="hidden" name="link_reference">
                            <!-- events ticket -->
                            <input type="hidden" id="events_tickets_id" name="events_tickets_id_new">
                            <input type="hidden" id="events_tickets_title" name="events_tickets_title_new">
                            <input type="hidden" id="events_tickets_type" name="events_tickets_type_new">
                            <!-- event price -->
                            <input type="hidden" id="price_rupiah" name="price_rupiah_new">
                            <input type="hidden" id="price_dollar" name="price_dollar_new">
                            <input type="hidden" id="voucher_price" name="voucher_price_new">
                            <input type="hidden" id="voucher_price_dollar" name="voucher_price_dollar_new">

                            <!-- total price -->
                            <input type="hidden" id="total_price_val" name="total_price_val_new">
                            <input type="hidden" id="total_price_dollar_val" name="total_price_dollar_val_new">
                            <input type="hidden" id="countTicket_val" name="countTicket_val_new">

                            <input type="hidden" name="rate_idr" value="16671">

                            <!-- MULTIPLE -->
                            <input type="hidden" id="vat_idr" name="vat_idr_new">
                            <input type="hidden" id="vat_usd" name="vat_usd_new">
                            <input type="hidden" id="grand_total_idr" name="grand_total_idr_new">
                            <input type="hidden" id="grand_total_usd" name="grand_total_usd_new">
                            <div class="col-md-12 col-lg-12">
                                <div class="row g-3">
                                    <div class="col-sm-12">
                                        <div class="alert alert-info" role="alert">
                                            <h4 class="alert-heading" style="text-align: left">* ATTENDEES</h4>
                                            <hr>
                                            <p class="mb-0" style="text-align: left">Enter Attendees Details Here
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="wrapper-login-forgot" style="margin: 0px;">
                                            <div class="btn-group-bt">
                                                <input class="form-check-input flexCheckDefaultMulti" type="checkbox"
                                                    value="">
                                                <span class="form-check-label" for="flexCheckDefault">Same as
                                                    contact person</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="name" class="form-label">Full Name *</label>
                                        <input type="text" class="form-control name_multi" name="name[]"
                                            placeholder="" value="" required>
                                        <div class="invalid-feedback">Valid full name is required.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control email_multi" name="email[]"
                                            placeholder="" value="" required>
                                        <div class="invalid-feedback">Valid email is required.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="phone" class="form-label">Mobile Number <span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control phone_multi_dynamic" name="phone[]"
                                            placeholder="" value="62" required>
                                        <div class="invalid-feedback">Please enter a valid phone.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="company" class="form-label">Company *</label>
                                        <div class="position-relative" style="width: 100%;">
                                            <input type="text" class="form-control company_multi" name="company[]"
                                                placeholder="PT" value="" required>
                                            <ul class="list-group suggestion-list"></ul>

                                        </div>
                                        <div class="invalid-feedback">Please enter your company.</div>
                                    </div>
                                    <div class="col-sm-12">
                                        <label for="job_title" class="form-label">Job Title <span
                                                class="text-muted"></span></label>
                                        <select class="form-control job-title-select-multiple" name="job_title[]"
                                            required>
                                            <option value="">Select Job Title</option>
                                                                                            <option value="Chairman"
                                                    data-tier="TIER 1">
                                                    Chairman
                                                </option>
                                                                                            <option value="CEO"
                                                    data-tier="TIER 1">
                                                    CEO
                                                </option>
                                                                                            <option value="CFO"
                                                    data-tier="TIER 1">
                                                    CFO
                                                </option>
                                                                                            <option value="COO"
                                                    data-tier="TIER 1">
                                                    COO
                                                </option>
                                                                                            <option value="Commissioner"
                                                    data-tier="TIER 1">
                                                    Commissioner
                                                </option>
                                                                                            <option value="President"
                                                    data-tier="TIER 1">
                                                    President
                                                </option>
                                                                                            <option value="Owner"
                                                    data-tier="TIER 1">
                                                    Owner
                                                </option>
                                                                                            <option value="Founder"
                                                    data-tier="TIER 1">
                                                    Founder
                                                </option>
                                                                                            <option value="Director"
                                                    data-tier="TIER 1">
                                                    Director
                                                </option>
                                                                                            <option value="Vice President"
                                                    data-tier="TIER 1">
                                                    Vice President
                                                </option>
                                                                                            <option value="Senior Management"
                                                    data-tier="TIER 1">
                                                    Senior Management
                                                </option>
                                                                                            <option value="General Manager"
                                                    data-tier="TIER 2">
                                                    General Manager
                                                </option>
                                                                                            <option value="Manager"
                                                    data-tier="TIER 2">
                                                    Manager
                                                </option>
                                                                                            <option value="Operation"
                                                    data-tier="TIER 2">
                                                    Operation
                                                </option>
                                                                                            <option value="Engineering"
                                                    data-tier="TIER 2">
                                                    Engineering
                                                </option>
                                                                                            <option value="Geologist"
                                                    data-tier="TIER 2">
                                                    Geologist
                                                </option>
                                                                                            <option value="Purchasing"
                                                    data-tier="TIER 2">
                                                    Purchasing
                                                </option>
                                                                                            <option value="Procurement"
                                                    data-tier="TIER 2">
                                                    Procurement
                                                </option>
                                                                                            <option value="Business Development"
                                                    data-tier="TIER 3">
                                                    Business Development
                                                </option>
                                                                                            <option value="Sales"
                                                    data-tier="TIER 3">
                                                    Sales
                                                </option>
                                                                                            <option value="Marketing"
                                                    data-tier="TIER 3">
                                                    Marketing
                                                </option>
                                                                                            <option value="Finance"
                                                    data-tier="TIER 4">
                                                    Finance
                                                </option>
                                                                                            <option value="Legal"
                                                    data-tier="TIER 4">
                                                    Legal
                                                </option>
                                                                                            <option value="Consultant"
                                                    data-tier="TIER 4">
                                                    Consultant
                                                </option>
                                                                                            <option value="Government"
                                                    data-tier="TIER 4">
                                                    Government
                                                </option>
                                                                                            <option value="Advisor"
                                                    data-tier="TIER 4">
                                                    Advisor
                                                </option>
                                                                                            <option value="Traders"
                                                    data-tier="TIER 4">
                                                    Traders
                                                </option>
                                                                                            <option value="Others"
                                                    data-tier="TIER 4">
                                                    Others
                                                </option>
                                                                                    </select>
                                        <input type="hidden" name="job_title_tier"
                                            class="selected-job-title-tier-multiple">
                                        <div class="invalid-feedback">Please select a valid job title.</div>
                                    </div>
                                    <!-- Menyembunyikan Job Title Detail secara default -->
                                    <div class="col-sm-12 job-title-detail-container d-none">
                                        <label for="job_title_detail" class="form-label">Job Function<span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control job-title-detail-input-multiple"
                                            name="job_title_detail[]" required>
                                        <div class="invalid-feedback">Please enter a valid job title detail.</div>
                                    </div>
                                    <div class="customerMultiple"></div>
                                    <hr style="margin:10px">
                                    <div class="col-sm-12">
                                        <div class="alert alert-warning" role="alert">
                                            <h4 class="alert-heading" style="text-align: left">* Booking Contact
                                            </h4>
                                            <hr>
                                            <p class="mb-0" style="text-align: left">Enter the best person we
                                                can contact for this booking in the event of unplanned changes.</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="name" class="form-label">Full Name *</label>
                                        <input type="text" class="form-control name_booking_multi"
                                            name="name_booking" placeholder="" value=""
                                            id="name_booking" required>
                                        <div class="invalid-feedback">Valid full name is required.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control email_booking_multi"
                                            name="email_booking" placeholder="" value=""
                                            id="email_booking" required>
                                        <div class="invalid-feedback">Valid email is required.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="phone" class="form-label">Mobile Number <span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control phone_multi_dynamic"
                                            name="phone_booking" placeholder="" id="phone_booking"
                                            value="62" required>
                                        <div class="invalid-feedback">Please enter a valid phone.</div>
                                    </div>
                                    <div class="col-sm-3">
                                        <label for="job_title_booking" class="form-label">Job Title <span
                                                class="text-muted"></span></label>
                                        <input type="text" class="form-control job_title_booking_multi"
                                            name="job_title_booking" placeholder="" id="job_title_booking"
                                            value="" required>
                                        <div class="invalid-feedback">Please enter a valid job title.</div>
                                    </div>
                                    <div class="col-sm-3">
                                        <label for="company_booking" class="form-label">Company *</label>
                                        <input type="text" class="form-control company_booking_multi"
                                            name="company_booking" placeholder="PT" id="company_booking"
                                            value="" required>
                                        <div class="invalid-feedback">Please enter your company.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="city" class="form-label">City *</label>
                                        <input type="text" class="form-control" name="city"
                                            placeholder="Jakarta" id="city" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="country" class="form-label">Country/Region *</label>
                                        <input type="text" class="form-control" name="country"
                                            placeholder="Indonesia" id="country" required>
                                        <div class="invalid-feedback">Please provide a Country</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="zip" class="form-label">Zip/Postal Code *</label>
                                        <input type="number" class="form-control" name="zip" id="zip"
                                            required>
                                        <div class="invalid-feedback">Please provide a Zip/Postal Code.</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="company_website" class="form-label">Company Website *</label>
                                        <input type="text" class="form-control" name="company_website"
                                            placeholder="https://indonesiaminer.com" id="company_website" required>
                                        <div class="invalid-feedback">Please provide a Company Website.</div>
                                    </div>
                                </div>
                                <hr class="my-4">
                            </div>

                        </div>
                        <div class="col-12 col-md-12 col-lg-4">
                            <div class="card bg-light h-100 shadow-sm">
                                <div class="card-body d-flex flex-column">

                                    <!-- Discount Code -->
                                    <label class="form-label fw-semibold mb-1">Discount Code</label>
                                    <div class="input-group mb-4">
                                        <input type="text" name="voucher_code" id="voucher_code"
                                            class="form-control" placeholder="Input discount code">
                                        <button type="button" class="btn btn-outline-secondary" id="vocer">
                                            Apply
                                        </button>
                                    </div>

                                    <!-- Price Breakdown -->
                                    <div class="flex-grow-1 mb-4">
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Quantity</span>
                                            <span id="ticket_increment">1×</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Event Price</span>
                                            <span id="event_price">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>Discount</span>
                                            <span id="voucher">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2 border-bottom">
                                            <span>VAT (11%)</span>
                                            <span id="vat">USD 0 (IDR 0)</span>
                                        </div>
                                        <div class="d-flex justify-content-between py-2">
                                            <strong>Total Price</strong>
                                            <strong id="total_price">USD 0 (IDR 0)</strong>
                                        </div>
                                    </div>

                                    <!-- Actions -->
                                    
                                    <div class="col-12 mb-1">
                                        <small style="font-size:12px; text-align:justify; display:block; width:100%;">
                                            <i>
                                                By submitting your registration, you agree that participation is subject
                                                to eligibility checks. The organizer/Indonesia Miner reserves the right
                                                to cancel or refuse registration from participants who represent
                                                business operating in the same or similar field with Indonesia Miner.
                                                Please note that no refunds will be provided in such cases.
                                            </i>
                                        </small>

                                        <div style="font-size:10px; margin-top:4px; color:#aaa; line-height:1.4;">
                                            <label
                                                style="display:block; margin-bottom:2px; font-weight:normal; opacity:0.7;">
                                                Let us know how you’d like to stay in touch:
                                            </label>

                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_email"
                                                    value="1">
                                                Email
                                            </label>
                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_phone"
                                                    value="1">
                                                Phone calls
                                            </label>
                                            <label style="margin-right:12px; opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_whatsapp"
                                                    value="1">
                                                WhatsApp messages
                                            </label>
                                            <label style="opacity:0.6; font-weight:normal;">
                                                <input type="checkbox" class="round" name="optout_mail"
                                                    value="1">
                                                Mail
                                            </label>

                                            <label
                                                style="display:block; margin-top:6px; font-weight:normal; opacity:0.7;">
                                                (Selecting one or more contact methods grants us permission to reach you
                                                through those channels. If none are indicated, we may contact you via
                                                any available option.)
                                            </label>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between mt-auto">
                                        <button type="button" class="btn btn-outline-secondary"
                                            data-bs-dismiss="modal">
                                            Cancel
                                        </button>
                                        <button type="submit"
                                            class="btn btn-warning custom-yellow-btn fw-bold beforePayment">
                                            Checkout
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    var counter = 0;
    var tampung = 0;
    const jobTitleDetails = {"TIER 1":["Board of Director","Business Development Director","Business Development Vice President","Business Director","Business Partnership Senior Specialist","Chairman","Chief Advisor","Chief Compliance Officer","Chief Executive Officer","Chief Financial Officer","Chief Human Resources Officer","Chief Information Officer","Chief Innovation Officer","Chief Marketing Officer","Chief of Correspondent","Chief of Marketing","Chief of Metallurgist","Chief Operating Officer","Chief Representative","Chief Strategy Officer","Chief Talent Officer","Chief User Experience Officer","Commercial Director","Commissioner","Country Director","Country Head","Deputy Chief Financial Officer","Deputy Director","Deputy Operation Director","Director","Director of Business Development","Director of Commercial","Director of Economic Affairs","Director of Finance","Director of Global Sales","Director of Health, Safety, and Environment","Director of Marketing","Director of Mining","Director of Operations","Director of Production","Director of Supply Chain Management","Executive Director","Finance Director","Founder","Geology Director","Global Senior Advisor","Human Resource Director","Managing Director","Managing Partner","Marketing Director","Mining Industry Director","Operational Director","Operations Director","Owner","Partner","President","President Director","Principal and Mining Sector Lead","Project Management Office Director","Project Monitoring \u0026 Support Senior Associate","Regional Sales Director","Sales Director","Segment Director","Senior Advisor","Senior Business Process Specialist","Senior Buyer","Senior Data Management System","Senior Estimator Mining","Senior Financial Analyst","Senior Maintenance Planner","Senior Manager","Senior Metallurgist","Senior of Health, Safety, and Environment","Senior Partner","Senior Research Analyst","Senior Specialist","Senior Sustainability","Senior Technical Analyst","Senior Vice President","Technical Director","Trade Commissioner","Vice Chairman","Vice Chief Representative","Vice President","Vice President Director","Vice President of Exploration","Vice President of Business Development"],"TIER 2":["Account Manager","Accounting Manager","Aftermarket Product Manager","Area Manager","Area Sales Manager","Assistant Manager","Assistant Sales Manager","Associate","Business Development Manager","Business Engineer Manager","Business Manager","Business Operation","Coal Procurement","Coal Purchaser","Commercial Manager","Corporate Affairs Manager","Corporate Communications Manager","Corporate Finance Manager","Country General Manager","Country Manager","Country Sales Manager","Database Geologist","Deputy Manager Commercial","Deputy Project Manager","Division Head","Division Manager","Electrical Engineer","Electrical Manager","Engineer","Engineer Manager","Engineering Manager","Engineering Section Head","Environment, Health and Safety Manager","Environmental Support Manager","Exploration Geologist","Exploration Manager","Export-Import Manager","Finance and Accounting Manager","Finance Manager","Fire Division Manager","Fixed Plant Maintenance Manager","General Affairs","General Manager","General Manager Business Development","General Manager Finance","General Manager Marketing","General Manager Operation","General Manager Operations","General Manager Planning \u0026 Development","General Manager Project","General Manager Sales","General Manager Supply Chain","General Site Manager","Geologist","Geotechnical Engineer","Global Head","Global Manager","Global Product Line Manager","Global Sales Manager","Head Geologist","Head Market Research","Head of Business Development","Head of Commercial Division","Head of Community Affairs","Head of Consulting","Head of Corporate Finance","Head of Division","Head of Electric Vehicle","Head of Engineering and Business Development","Head of Finance","Head of General Affairs","Head of Health, Safety and Environment","Head of Human Capital","Head of Human Resource","Head of Investor and Public Relations","Head of Investor Relation","Head of Mining Division","Head of Operations","Head of Processing Consultant","Head of Product and Strategy","Head of Product Management \u0026 Engineering","Head of Project Development","Head of Project Sales Manager","Head of Public Relations","Head of Sales","Head of Supply Chain","Head of Sustainability","Human Resources Manager","Human Resources Supervisor","Industry Manager Mining","Internal Communications Manager","Kepala Teknik Tambang","Key Account Manager","Legal Deputy Manager","Legal Manager","Legal Supervisor","Long Term Plan Senior Engineer","Manager","Manager of Business Development","Manager of Business Marketing","Manager of Compliance","Manager of Corporate Assurance","Manager of Exploration","Manager of Frontline Development","Manager of Health, Safety and Environment","Manager of Heap Leach Operation","Manager of Investor Relations \u0026 Corporate Social Responsibility","Manager of Mine Engineering","Manager of Permitting","Manager of Supply Management","Market Manager","Market Research Manager","Marketing Manager","Mechanical Maintenance Engineer","Mechanical Superintendent","Metallurgy Engineer","Metallurgy Manager","Mine Financial Expert","Mine Geologist","Mine Infrastucture Engineer","Mine Operation Superintendent","Mine Plan Engineer","Mine Planning Manager","Mineral Resource Manager","Mining Engineer","Mining Manager","Mining Operation Manager","Modeling Geologist","National Sales Manager","Office Manager","Operation and Finance Manager","Operation and System Development Manager","Operation Staff","Operations Manager","Performance Management Superintendent","Principal Engineer","Principal Geologist","Process Engineer","Processing Manager","Procurement","Procurement \u0026 Contracts Department","Procurement and Logistic Head","Procurement Manager","Procurement Staff","Procurement Supervisor","Product Development Manager","Product Engineer","Product Manager","Product Sales Manager","Product Support Engineer","Project Controls Manager","Project Development \u0026 Control Superintendent","Project Development Manager","Project Engineer","Project Engineering Consultant","Project Manager","Project Manager Mining","Project Manager Technical Department","Project Services Manager","Project Supervisor","Proposal Manager","Purchasing","Purchasing Manager","Regional Lead","Regional Manager","Regional Sales Manager","Relationship Manager","Research and Development","Research and Development Manager","Research and Development Senior","Research and Development Supervisor","Sales and Account Manager","Sales and Application Engineer","Sales and Business Development Manager","Sales and Marketing Supervisor","Sales and Project Engineer","Sales and Project Manager","Sales Engineer","Sales Manager","Senior Engineer","Senior Geologist","Senior Geotechnical Engineer","Senior Mining Engineer","Senior Mining Manager","Senior Package Engineer","Senior Project Control Manager","Senior Project Engineer","Senior Project Manager","Senior Reliability System Engineer","Senior Sales Engineer","Senior Sales Manager","Senior Specialist","Senior Staff Operation","Senior Supervisor","Service Account Manager","Service Manager","Site Account Manager","Site Manager","Smelting Manager","Social Media Manager","Sourcing Manager","Strategic Communication Supervisor","Strategic Planning Department Head","Superintendent","Supervisor","Sustainability Supervisor","Tax Accounting Manager","Tax Supervisor","Technical Specialist - Mining Engineer","Technology Engineer","Technology Products Manager","Territory Manager","Vice Manager"],"TIER 3":["Business Development","Business Development Associate","Business Development Coordinator","Business Development Staff","Business Development Superintendent","Commercial, Business Development and Trading Department","Corporate and Marketing Communication","Corporate Finance and Business Development","Division Head Mining Business Development","Domestic Marketing Division Head","Head of Business Development","Head of Marketing","Head of Sales Marketing","Head of Strategic Planning and Business Development","Marketing","Marketing and Trading Senior Specialist","Marketing Communication","Marketing Communication Specialist","Marketing Executive","Marketing Staff","Product Marketing","Sales","Sales and Marketing Officer","Sales Admin","Sales and Business Development","Sales Department","Sales Executive","Sales Planning Officer","Sales Support","Strategic Planning and Business Development","Technical Marketing Division Head","Technology Products Sales"],"TIER 4":["Account Executive","Accountant","Administration","Administration Assistant","Advisor","Advisor Assistant","Advisory Board","Analyst","Asset Management","Assistant","Business Advisor","Business Analyst","Business Consultant","Business Control","Buyer","Coal Sourcing","Commercial","Commercial Executive","Commercial Officer","Commodities Product Specialist","Commodities Reporter","Communication Assistant","Compliance and Technical","Consultant","Contract Corporate","Contractor Management Specialist","Coordinator QA","Corporate Action \u0026 Strategic Development","Corporate Affairs Specialist","Corporate Communications","Corporate Communications Executive","Corporate Communications Officer","Corporate Finance","Corporate Secretary","Corporate Secretary and Licensing","Corporate Sustainability Reporting Directive","Cost Control","Counselor","Customer Service","Data Analyst","Digital Excellence","Doctor","Energy and Minerals Officer","Environmental Liaison","Executive Council","External Affairs","External Relation Permitting and Chinese Translator","External Relation Specialist","Filtration Specialist","Finance Accounting","Finance Controller","Financial Analyst","General Affair Officer","Geological Consultant","Government Relations Analyst","Government Relations and Permits","Graduate Quality Assurance","Graduate System Analyst","Health, Safety \u0026 Environment System Specialist","Human Resource Department Officer","Indonesian Representative","Institutional Relations","Instrumentation Specialist","Interpreter","Investment Lead","Lead Estimator","Legal","Legal Counsel","Legal Specialist","Liaison Officer","Maintenance Planner","Management Advisor","Market Research","Master of Management","Media","Medical","Mentee","Mentor","Metallurgist","Metallurgy","Nurse","Partners","Plant Support Equipment","Principal Analyst","Principal Communication","Principal Consultant","Principal Tailings","Product Account","Product Consultant","Program Officer","Project Development","Project Economist Analyst","Project Management Officer","Project Officer","Proposal Specialist","Public Relations","Public Relations Specialist","Researcher","Resource Modelling Specialist","Secretary","Staff","Sustainability Staff","Technical Advisor","Technical Services","Trader","Trainer","Treasurer"]};

    // -> 2 argumen terakhir = TOTAL NORMAL (sebelum diskon)
    var selectPaymentMultiple = function(
        price_usd_after, // TOTAL setelah diskon (bundle)
        price_idr_after, // TOTAL setelah diskon (bundle)
        events_tickets_id,
        events_tickets_title,
        events_tickets_type,
        klik, // qty paket (3 / 5 / dst)
        original_usd_total, // TOTAL normal (sebelum diskon)
        original_idr_total
    ) {
        // --- Normalisasi ---
        const qty = Math.max(1, Number(klik) || 1);
        const totalAfterUSD = Number(price_usd_after) || 0;
        const totalAfterIDR = Number(price_idr_after) || 0;
        const totalBeforeUSD = Number(original_usd_total) || 0;
        const totalBeforeIDR = Number(original_idr_total) || 0;

        const unitBeforeUSD = qty ? (totalBeforeUSD / qty) : 0;
        const unitBeforeIDR = qty ? (totalBeforeIDR / qty) : 0;

        const discountTotalUSD = Math.max(totalBeforeUSD - totalAfterUSD, 0);
        const discountTotalIDR = Math.max(totalBeforeIDR - totalAfterIDR, 0);

        const fmt = n => (Number(n) || 0).toLocaleString();

        // --- Set field paket ---
        $("#paymentNewMultiple #events_tickets_id").val(events_tickets_id);
        $("#paymentNewMultiple #events_tickets_title").val(events_tickets_title);
        $("#paymentNewMultiple #events_tickets_type").val(events_tickets_type);

        // --- Hidden baseline (dipakai server untuk re-calc) ---
        $("#paymentNewMultiple #price_dollar").val(Number(unitBeforeUSD.toFixed(2))); // per tiket NORMAL (USD)
        $("#paymentNewMultiple #price_rupiah").val(Math.round(unitBeforeIDR)); // per tiket NORMAL (IDR)

        // Total setelah diskon (TANPA PPN) – biar konsisten dgn single
        $("#paymentNewMultiple #total_price_dollar_val").val(Number(totalAfterUSD.toFixed(2)));
        $("#paymentNewMultiple #total_price_val").val(Math.round(totalAfterIDR));

        // Total diskon (TANPA PPN) – simpan di voucher_* (server tetap validasi)
        $("#paymentNewMultiple #voucher_price_dollar").val(Number(discountTotalUSD.toFixed(2)));
        $("#paymentNewMultiple #voucher_price").val(Math.round(discountTotalIDR));

        // --- Render UI: Quantity, Event Price, Discount ---
        $("#paymentNewMultiple #ticket_increment").html(`${qty}×`);
        $("#paymentNewMultiple #event_price").html(`USD ${fmt(totalBeforeUSD)} (IDR ${fmt(totalBeforeIDR)})`);
        $("#paymentNewMultiple #voucher").html(`USD ${fmt(discountTotalUSD)} (IDR ${fmt(discountTotalIDR)})`);

        // --- VAT 11% SELALU atas totalAfter* ---
        const {
            vatUSD: vatUSDM,
            vatIDR: vatIDRM
        } = __computeVat(totalAfterUSD, totalAfterIDR, 0.11);
        const grandUSDM = totalAfterUSD + vatUSDM;
        const grandIDRM = totalAfterIDR + vatIDRM;

        // VAT + GRAND TOTAL ke UI
        $("#paymentNewMultiple #vat").html(`USD ${fmt(vatUSDM)} (IDR ${fmt(vatIDRM)})`);
        $("#paymentNewMultiple #total_price").html(`USD ${fmt(grandUSDM)} (IDR ${fmt(grandIDRM)})`);

        // Hidden VAT & Grand Total (untuk dikirim; backend tetap re-calc)
        $("#paymentNewMultiple #vat_usd").val(vatUSDM);
        $("#paymentNewMultiple #vat_idr").val(vatIDRM);
        $("#paymentNewMultiple #grand_total_usd").val(Number(grandUSDM.toFixed(2)));
        $("#paymentNewMultiple #grand_total_idr").val(Math.round(grandIDRM));

        // ==== Render form attendee sesuai qty ====
        $(".customerMultiple").empty();
        for (let i = 1; i < qty; i++) {
            $(".customerMultiple").append(`
      <div class="row g-3 tambah" style="margin-left: 5px">
        <div class="col-sm-6">
          <label class="form-label">Full Name *</label>
          <input type="text" class="form-control" name="name[]" required>
          <div class="invalid-feedback">Valid full name is required.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Email</label>
          <input type="email" class="form-control" name="email[]" required>
          <div class="invalid-feedback">Valid email is required.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Mobile Number <span class="text-muted"></span></label>
          <input type="text" class="form-control phone_multi_dynamic" name="phone[]" value="62" required>
          <div class="invalid-feedback">Please enter a valid phone.</div>
        </div>
        <div class="col-sm-6">
          <label class="form-label">Company *</label>
          <input type="text" class="form-control" name="company[]" placeholder="PT" required>
          <div class="invalid-feedback">Please enter your company.</div>
        </div>
        <div class="col-sm-12">
          <label class="form-label">Job Title</label>
          <select class="form-control job-title-select-multiple" name="job_title[]" required>
            <option value="">Select Job Title</option>
                          <option value="Chairman" data-tier="TIER 1">Chairman</option>
                          <option value="CEO" data-tier="TIER 1">CEO</option>
                          <option value="CFO" data-tier="TIER 1">CFO</option>
                          <option value="COO" data-tier="TIER 1">COO</option>
                          <option value="Commissioner" data-tier="TIER 1">Commissioner</option>
                          <option value="President" data-tier="TIER 1">President</option>
                          <option value="Owner" data-tier="TIER 1">Owner</option>
                          <option value="Founder" data-tier="TIER 1">Founder</option>
                          <option value="Director" data-tier="TIER 1">Director</option>
                          <option value="Vice President" data-tier="TIER 1">Vice President</option>
                          <option value="Senior Management" data-tier="TIER 1">Senior Management</option>
                          <option value="General Manager" data-tier="TIER 2">General Manager</option>
                          <option value="Manager" data-tier="TIER 2">Manager</option>
                          <option value="Operation" data-tier="TIER 2">Operation</option>
                          <option value="Engineering" data-tier="TIER 2">Engineering</option>
                          <option value="Geologist" data-tier="TIER 2">Geologist</option>
                          <option value="Purchasing" data-tier="TIER 2">Purchasing</option>
                          <option value="Procurement" data-tier="TIER 2">Procurement</option>
                          <option value="Business Development" data-tier="TIER 3">Business Development</option>
                          <option value="Sales" data-tier="TIER 3">Sales</option>
                          <option value="Marketing" data-tier="TIER 3">Marketing</option>
                          <option value="Finance" data-tier="TIER 4">Finance</option>
                          <option value="Legal" data-tier="TIER 4">Legal</option>
                          <option value="Consultant" data-tier="TIER 4">Consultant</option>
                          <option value="Government" data-tier="TIER 4">Government</option>
                          <option value="Advisor" data-tier="TIER 4">Advisor</option>
                          <option value="Traders" data-tier="TIER 4">Traders</option>
                          <option value="Others" data-tier="TIER 4">Others</option>
                      </select>
          <input type="hidden" name="job_title_tier" class="selected-job-title-tier-multiple">
          <div class="invalid-feedback">Please select a valid job title.</div>
        </div>
        <div class="col-sm-12 job-title-detail-container d-none">
          <label class="form-label">Job Function<span class="text-muted"></span></label>
          <input type="text" class="form-control job-title-detail-input-multiple" name="job_title_detail[]" required>
          <div class="invalid-feedback">Please enter a valid job title detail.</div>
        </div>
      </div>
      <br><hr><br>
    `);
        }

        // Inisialisasi intlTelInput untuk semua phone field baru
        $(".phone_multi_dynamic").each(function() {
            var iti = window.intlTelInput(this, {
                initialCountry: "id"
            });
            $(this).on("countrychange", function() {
                var countryData = iti.getSelectedCountryData();
                $(this).val("+" + countryData.dialCode);
            });
        });

        // Bind job title detail (tetap seperti punyamu)
        $(".job-title-select-multiple").off("change").on("change", function() {
            var selectedTier = $(this).find(":selected").data("tier");
            var $container = $(this).closest(".row").find(".job-title-detail-container");
            var $detailInput = $container.find(".job-title-detail-input-multiple");
            var $hiddenTierInput = $(this).closest(".row").find(".selected-job-title-tier-multiple");

            if ($(this).val()) {
                $hiddenTierInput.val(selectedTier);
                $container.removeClass("d-none");
                $detailInput.typeahead({
                    source: function(query, process) {
                        if (selectedTier && jobTitleDetails[selectedTier]) {
                            return process(jobTitleDetails[selectedTier]);
                        } else {
                            return process([]);
                        }
                    }
                });
            } else {
                $container.addClass("d-none");
                $detailInput.val("");
                $hiddenTierInput.val("");
            }
        });

        // Simpan qty ke hidden
        $("#paymentNewMultiple #countTicket_val").val(qty);
    };


    $(document).on('click', '.remove', function() {
        $(this).parents('.tambah').remove();
    });

    function loadingState(form) {
        const button = form.querySelector('.beforePayment');
        button.disabled = true;
        button.innerHTML = 'Processing...';
    }

    </script>
<script>
    $(function() {
        // Debounce helper
        function debounce(fn, delay) {
            let timer;
            return function(...args) {
                clearTimeout(timer);
                timer = setTimeout(() => fn.apply(this, args), delay);
            };
        }

        // Shared autocomplete logic
        function setupAutocomplete(inputSelector) {
            $(document).on('input', inputSelector, debounce(function() {
                const $input = $(this);
                const q = $input.val().trim();
                const $list = $input.siblings('.suggestion-list');

                if (q.length < 4) {
                    $list.empty().addClass('d-none');
                    return;
                }

                $.getJSON('https://digitalbisnis.indonesiaminer.com/autocomplete_company', {
                        q
                    })
                    .done(function(data) {
                        $list.empty();
                        if (!Array.isArray(data) || data.length === 0) {
                            return $list.addClass('d-none');
                        }
                        // di dalam data.forEach(item => { … })
                        data.forEach(item => {
                            const safe = v => String(v || '').replace(/"/g, '&quot;');

                            $list.append(`
    <li class="list-group-item suggestion-item"
        data-name    ="${safe(item.company_name)}"
        data-address ="${safe(item.company_address)}"
        data-city    ="${safe(item.city)}"
        data-country ="${safe(item.country)}"
        data-website ="${safe(item.company_web)}">
      <div class="fw-bold">${safe(item.company_name)}</div>
      <div class="text-muted small">${safe(item.company_address)}</div>
    </li>`);
                        });

                        $list.removeClass('d-none');
                    })
                    .fail(function() {
                        $list.empty().addClass('d-none');
                    });
            }, 300));
        }

        // Initialize autocomplete on single and multiple company fields
        setupAutocomplete('.company, .company_booking');
        setupAutocomplete('.company_multi, .company_booking_multi');

        // Click handler for any suggestion-item
        $(document).on('click', '.suggestion-item', function() {
            const $li = $(this);
            const name = $li.data('name');
            const address = $li.data('address');
            const city = $li.data('city');
            const country = $li.data('country');
            const website = $li.data('website');

            // Find the closest form (whether single or multiple modal)
            const $form = $li.closest('form');

            // Fill company fields
            $form.find(
                    'input.company, input.company_booking, input.company_multi, input.company_booking_multi'
                )
                .val(name);

            // Fill address if you have a dedicated address field
            $form.find('input.company_address').val(address);

            // Fill booking-contact city/country/website (single modal) or multiple modal
            $form.find('input[name="city"]').val(city);
            $form.find('input[name="country"]').val(country);
            $form.find('input[name="company_website"]').val(website);

            // Hide and clear the suggestion list
            $li.parent().empty().addClass('d-none');
        });

        // Hide dropdowns when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.position-relative').length) {
                $('.suggestion-list').addClass('d-none');
            }
        });
    });
</script>
<!-- Naikkan z-index swal agar pasti di atas Bootstrap modal -->
<style>
    .swal2-on-top {
        z-index: 20000 !important;
    }
</style>

<script>
    (function() {
        const modal = '#paymentNewMultiple';
        const emailSel = `${modal} input[name="email[]"]`;
        const norm = s => (s || '').toString().trim().toLowerCase();

        function showDupAlert() {
            if (window.Swal && Swal.fire) {
                Swal.fire({
                    title: 'Duplicate emails',
                    text: 'Each attendee must have a unique email address.',
                    icon: 'error',
                    customClass: {
                        container: 'swal2-on-top'
                    } // pastikan di atas modal
                });
            } else {
                // fallback kalau SweetAlert2 belum terload
                alert('Duplicate emails: each attendee must be unique.');
            }
        }

        function validateAndMark({
            showAlert = false
        } = {}) {
            const $inputs = $(emailSel);
            const seen = new Map(); // email -> index pertama
            let ok = true;

            $inputs.removeClass('is-invalid');

            $inputs.each(function(i) {
                const $el = $(this);
                const v = norm($el.val());
                if (!v) return;

                if (seen.has(v)) {
                    ok = false;
                    const firstIdx = seen.get(v);
                    $inputs.eq(firstIdx).addClass('is-invalid');
                    $el.addClass('is-invalid');
                } else {
                    seen.set(v, i);
                }
            });

            if (!ok && showAlert) {
                showDupAlert();
                $inputs.filter('.is-invalid').first().focus();
            }
            return ok;
        }

        // Live check: kalau user bikin duplikat, langsung muncul swal sekali
        $(document).on('change blur', emailSel, function() {
            const ok = validateAndMark({
                showAlert: false
            });
            if (!ok && $(this).hasClass('is-invalid')) {
                showDupAlert();
            }
        });

        // Gate terakhir saat submit
        $(document).on('submit', `${modal} form`, function(e) {
            // Catatan: submit event hanya terpanggil kalau validasi HTML5 sudah lolos (semua required terisi)
            if (!validateAndMark({
                    showAlert: true
                })) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            }
        });

        // Re-check kalau field peserta ditambah/dihapus dinamis
        const tgt = document.querySelector(modal);
        if (tgt) {
            new MutationObserver(() => validateAndMark({
                    showAlert: false
                }))
                .observe(tgt, {
                    childList: true,
                    subtree: true
                });
        }
    })();
</script>

    <div id="loader" style="display:none">
        <div class="loader"></div>
    </div>

    <!-- Typeahead.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-3-typeahead@4.0.2/bootstrap3-typeahead.min.js"></script>
    <!-- Custom Script -->

    <script>
        $(document).ready(function() {
            // Handle the "Same as contact person" checkbox click event
            $('.flexCheckDefaultMulti').click(function() {
                if ($(this).prop('checked')) {
                    // If the checkbox is checked, copy values from contact person fields to booking contact fields
                    $('.name_multi').val($('.name_booking_multi').val());
                    $('.email_multi').val($('.email_booking_multi').val());
                    $('.phone_multi').val($('.phone_booking_multi').val());
                    $('.job_title_multi').val($('.job_title_booking_multi').val());
                    $('.company_multi').val($('.company_booking_multi').val());
                } else {
                    // If the checkbox is unchecked, clear the booking contact fields
                    $('.name_multi').val('');
                    $('.email_multi').val('');
                    $('.phone_multi').val('');
                    $('.job_title_multi').val('');
                    $('.company_multi').val('');
                }
            });
            $('.flexCheckDefault').click(function() {
                if ($(this).prop('checked')) {
                    // If the checkbox is checked, copy values from contact person fields to booking contact fields
                    $('.name').val($('.name_booking').val());
                    $('.email').val($('.email_booking').val());
                    $('.phone').val($('.phone_booking').val());
                    $('.job_title').val($('.job_title_booking').val());
                    $('.company').val($('.company_booking').val());
                } else {
                    // If the checkbox is unchecked, clear the booking contact fields
                    $('.name').val('');
                    $('.email').val('');
                    $('.phone').val('');
                    $('.job_title').val('');
                    $('.company').val('');
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const currentUrl = window.location.href;
            const inputs = document.querySelectorAll('input[name="link_reference"]');

            console.log('FOUND link_reference:', inputs.length);

            inputs.forEach(function(input) {
                input.value = currentUrl;
                console.log('SET VALUE TO:', input, input.value);
            });
        });
    </script>


    <script>
        function recaptchaCallback(token) {
            document.getElementById('g-recaptcha-response').value = token;
        }
    </script>
    <script>
        // Klik di mana pun pada kotak = jalankan handleButtonClick seperti tombol "Select"
        document.addEventListener('click', function(e) {
            const kotak = e.target.closest('.kotak-ticket');
            if (!kotak) return;

            // Jika yang diklik memang tombol Select, biarkan handler tombol yang ada bekerja
            if (e.target.closest('.btn-select-ticket')) return;

            // Ambil tombol Select di dalam kotak ini, lalu jalankan handleButtonClick
            const btn = kotak.querySelector('.btn-select-ticket');
            if (btn && typeof handleButtonClick === 'function') {
                handleButtonClick(btn);
            }
            // NOTE: selectTicket(...) sudah dipanggil dari inline onclick milik <li>,
            // jadi di sini kita tidak memanggil selectTicket lagi agar tidak dobel.
        });
    </script>
    <!-- Start of Qontak Webchat Script -->
    <script>
        const qchatInit = document.createElement('script');
        qchatInit.src = "https://webchat.qontak.com/qchatInitialize.js";
        const qchatWidget = document.createElement('script');
        qchatWidget.src = "https://webchat.qontak.com/js/app.js";
        document.head.prepend(qchatInit);
        document.head.prepend(qchatWidget);
        qchatInit.onload = function() {
            qchatInitialize({
                id: "07de68be-c5e2-44c3-8bc1-8d5ec154c564",
                code: "ti5J3-J7yHcPbOmxSewyKw"
            })
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    
    
    
    
        <script>
        document.addEventListener("DOMContentLoaded", function() {
            // ambil elemen berdasarkan name
            const input = document.querySelector('input[name="link_reference"]');
            if (input) {
                // isi value dengan URL halaman saat ini
                input.value = window.location.href;
            }
        });
    </script>
    <!-- End of Qontak Webchat Script -->
    <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="3aeccb0c-7a2e-4dd6-baf3-d156429573a4"
        data-blockingmode="auto" type="text/javascript"></script>
    <script>
    (function() {
        const ENDPOINT = 'https://collector.indonesiaminer.com/v1/hit';
        const RESPECT_DNT = true;

        function dnt() {
            return RESPECT_DNT && (navigator.doNotTrack === '1' || window.doNotTrack === '1');
        }

        function send(data) {
            if (dnt()) return;
            const json = JSON.stringify(data);

            try {
                if (navigator.sendBeacon) {
                    // 👉 kirim sebagai text/plain supaya SIMPLE request (tanpa preflight)
                    const blob = new Blob([json], {
                        type: 'text/plain;charset=UTF-8'
                    });
                    navigator.sendBeacon(ENDPOINT, blob);
                    return;
                }
            } catch {}

            // Fallback fetch: juga pakai text/plain + keepalive
            fetch(ENDPOINT, {
                method: 'POST',
                headers: {
                    'Content-Type': 'text/plain;charset=UTF-8'
                },
                body: json,
                keepalive: true,
                mode: 'no-cors' // biar gak error di console; event analytics boleh lossy
            }).catch(() => {});
        }

        // --- sisanya tetap sama ---
        function utm() {
            /* ... (punya kamu) ... */
        }

        window.addEventListener('load', function() {
            console.log(location.href);
            send({
                flag_visit: 'page_view',
                summary: document.title || '',
                page_url: location.href,
                ts: Date.now(),
                ...utm()
            });
        });

        function findA(el) {
            while (el && el !== document) {
                if (el.tagName === 'A') return el;
                el = el.parentNode
            }
            return null;
        }
        document.addEventListener('click', function(ev) {
            const a = findA(ev.target);
            if (!a || a.hasAttribute('data-im-skip')) return;
            const href = a.getAttribute('href') || '';
            if (!href || href.startsWith('javascript:')) return;
            const text = a.getAttribute('data-im-text') || a.textContent || '';
            send({
                flag_visit: 'link_click',
                page_url: location.href,
                link_url: href,
                link_text: text.trim(),
                summary: text ? `link: ${text.trim()}` : 'link click',
                ts: Date.now(),
                ...utm()
            });
        }, true);

        document.addEventListener('click', function(ev) {
            const el = ev.target.closest('[data-im-event]');
            if (!el || el.hasAttribute('data-im-skip')) return;
            const flag = el.getAttribute('data-im-event') || 'custom_click';
            const summary = el.getAttribute('data-im-summary') || el.textContent || '';
            let extra = {};
            const raw = el.getAttribute('data-im-extra');
            if (raw) {
                try {
                    extra = JSON.parse(raw)
                } catch {}
            }
            send(Object.assign({
                flag_visit: flag,
                summary: summary.trim(),
                page_url: location.href,
                ts: Date.now()
            }, extra, utm()));
        }, true);

        window.IMHit = (flag, summary, extra) => send(Object.assign({
            flag_visit: flag,
            summary: summary || '',
            page_url: location.href,
            ts: Date.now()
        }, extra || {}, utm()));
        window.IMLink = (url, text) => send({
            flag_visit: 'link_click',
            page_url: location.href,
            link_url: url,
            link_text: text || '',
            summary: text ? `link: ${text}` : 'link click',
            ts: Date.now(),
            ...utm()
        });
    })();
</script>

</body>

</html>