@extends('menu/index')
@section('konten-transaksi')
<!-- component -->
<main class="app-main"> <!--begin::App Content Header-->
@include('flash-message')
<script>
setTimeout(function() { 
  var flashMessage = document.querySelector('.alert'); 
   if (flashMessage) { flashMessage.style.transition = 'opacity 1s ease'; flashMessage.style.opacity = 0; setTimeout(function() { flashMessage.remove(); }, 1000); 
   } }, 1500); </script>
@include('Transaksi/layout-transaksi/navbar-transaksi')
    <div class="flex items-center justify-center p-2 row mt-5">
        <!-- Author: FormBold Team -->  
        <!-- Learn More: https://formbold.com -->
        {{-- form input pesanan start --}}
        @include('Transaksi.form-input-pesanan')
        {{-- form input pesanan end --}}
    <div class="mx-auto w-full max-w-[750px] col">
         <!-- component -->
        <div class="relative flex w-full max-w-[47rem] flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg">
        <div class="relative mx-4 mt-4 overflow-hidden rounded-xl bg-blue-gray-500 bg-clip-border text-white shadow-lg shadow-blue-gray-500/40">
      <div class="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60"></div>
      <button
        class="!absolute top-4 right-4 h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-full text-center align-middle font-sans text-xs font-medium uppercase text-red-500 transition-all hover:bg-red-500/10 active:bg-red-500/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
        type="button"
        data-ripple-dark="true"
      >
        <span class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 transform">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            class="h-6 w-6"
          >
            <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"></path>
          </svg>
        </span>
      </button>
    </div>
    <div class="p-6">
      <div class="mb-3 flex items-center justify-between">
        <h5 class="block font-sans text-xl font-medium leading-snug tracking-normal text-blue-gray-900 antialiased">
          {{-- Pesanan --}}
        </h5>
        <p class="flex items-center gap-1.5 font-sans text-base font-normal leading-relaxed text-blue-gray-900 antialiased">
      {{-- <span>nama pemesan</span> --}}
        </p>
      </div>
      <p class="block font-sans text-base font-light leading-relaxed text-gray-700 antialiased">
        <!-- component -->
<div class="max-w-[720px] mx-auto">
    
    <div class="block mb-2 mx-auto border-b text-center border-slate-300 pb-2 max-w-[360px]">
       <span class="">List Pesanan</span>
   </div>
   <div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
   {{-- table transaksi start --}}
    @include('Transaksi/layout-transaksi/table-daftar-transaksi')
   {{-- table transaksi end --}}
   </div>
