<div class="mx-auto w-full max-w-[750px] col">
  <form action="{{ route('simpan-pesanan') }}" method="POST">
    @csrf
    <div class="mb-2">
      <label for="for_pesanan" class="mb-1 block text-base font-medium text-[#07074D]">Menu</label>
      <div class="row">
        <div class="col">
          <input type="text" id="search-menu" name="for_pesanan_user" autofocus autocomplete="off" class="form-control" placeholder="Cari menu..."> 
          <input type="hidden" id="for_pesanan" name="for_pesanan">
        </div>
        <div class="col">
          <input type="text" class="form-control" id="for_harga" name="for_harga" readonly>
        </div>
      </div>
      @if ($errors->has('for_pesanan'))
      <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_pesanan')}}</div>
      @endif
    </div>
    <div class="mb-2">
      <label for="for_qty" class="mb-1 block text-base font-medium text-[#07074D]">Qty</label>
      <input autocomplete="off" type="text" name="for_qty" id="for_qty" placeholder="Jumlah" class="w-full rounded-md border border-[#e0e0e0] bg-white py-1 px-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"/>
      @if ($errors->has('for_qty'))
      <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_qty')}}</div>
      @endif
    </div>
    <div class="mb-2">
      <label for="for_request" class="mb-1 block text-base font-medium text-[#07074D]">Request</label>
      <input type="text" name="for_request" id="for_request" placeholder="Input metode bayar" class="w-full rounded-md border border-[#e0e0e0] bg-white py-1 px-3 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"/>
      @if ($errors->has('for_request'))
      <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_request')}}</div>
      @endif
    </div>
    <div>
      <button class="group relative h-6 w-36 overflow-hidden rounded-2xl bg-dark text-xs text-white">
        Add <span><i class="fa-solid fa-cart-shopping fa-sm"></i></span>
        <div class="absolute inset-0 h-full w-full scale-0 rounded-2xl transition-all duration-300 group-hover:scale-100 group-hover:bg-white/30"></div>
      </button>
    </div>
  </form>
</div>

<script>
$(document).ready(function() {
  var dataMenu = @json($dataMenu);

  var menuList = dataMenu.map(function(menu) {
    return { name: menu.nama, price: menu.harga };
  });

  $('#search-menu').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'menu',
    display: function(item) {
      return item.name;
    },
    source: function(query, syncResults) {
      var matches = menuList.filter(function(menu) {
        return menu.name.toLowerCase().includes(query.toLowerCase());
      });
      syncResults(matches);
    },
    templates: {
      suggestion: function(data) {
        return '<div>' + data.name + ' || Rp' + data.price + '</div>';
      }
    }
  });

  $('#search-menu').bind('typeahead:select', function(ev, suggestion) {
    var pesanan = {
      name: suggestion.name,
      price: suggestion.price
    };

    $('#for_pesanan').val(JSON.stringify(pesanan)); // Convert to JSON string
    $('#for_harga').val(String(suggestion.price)); // Ensure it's a string
  });
});
</script>

<style>
.tt-menu {
  background-color: #000000; /* Warna latar belakang hitam */
  color: #ffffff; /* Warna teks putih agar kontras */
}
.tt-suggestion {
  padding: 10px; /* Menambahkan padding untuk tampilan yang lebih baik */
  cursor: pointer;
}
.tt-suggestion:hover {
  background-color: #333333; /* Warna latar belakang saat hover */
  color: #ffffff; /* Warna teks saat hover */
}
</style>
