@extends('menu/index')
@section('konten-menu')

<main class="app-main"> <!--begin::App Content Header-->
  
    <div class="app-content-header"> <!--begin::Container-->
        <div class="container-fluid"> <!--begin::Row-->
            <div class="row">
                <div class="col-sm-6">
                    <h3 class="mb-0">Site Menu</h3>
                    @include('flash-message')
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item link-success"><i class="fa-solid fa-circle-plus p-1 "></i><a href="{{ route('form-tambah-menu') }}" class="text-dark">Input Menu</a></li>
                        <li class="breadcrumb-item link-success"><i class="fa-solid fa-list p-1"></i><a href="{{ route('daftar-menu') }}" class="text-dark">Daftar Menu</a></li>
                    </ol>
                </div>
            </div> <!--end::Row-->
        </div> <!--end::Container-->
    </div> <!--end::App Content Header--> <!--begin::App Content-->
    <div class="app-content"> <!--begin::Container-->
        <div class="container-fluid"> <!--begin::Row-->
              @yield('konten-form-tambah-menu')
              @yield('konten-update-menu')
              @yield('konten-daftar-menu')
        </div> <!--end::Container-->
        
    </div> <!--end::App Content-->
    <div class="m-4">
      <div class="flex flex-wrap -mx-6">
          <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
              <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                  <div class="p-2 bg-indigo-600 bg-opacity-50 rounded-full">
                    <i class="fa-solid fa-bowl-food fa-xl"></i>
                  </div>

                  <div class="mx-5">
                     
                      <h4 class="text-2xl font-semibold text-gray-700">{{ $totalMenuMakanan }}</h4>
                      
                      <div class="text-gray-500">Total Menu Makanan</div>
                     
                  </div>
              </div>
          </div>

          <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 sm:mt-0">
              <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                  <div class="p-2 bg-orange-600 bg-opacity-50 rounded-full">
                    <i class="fa-solid fa-mug-saucer fa-xl"></i>
                  </div>

                  <div class="mx-5">
                      <h4 class="text-2xl font-semibold text-gray-700">{{ $totalMenuMinuman }}</h4>
                      <div class="text-gray-500">Total Menu Minuman</div>
                  </div>
              </div>
          </div>

          <div class="w-full px-6 mt-6 sm:w-1/2 xl:w-1/3 xl:mt-0">
              <div class="flex items-center px-5 py-6 bg-white rounded-md shadow-sm">
                  <div class="p-2 bg-pink-600 bg-opacity-50 rounded-full">
                    <i class="fa-solid fa-utensils fa-xl"></i>
                  </div>

                  <div class="mx-5">
                      <h4 class="text-2xl font-semibold text-gray-700">{{ $allMenu }}</h4>
                      <div class="text-gray-500">All menu</div>
                  </div>
              </div>
          </div>
      </div>
  </div>

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