</div>
      </p>
     
    </div>
    <form class="p-2 form-update-pesanan" action="{{ route('simpan-update-pesanan') }}" method="POST">
      @csrf
      <div class="row">
        <div class="mb-2 col">
          <label
            for="for_nama_pemesan"
            class="mb-1 block text-base font-medium text-[#07074D]">
            Nama Pemesan
        </label>
           <input value="{{ old('for_nama_pemesan', $dataTransaksi->first()->nama_pemesan ?? '') }}"
           autofocus
           autocomplete="off"
            type="text"
            name="for_nama_pemesan"
            id="for_nama_pemesan"
            placeholder="Input Nama Pemesan"
            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_nama_pemesan'))
            <div style ="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_nama_pemesan')}}</div>
            @endif
        </div>

        <div class="mb-2 col">
          <label
            for="for_nomor_meja"
            class="mb-1 block text-base font-medium text-[#07074D]">
            Nomor Meja
        </label>
          <input
          value="{{ old('for_nomor_meja', $dataTransaksi->first()->nomor_meja ?? '') }}"
          autocomplete="off"
            type="text"
            name="for_nomor_meja"
            id="for_nomor_meja"
            placeholder="Input lokasi meja makan customers"
            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_nomor_meja'))
            <div style ="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_nomor_meja')}}</div>
            @endif
        </div>


      </div>
        
          <div class="row">
              <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_jenis_pesanan">
                  Jenis Pesanan
                </label>
                <select 
                value="{{ old('for_jenis_pesanan', $dataTransaksi->first()->metode_bayar ?? '') }}"
                class=" text-xs appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-4" name="for_jenis_pesanan" id="for_jenis_pesanan">
                  <option value="" selected>Pilih Jenis Pesanan</option>
                  <option value="Dine in" {{ old('for_jenis_pesanan') == 'Dine in' ? 'selected' : '' }}>Dine in</option>
                  <option value="Grabfood" {{ old('for_jenis_pesanan') == 'Grabfood' ? 'selected' : '' }}>Grabfood</option>
                  <option value="Gofood" {{ old('for_jenis_pesanan') == 'Gofood' ? 'selected' : '' }}>Gofood</option>
                  <option value="Take Away" {{ old('for_jenis_pesanan') == 'Take Away' ? 'selected' : '' }}>Take away</option>
                  <option value="Delivery Order" {{ old('for_jenis_pesanan') == 'Delivery Order' ? 'selected' : '' }}>Delivery Order</option>
              </select>
                @if ($errors->has('for_metode_bayar'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_metode_bayar')}}</div>
                @endif
            </div>
          </div>

          <div class="row alamat_delivery_order">
              <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_alamat_delivery_order">
                  Alamat Delivery
                </label>
                <textarea style="border: 1px solid #000;" name="for_alamat_delivery_order" id="for_alamat_delivery_order" cols="50" rows="3"></textarea>
                @if ($errors->has('for_alamat_delivery_order'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_alamat_delivery_order')}}</div>
                @endif
            </div>
          </div>

          <div class="row for_no_hp_customer">
              <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_no_hp_customer">
                  No Hp customer
                </label>
                <input class="text-xs appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-4" placeholder="Input no hp customer" style="border: 1px solid #000;" name="for_no_hp_customer" id="for_no_hp_customer" cols="50" rows="3"></input>
                @if ($errors->has('for_no_hp_customer'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_no_hp_customer')}}</div>
                @endif
            </div>
          </div>
          <div class="row for_no_hp_customer">
              <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_ongkir">
                  Ongkir
                </label>
                <input class="text-xs appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-4" placeholder="Input ongkir bila ada" style="border: 1px solid #000;" name="for_ongkir" id="for_ongkir" cols="50" rows="3"></input>
                @if ($errors->has('for_ongkir'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_ongkir')}}</div>
                @endif
            </div>
          </div>

        <div class="row select">
            <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_metode_bayar">
                  Metode bayar
                </label>
                <select 
                value="{{ old('for_metode_bayar', $dataTransaksi->first()->metode_bayar ?? '') }}"
                class=" text-xs appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-4" name="for_metode_bayar" id="for_metode_bayar">
                  <option value="" selected>Pilih metode bayar</option>
                  <option value="Tunai" {{ old('for_metode_bayar') == 'Tunai' ? 'selected' : '' }}>Tunai</option>s
                  <option value="Debit BCA" {{ old('for_metode_bayar') == 'Debit BCA' ? 'selected' : '' }}>Debit BCA</option>
                  <option value="Debit Mandiri" {{ old('for_metode_bayar') == 'Debit Mandiri' ? 'selected' : '' }}>Debit Mandiri</option>
                  <option value="Debit BNI" {{ old('for_metode_bayar') == 'Debit BNI' ? 'selected' : '' }}>Debit BNI</option>
                  <option value="Debit BRI" {{ old('for_metode_bayar') == 'Debit BRI' ? 'selected' : '' }}>Debit BRI</option>
                  <option value="Debit CIMB NIAGA" {{ old('for_metode_bayar') == 'Debit CIMB NIAGA' ? 'selected' : '' }}>Debit CIMB NIAGA</option>
                  <option value="GOPAY" {{ old('for_metode_bayar') == 'GOPAY' ? 'selected' : '' }}>GOPAY</option>
                  <option value="OVO" {{ old('for_metode_bayar') == 'OVO' ? 'selected' : '' }}>OVO</option>
                  <option value="QRIS" {{ old('for_metode_bayar') == 'QRIS' ? 'selected' : '' }}>QRIS</option>
                  <option value="Transfer" {{ old('for_metode_bayar') == 'Transfer' ? 'selected' : '' }}>Transfer</option>
              </select>
                @if ($errors->has('for_metode_bayar'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_metode_bayar')}}</div>
                @endif
            </div>
            
            <div class="md:w-1/2  mb-6 md:mb-2 col">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="for_status_bayar">
                  Status Bayar
                </label>
                <select class=" text-xs appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-2 px-4" name="for_status_bayar" id="for_status_bayar">
                  <option value="" selected>Pilih status bayar</option>
                  <option value="Lunas" {{ old('for_status_bayar') == 'Lunas' ? 'selected' : '' }}>Lunas</option>
                  <option value="On Process" {{ old('for_status_bayar') == 'On Process' ? 'selected' : '' }}>On Process</option>
              </select>
                @if ($errors->has('for_status_bayar'))
                <div style="background-color: red;" class="badge text-bg-danger">{{$errors->first('for_status_bayar')}}</div>
                @endif
            </div>
        </div>
        <div>
          <button 
            class="hover:shadow-form rounded-md bg-[#20806b] py-1 px-3 text-base font-semibold text-white outline-none"
          >
            Cetak Nota
          </button>
          {{-- <script> function printPage() { window.print(); } </script>s --}}
        </div>
      </form>
  </div>
  
  <!-- stylesheet -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@material-tailwind/html@latest/styles/material-tailwind.css"
  />
  
  <!-- from cdn -->
  <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
        </div>
      </div>


  
  
   
</main> <!--end::App Main-->

@endsection