@extends('frontend.frontend_layout')
@section('catering') active @endsection

@section('content')

<main id="main">
    <!-- ======= Section ======= -->
    <section id="menu" class="menu pt-150" style="padding-bottom: 0px">
        <div class="container">
            <div class="section-title">
                <h2>Catering</h2>
                <center>We can take minumum order 10 people. All Cetaring Items has to be pre-order</center>
            </div>
            
            <div class="row mb-4">
                <div class="col-md-6 pb-4 mx-auto">
                    <div class="catering-box">
                        <h3 class="text-center">{{ $four_catering->name }}</h3>
                        <ul class="bullet">
                            @foreach ($four_catering['sub_caterings'] as $subcatering)
                            <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                            @endforeach
                        </ul>
                        <h3 class="text-center mt-5">{{ $five_catering->name }}</h3>
                        <ul class="bullet">
                            @foreach ($five_catering['sub_caterings'] as $subcatering)
                            <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                @foreach ($caterings as $key => $catering)
                    <div class="col-md-6 pb-4">
                        <div class="catering-box">
                            <h3 class="text-center">Menu {{ $key+1 }}: {{ $catering->name }}</h3>
                            <ul class="bullet">
                                @foreach ($catering['sub_caterings'] as $subcatering)
                                <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mb-4">
                <div class="col-md-6 pb-4">
                    <div class="catering-box">
                        <h3 class="text-center">{{ $first_catering->name }}</h3>
                        <ul class="bullet">
                            @foreach ($first_catering['sub_caterings'] as $subcatering)
                            <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 pb-4">
                    <div class="catering-box">
                        <h3 class="text-center">{{ $second_catering->name }}</h3>
                        <ul class="bullet">
                            @foreach ($second_catering['sub_caterings'] as $subcatering)
                            <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="col-md-12 pb-4">
                    <div class="catering-box">
                        <h3 class="text-center">{{ $third_catering->name }}</h3>
                        <ul class="bullet order_by_trays">
                            @foreach ($third_catering['sub_caterings'] as $subcatering)
                            <li style="display: flex; justify-content: space-between"><span>{{ $subcatering->name }}</span><span>${{ $subcatering->price }}</span></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- End Section -->
</main>
<!-- End #main -->
<div class="container mb-4">
<p class="text-center" style="font-weight: 600">We can make your event memorable. For more information about our catering service or any concern you have, please don’t hesitate to call us at <a href="tel: +1 484-454-5830">+1 484-454-5830</a>.</p>
</div>
@endsection