@props([
  'inputId' => 'card_type',
  'inputName' => 'card_type',
  'dropdownId' => 'cardTypeDropdownButton',
  'cardTypes' => []
])

@push('css')
<style>
  .cardtype-dropdown {
    width: 100%;
  }
  .cardtype-dropdown .dropdown-toggle {
    width: 100%;
    max-width: 100%;
    text-align: left;
    padding: 6px 12px;
  }
  .cardtype-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
  }
  .cardtype-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.25rem 1rem;
    cursor: pointer;
    border: none;
    background: transparent;
  }
  .cardtype-dropdown-item:hover,
  .cardtype-dropdown-item:focus {
    background-color: #e9ecef;
    outline: none;
  }
  .cardtype-preview-btn {
    margin-left: 8px;
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    padding: 0;
    font-size: 0.875rem;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease, transform .08s ease;
    line-height: 1;
    box-shadow: none;
  }
  .cardtype-preview-btn:hover {
    color: #0d6efd;
    background-color: #e9f2ff;
    transform: translateY(-1px);
  }
  .cardtype-preview-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
    background-color: #e9f2ff;
  }
</style>
@endpush

@push('js')
<script>
  (function() {
    function initCardTypeBootstrapDropdown() {
      $('.cardtype-dropdown').each(function() {
        const $dropdown = $(this);
        const $toggle = $dropdown.find('.dropdown-toggle');
        const $hiddenInput = $dropdown.find('input[type="hidden"]');
        const $menu = $dropdown.find('.cardtype-dropdown-menu');

        if ($menu.data('populated')) return;
        const cardTypes = $menu.data('cardtypes') || {};

        for (const [value, label] of Object.entries(cardTypes)) {
          const $label = $('<span>').addClass('cardtype-label').text(label);
          const $previewBtn = $('<button>')
            .attr('class', 'btn btn-primary btn-sm')
            .attr('type', 'button')
            .addClass('cardtype-preview-btn')
            .attr('aria-label', 'Preview card type ' + label)
            .attr('title', 'Preview ' + label)
            .attr('data-cardtype', value)
            .text('?');

          const $item = $('<div>')
            .attr('role', 'menuitem')
            .addClass('dropdown-item cardtype-dropdown-item d-flex justify-content-between align-items-center')
            .attr('data-value', value)
            .append($label)
            .append($previewBtn);

          $menu.append($item);
        }
        $menu.data('populated', true);

        $menu.on('click', '.cardtype-dropdown-item', function(e) {
          if ($(e.target).hasClass('cardtype-preview-btn')) return;
          const value = $(this).data('value');
          const label = $(this).find('.cardtype-label').text();

          $hiddenInput.val(value).trigger('change');
          $toggle.text(label);
        });

        $menu.on('click', '.cardtype-preview-btn', function(e) {
          e.preventDefault();
          e.stopPropagation();

          const cardType = $(this).data('cardtype');
          if (typeof showCardTypePreviews === 'function') {
            showCardTypePreviews(cardType);
          }

          $dropdown.find('.dropdown-toggle').dropdown('toggle');
        });

        const initValue = $hiddenInput.val();
        if (initValue && cardTypes[initValue]) {
          $toggle.text(cardTypes[initValue]);
        } else {
          $toggle.text(
              @json(Session::get('lang', 'en') == 'en' ? 'Pick A Card Type' : 'Pilih Tipe Kartu')
          );
        }

        // Reset hidden input and toggle text on related modal show event if applicable
        $dropdown.closest('.modal').on('show.bs.modal', function () {
          const initialValue = $hiddenInput.val();
          if (initialValue && cardTypes[initialValue]) {
            $toggle.text(cardTypes[initialValue]);
          } else {
            $toggle.text(
              @json(Session::get('lang', 'en') == 'en' ? 'Pick A Card Type' : 'Pilih Tipe Kartu')
            );
            $hiddenInput.val('');
          }
        });

        // Initialize Bootstrap 5 dropdown with flip enabled (dropdown opens upward if no space)
        const popperConfig = {
          modifiers: [
            {
              name: 'flip',
              enabled: true,
              options: {
                fallbackPlacements: ['top', 'bottom', 'right', 'left']
              }
            }
          ]
        };

        // Destroy previous dropdown instance if any to avoid duplicates
        if ($toggle.data('bs.dropdown')) {
          $toggle.dropdown('dispose');
        }

        // Initialize dropdown with Popper flip enabled
        new bootstrap.Dropdown($toggle[0], {
          popperConfig: popperConfig
        });
      });

      // Also listen for global modal show events to reset dropdowns inside modals
      $(document).on('show.bs.modal', '.modal', function() {
        $(this).find('.cardtype-dropdown').each(function() {
          const $dropdown = $(this);
          const $hiddenInput = $dropdown.find('input[type="hidden"]');
          const $toggle = $dropdown.find('.dropdown-toggle');
          const cardTypes = $dropdown.find('.cardtype-dropdown-menu').data('cardtypes') || {};

          const val = $hiddenInput.val();

          if (val && cardTypes[val]) {
            $toggle.text(cardTypes[val]);
          } else {
            $toggle.text(
              @json(Session::get('lang', 'en') == 'en' ? 'Pick A Card Type' : 'Pilih Tipe Kartu')
            );
            $hiddenInput.val('');
          }
        });
      });
    }

    $(document).ready(function() {
      initCardTypeBootstrapDropdown();
    });
  })();
</script>
@endpush

<div class="dropdown cardtype-dropdown">
  <input type="hidden" id="{{ $inputId }}" name="{{ $inputName }}" value="">
  <button class="btn btn-outline-secondary dropdown-toggle" style="width:100%" type="button" id="{{ $dropdownId }}" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true" aria-label="Select card type">
    Pilih Tipe Kartu
  </button>
  <div class="dropdown-menu cardtype-dropdown-menu" role="menu" aria-labelledby="{{ $dropdownId }}" data-cardtypes='@json($cardTypes)'>
    <!-- Menu items populated dynamically -->
  </div>
</div>