@extends('menu/main')
@section('konten-daftar-menu')
  <!-- component -->
<section class="container mx-auto p-6 font-mono">
    <div class="w-full mb-8 overflow-hidden rounded-lg shadow-lg">
      <div class="w-full overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="text-md font-semibold tracking-wide text-left text-gray-900 bg-gray-100 uppercase border-b border-gray-600">
              <th class="px-4 py-3">Id</th>
              <th class="px-4 py-3">Kategory</th>
              <th class="px-4 py-3">Nama</th>
              <th class="px-4 py-3">Jenis Menu</th>
              <th class="px-4 py-3">Jenis Paket</th>
              <th class="px-4 py-3">Harga</th>
              <th class="px-4 py-3">Dibuat Oleh</th>
              <th class="px-4 py-3">Tanggal Dibuat</th>
              <th class="px-4 py-3">Action</th>
            </tr>
          </thead>
          <tbody class="bg-white">
            @foreach ($dataMenu as $dM )
            <tr class="text-gray-700">
              <td class="px-4 py-3 border">
                <div class="flex items-center text-sm">
                  <div class="relative w-8 h-8 mr-3 rounded-full md:block">
                    <img style="border-radius: 25px" src="{{ asset('storage/gambar-menu/'.$dM -> img) }}" alt="">
                    <div class="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
                  </div>
                  <div>
                    <p class="font-semibold text-black">{{ $loop->iteration }}</p>
                  </div>
                </div>
              </td>
              <td class="px-4 py-3 text-ms font-semibold border">{{ $dM -> id_kategory }}</td>
              <td class="px-4 py-3 text-xs border">
                <span class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm">{{ $dM -> nama }}</span>
              </td>
              <td class="px-4 py-3 text-xs border">
                <span class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm">{{ $dM -> jenis_menu }}</span>
              </td>
              <td class="px-4 py-3 text-xs border">
                <span class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm">{{ $dM -> jenis_paket }}</span>
              </td>
              <td class="px-4 py-3 text-sm border">{{ $dM -> harga }}</td>
              <td class="px-4 py-3 text-sm border">{{ $dM -> dibuat_oleh }}</td>
              <td class="px-4 py-3 text-sm border">{{ $dM -> updated_at }}</td>
              <td class="px-4 py-3 text-sm border">
                <a href="{{ route('update-menu',['id' => $dM->id]) }}" style="font-size: 10px; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif" class="btn btn-success ">Update</a>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </section>
@endsection