@extends('menu/index')
@section('konten-tambah-transaksi-pada-list-transaksi')

<main class="app-main"> 
@include('flash-message')
@include('Transaksi/layout-transaksi/navbar-transaksi')
    <div class="row">
        <span class="m-4 text-center">
            @if($dataTransaksiTambah->isNotEmpty())
               <span>Nama Pemesan : </span>
               <span style="background-color:rgb(36, 136, 49); color:white; padding:5px; border-radius:5px;">
                   {{ $dataTransaksiTambah->first()->nama_pemesan }}
               </span>
            @else
               <p>Nama pemesan tidak ditemukan.</p>
            @endif
        </span>
        <div class="col p-4">

            <div class="mx-auto w-full max-w-[750px] col">
             <form action="{{ $dataTransaksiTambah->isNotEmpty() ? route('simpan-tambah-pesanan-at-list-transaksi', ['kode_pesanan' => $dataTransaksiTambah->first()->kode_pesanan, 'id' => $dataTransaksiTambah->first()->id ]) : '#' }}" method="POST">
              @csrf
                 
                  <!-- Input hidden untuk memastikan kode_pesanan tersedia -->
                  <input type="hidden" name="kode_pesanan" value="{{ $dataTransaksiTambah->isNotEmpty() ? $dataTransaksiTambah->first()->kode_pesanan : '' }}">
                  <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>
                    <button class="group relative h-6 w-36 overflow-hidden rounded-2xl bg-dark text-xs text-white">
                      Tambah <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>
              <table class="table table-hover table-transaksi">
                <thead>
                  <span class="text-xs" style="text-align: center; color:white; background-color: {{ $firstStatusBayar == 'On Process' ? 'red' : ($firstStatusBayar == 'Lunas' ? 'green' : 'black') }}">
                      {{ $firstStatusBayar }}
                  </span>
                  <tr>
                      <th scope="col">No</th>
                      <th scope="col">Id</th>
                      <th scope="col">Pesanan</th>
                      <th scope="col">Qty</th>
                      <th scope="col">Request Customer</th>
                      <th scope="col">Harga</th>
                      <th scope="col">Total Per item</th>
                  </tr>
                </thead>
                @php $grandTotal = 0; @endphp
                <tbody>
                    @foreach ($dataTransaksiTambah as $dT)
                    @php 
                    $total = $dT->qty * $dT->harga_pesanan; 
                    $grandTotal += $total; // Tambahkan nilai total ke grandTotal 
                    @endphp
                    <tr>
                      <td>{{ $loop->iteration }}</td>
                      <td>{{ $dT->id }}</td>
                      <td>{{ $dT->pesanan }}</td>
                      <td>{{ $dT->qty }}</td>
                      <td>{{ $dT->request_customer }}</td>
                      <td>{{ number_format($dT->harga_pesanan, 2, ',','.') }}</td>
                      <td>{{ number_format($total, 2, ',', '.') }}</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="text-xs" style="font-size: 10px;">
                    <tr>
                        <td colspan="5" class="text-right"><strong>Grand Total:</strong></td>
                        <td>{{ number_format($grandTotal, 2, ',', '.') }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
              <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>             
        </div> 
    </div>
    
</main>
@endsection