Emerald Booking Widget

<!-- Gaya CSS untuk Container (Glassmorphism Effect) -->
<style>
  .booking-wrapper {
    max-width: 900px;
    margin: 40px auto;
    background-image: url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  
  /* Overlay Gelap + Blur */
  .booking-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    border-radius: 24px;
    z-index: 1;
  }
  
  /* Container Widget */
  #booking-widget-container {
    width: 100%;
    position: relative;
    z-index: 10;
    padding: 0 8px;
  }
</style>

<!-- Container Widget di Halaman -->
<div class="booking-wrapper">
  <div id="booking-widget-container"></div>
</div>

<!-- Script Widget -->
<script src="https://widget2.emerald-system.id/widget/kalenderwidget.js"></script>

<script>
  // Inisialisasi Widget
  document.addEventListener('DOMContentLoaded', function() {
    EmeraldBookingWidget.init({
      container: document.getElementById('booking-widget-container'),
      widgetBaseUrl: 'https://booking.emerald-system.id',
      primaryColor: '#1a1a1a', // Sesuaikan warna tombol
      accentColor: '#facc15', // Sesuaikan warna highlight (Gold)
      propertyCode: ['DEMO', 'PMH'], // Ganti dengan kode properti Anda
      database: ['DEMO', 'PMH'], // Ganti dengan database Anda
      hotelname: ['Demo Hotel', 'Hotel Pakumas'], // Nama hotel
      language: 'id', // 'id' atau 'en'
      showPropertySelect: true
    });
  });
</script>