@extends('layouts.app')
@section("title", "Menu")
@section('content')


<div id="wrapper">

            <!-- Video Background Youtube
          ============================================= -->
          
      <!-- End Video background Youtube -->
      @include('layouts.includes.main-header')

    <!-- Content
    ============================================= -->
    <div id="content">

            <!-- Menu Grid
            ============================================= -->
            <div class="menu_tabs">
            <!-- Menu Bar -->
                @include('layouts.includes.main-nav')
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-4 side-bar">
                            <aside class="menu-list">
                                <div class="recent-posts">
                                    <h3><span>MENU</span> LIST</h3>
                                    <span class="sidebar_divider"></span>
                                    <nav>
                                        <ul>
                                            @foreach ($categories as $category )
                                                <li><a href="#{{ $category->id }}" >{{ $category->name }}</a></li>
                                            @endforeach
                                        </ul>
                                      </nav>
                                </div>
                            </aside>
                        </div>
                        <div class="col-md-9 col-sm-8 text-center">
                            <!-- End menu bar -->
                            @php $sn = 1; @endphp
                            @foreach ( $categories as $category )
                                <!-- Menu Items
                                ============================================= -->
                                <section id="{{ $category->id }}">
                                    <div class="food-banner dark">
                                    <div id="menu-parallax">
                                        <div class="bcg" style="background-image: url({{ asset("img/menu/thumb$category->id.jpg") }})">
                                        <div class="bg-transparent">
                                            <div class="banner-content">
                                            <div class=""> <i class="icon-breakfast"></i>
                                                <h1>{{ $category->name }}</h1>
                                            </div>
                                            </div>
                                            <!-- End Banner content -->
                                        </div>
                                        <!-- End bg trnsparent -->
                                        </div>
                                    </div>
                                    <!-- Service parallax -->
                                    </div>
                                    <div class="padding-t-40 container">
                                        @php
                                            $products = App\Models\Product::where("category_id", $category->id)->get()
                                        @endphp
                                    <!-- Menu Items  Content -->
                                    @foreach ( $products as $row )
                                        @include('layouts.includes.__menu')
                                    @endforeach
                                    </div>
                                </section>
                                <!-- #menu end -->
                            @php $sn++; @endphp
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Menu Grid -->
    </div>
    <!-- end of #content -->
</div>
@endsection
