@extends('admin.account.show')
@section('content')

<div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
    <!--begin::Card header-->
    <div class="card-header ">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">Favorite Items</h3>
        </div>
        <!--end::Card title-->
    </div>
    <!--begin::Card header-->

     <!--begin::Card body-->
     <div class="card-body p-9">
      <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="recipes-tab" data-toggle="tab" href="#recipes" role="tab" aria-controls="recipes" aria-selected="true">Recipes</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="food-items-tab" data-toggle="tab" href="#food-items" role="tab" aria-controls="food-items" aria-selected="false">Food Items</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabsContent">

        <div class="tab-pane fade show active" id="recipes" role="tabpanel" aria-labelledby="recipes-tab">
            <!-- Table for Recipes -->
            <table class="table align-middle table-row-dashed fs-6 gy-5">
                <thead>
                    <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                      <th class="w-10px pe-2">
                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                            <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_ecommerce_sales_table .form-check-input" value="1" />
                        </div>
                      </th>
                      <th class="min-w-100px">ID</th>
                      <th class="min-w-100px">Title</th>
                      <th class="text-end min-w-100px">Protein</th>
                      <th class="text-end min-w-100px">Leucine</th>
                      <th class="text-end min-w-100px">Date Added</th>
                      <th class="text-end min-w-100px">Date Modified</th>


                        <!-- Add other table headers as needed -->
                    </tr>
                </thead>
                <tbody class="fw-bold text-gray-600">
                    @foreach($items as $item)
                        @if($item->recipe)
                        <tr>
                          <!--begin::Checkbox-->
                          <td>
                              <div class="form-check form-check-sm form-check-custom form-check-solid">
                                  <input class="form-check-input" type="checkbox" value="1" />
                              </div>
                          </td>
                          <!--end::Checkbox-->
                          <!--begin::Order ID=-->
                          <td data-kt-ecommerce-order-filter="order_id">
                              <a class="text-gray-800 text-hover-primary fw-bolder">{{$item->recipe->id  ?? '-'}}</a>
                          </td>
                          <!--end::Order ID=-->
                          <!--begin::title=-->
                          <td>
                           <div class="ms-5">
                              <span class="text-gray-800 text-hover-primary fs-5 fw-bolder">{{$item->recipe->title ?? '-'}}</span>
                              </div>
                          </td>
                          <!--end::Title=-->
                          <!--begin::protein=-->
                          <td class="text-end pe-0" data-order="">
                             {{$item->recipe->protein ?? '-'}}
                          </td>
                          <!--end::protein=-->
                          <!--begin::leucine=-->
                          <td class="text-end pe-0">
                              <span class="fw-bolder">
                                  {{$item->recipe->leucine ?? '-'}}
                              </span>
                          </td>
                          <!--end::leucine=-->
                          <!--begin::Date Added=-->
                          <td class="text-end" data-order="">
                              <span class="fw-bolder" style="overflow: hidden; text-overflow: ellipsis; ">{{$item->recipe->created_at->format('Y-m-d') ?? '-'}}</span>
                          </td>
                          <!--end::Date Added=-->
                          <!--begin::Date Modified=-->
                          <td class="text-end" data-order="">
                              <span class="fw-bolder">{{$item->recipe->updated_at->format('Y-m-d') ?? '-'}}</span>
                          </td>
                          <!--end::Date Modified=-->

                      </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>


        <div class="tab-pane fade" id="food-items" role="tabpanel" aria-labelledby="food-items-tab">
            <!-- Table for Food Items -->
            <table class="table">
                <thead>
                  <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                    <th class="w-10px pe-2">
                      <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                          <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_ecommerce_sales_table .form-check-input" value="1" />
                      </div>
                    </th>
                    <th class="min-w-100px">ID</th>
                    <th class="min-w-100px">name</th>
                    <th class="text-end min-w-100px">Date Added</th>
                    <th class="text-end min-w-100px">Date Modified</th>


                      <!-- Add other table headers as needed -->
                  </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                        @if($item->foodItem)
                        <tr>
                          <!--begin::Checkbox-->
                          <td>
                              <div class="form-check form-check-sm form-check-custom form-check-solid">
                                  <input class="form-check-input" type="checkbox" value="1" />
                              </div>
                          </td>
                          <!--end::Checkbox-->
                          <!--begin::Order ID=-->
                          <td data-kt-ecommerce-order-filter="order_id">
                              <a class="text-gray-800 text-hover-primary fw-bolder">{{ $item->foodItem->id  ?? '--'}}</a>
                          </td>
                          <!--end::Order ID=-->
                          <!--begin::title=-->
                          <td>
                           <div class="ms-5">
                              <span class="text-gray-800 text-hover-primary fs-5 fw-bolder">{{ $item->foodItem->name  ?? '--'}}</span>
                              </div>
                          </td>
                          <!--end::Title=-->

                        <!--begin::Date Added=-->
                          <td class="text-end" data-order="">
                              <span class="fw-bolder" style="overflow: hidden; text-overflow: ellipsis; ">{{$item->foodItem->created_at->format('Y-m-d') ?? '-'}}</span>
                          </td>
                          <!--end::Date Added=-->
                          <!--begin::Date Modified=-->
                          <td class="text-end" data-order="">
                              <span class="fw-bolder">{{$item->foodItem->updated_at->format('Y-m-d') ?? '-'}}</span>
                          </td>
                          <!--end::Date Modified=-->

                      </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>


    </div>
      <!--end::Card body-->



        <script>
    $(document).ready(function() {
        $('#myTabs a').click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>


</div>
@endsection