@extends('apex-layouts.main')

@section('title',"{$mealplan->title} Menu")
@section('styles')
@stop

@section('header-right')

@endsection
@section('content')
    <section id="bg-variants">
        <div class="row match-height">
            @if (request('success'))
                <ngb-alert role="alert" type="primary"
                           class="alert      center alert-success">{{ session('success') }}</ngb-alert>

            @endif
            @if (session('error'))
                <ngb-alert role="alert" type="danger"
                           class="alert center alert-danger">{{ session('error') }}</ngb-alert>
            @endif
            @foreach($reservations as $reservation)
                <div class="col-12">
                    <div class="content-header"><span>{!! $reservation->onDate !!}</span>
                        <span class="font-small-3 text-warning"> Kcal : {!! ceil($reservation->breakfastCalories + $reservation->lunchCalories + $reservation->snackCalories + $reservation->dinnerCalories ) !!}</span>
                        <span class="font-small-3 text-warning"> G : {!! ceil($reservation->breakfastGrams + $reservation->lunchGrams + $reservation->snackGrams + $reservation->dinnerGrams ) !!}</span>
                        <div class="canceLoader" style="display: none"  id="package-meal-cancel-{!! $reservation->reservationId !!}-loader"></div>
                        @if(!$reservation->id)
                            <span class="pull-right">
                                <a data-url="{!! route("members.mealCancel",$reservation->reservationId) !!}"
                                   class="btn btn-raised btn-light round btn-min-width mr-1 mb-1 ajax-base-modal"
                                   data-modal-id="package-meal-cancel-{!! $reservation->reservationId !!}">
                                    <i class="fa fa-close danger"></i> Cancel Meal</a>
                            </span>
                        @endif
                    </div>
                </div>
                @if($reservation->breakfast)
                    <div class="col-lg-3 col-sm-6">
                        <div class="card card-inverse {!! ($reservation->id) ?($reservation->is_breakfast ==0)?"bg-danger":"bg-grey":"gradient-ibiza-sunset"!!} text-center">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row  d-md-flex">
                                        <div class="col align-self-center image-show"
                                             data-title="{!! $reservation->breakfast !!}">
                                            <img
                                                    src="#"
                                                    data-src="{{($reservation->breakfastLogo)? env("IMAGE_BASE_URL","https://www.dietbox.pk/storage")."/".$reservation->breakfastLogo :URL::asset("/aron-assets/food-resturant-assets/images/menu-dish-3.jpg")}}"
                                                    alt="element 01"
                                                    width="100" class="mt-sm-1 img-thumbnail">
                                        </div>
                                        <div class="col align-self-center">
                                            <h4 class="card-title mb-3">{!! "Breakfast" !!}</h4>
                                            <p class="card-text">{!! $reservation->breakfast !!}</p>
                                            <p class="card-text">Kcal: {!! ceil($reservation->breakfastCalories )!!}
                                                <span> G: {!! ceil($reservation->breakfastGrams )!!}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if($reservation->lunch)
                    <div class="col-lg-3 col-sm-6">
                        <div class="card card-inverse {!! ($reservation->id) ?($reservation->is_lunch ==0)?"bg-danger":"bg-grey":"gradient-pomegranate"!!} text-center">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row  d-md-flex">
                                        <div class="col align-self-center">
                                            <img
                                                    src="#"
                                                    data-src="{{($reservation->lunchLogo)? env("IMAGE_BASE_URL","https://www.dietbox.pk/storage")."/".$reservation->lunchLogo :URL::asset("/aron-assets/food-resturant-assets/images/menu-dish-3.jpg")}}"
                                                    alt="element 01"
                                                    width="100" class="mt-sm-1 img-thumbnail"
                                            >
                                        </div>
                                        <div class="col align-self-center">
                                            <h4 class="card-title mb-3">{!! "Lunch" !!}</h4>
                                            <p class="card-text">{!! $reservation->lunch !!}</p>
                                            <p class="card-text">Kcal: {!! ceil($reservation->lunchCalories )!!}
                                                <span> G: {!! ceil($reservation->lunchGrams )!!}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if($reservation->snack)
                    <div class="col-lg-3 col-sm-6">
                        <div class="card card-inverse {!! ($reservation->id) ?($reservation->is_snack ==0)?"bg-danger":"bg-grey":"gradient-mint"!!}  text-center">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row  d-md-flex">
                                        <div class="col align-self-center">
                                            <img
                                                    src="#"
                                                    data-src="{{($reservation->snackLogo)? env("IMAGE_BASE_URL","https://www.dietbox.pk/storage")."/".$reservation->snackLogo :URL::asset("/aron-assets/food-resturant-assets/images/menu-dish-3.jpg")}}"
                                                    alt="element 01"
                                                    width="100" class="mt-sm-1 img-thumbnail"
                                            >
                                        </div>
                                        <div class="col align-self-center">
                                            <h4 class="card-title mb-3">{!! "Snack" !!}</h4>
                                            <p class="card-text">{!! $reservation->snack !!}</p>
                                            <p class="card-text">Kcal: {!! ceil($reservation->snackCalories )!!}
                                                <span> G: {!! ceil($reservation->snackGrams )!!}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if($reservation->dinner)
                    <div class="col-lg-3 col-sm-6">
                        <div class="card card-inverse {!! ($reservation->id) ?($reservation->is_dinner ==0)?"bg-danger":"bg-grey":"gradient-king-yna"!!}  text-center">
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row  d-md-flex">
                                        <div class="col align-self-center">
                                            <img
                                                    src="#"
                                                    data-src="{{($reservation->dinnerLogo)? env("IMAGE_BASE_URL","https://www.dietbox.pk/storage")."/".$reservation->dinnerLogo :URL::asset("/aron-assets/food-resturant-assets/images/menu-dish-3.jpg")}}"
                                                    alt="element 01"
                                                    width="100" class="mt-sm-1 img-thumbnail"
                                            >
                                        </div>
                                        <div class="col align-self-center">
                                            <h4 class="card-title mb-3">{!! "Dinner" !!}</h4>
                                            <p class="card-text">{!! $reservation->dinner !!}</p>
                                            <p class="card-text">Kcal: {!! ceil($reservation->dinnerCalories )!!}
                                                <span> G: {!! ceil($reservation->dinnerGrams )!!}</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </section>
@endsection

@section('scripts')

@stop