@extends('apex-layouts.main')


@section('title',"Reservation ".$onDate)

@section('header-right')
    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"
       href="{{ route('reservations.printView', $onDate) }}">
        <i class="fa fa-print"></i> Take out Prints
    </a>
    @if($insight->overAll != $insight->totalMember)
        <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"
           href="{{ route('reservations.cook', $onDate) }}">
            <i class="fa fa-fire red"></i> Go For Cook
        </a>
    @endif
    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"
       href="{{ route('reservations.orders', $onDate) }}">
        <i class="fa fa-bicycle info"></i> Rider
    </a>
@endsection


@section('content')
    <section>
        <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-3 col-3">
                <div class="card gradient-amber-amber">
                    <div class="card-content">
                        <div class="card-body py-0">
                            <div class="media pb-1">
                                <div class="media-body white text-left">
                                    <h3 class="font-large-1 white mb-0"> TOTAL</h3>
                                </div>
                                <div class="media-right white text-right">
                                    <i class="ft-users font-large-1"></i>&nbsp;
                                </div>
                            </div>
                        </div>
                        <div class="height-100 mb-2 white">
                            <h4>&nbsp;{!! $insight->totalMember !!}</h4>
                            <h6>&nbsp;MEMBERS: {!! $insight->memberCount !!}</h6>
                            <h6>&nbsp;ORDERS: {!! $insight->orderCount !!}</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-9 col-lg-9">
                <div class="card" style="height: 150px;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-6"><h4 class="card-title"><i class="fa fa-line-chart warning"></i> Insights
                                </h4>
                                <small data-v-7c41bb9a=""></small>
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <div id="bar-chart" class="height-250 BarChartShadow BarChart">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col text-center">
                                        <div class="col"><span
                                                    class="mb-1 text-muted d-block"><i class="fa fa-fire warning"></i> {!! $insight->cookingMembers !!} - Cooking</span>
                                            <div class="progress" style="height: 5px;">
                                                <div role="progressbar" aria-valuenow="126"
                                                     aria-valuemin="0" aria-valuemax="100"
                                                     class="progress-bar bg-warning"
                                                     style="width:{!! (!$insight->totalMember)?0:$insight->cookingMembers *100 / $insight->totalMember !!}%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col text-center">
                                        <div class="col">
                                            <span class="mb-1 text-muted d-block"><i class="fa fa-bicycle indigo"></i> {!! $insight->transitMembers !!} - Transit</span>
                                            <div class="progress" style="height: 5px;">
                                                <div role="progressbar" aria-valuenow="891"
                                                     aria-valuemin="0" aria-valuemax="100"
                                                     class="progress-bar bg-indigo"
                                                     style="width: {!! (!$insight->totalMember)?0:$insight->transitMembers *100 / $insight->totalMember !!}%;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col text-center">
                                        <div class="col"><span
                                                    class="mb-1 text-muted d-block"><i class="fa fa-check success"></i> {!! $insight->deliveredMembers !!} - Delivered</span>
                                            <div class="progress" style="height: 5px;">
                                                <div role="progressbar" aria-valuenow="22120"
                                                     aria-valuemin="0" aria-valuemax="100"
                                                     class="progress-bar bg-success"
                                                     style="width: {!! (!$insight->totalMember)?0:$insight->deliveredMembers *100 / $insight->totalMember !!}%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col text-center">
                                        <div class="col"><span
                                                    class="mb-1 text-muted d-block"><i class="fa fa-close red"></i> {!! $insight->canceledMembers !!} - Canceled</span>
                                            <div class="progress" style="height: 5px;">
                                                <div role="progressbar" aria-valuenow="1376"
                                                     aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"
                                                     style="width: {!! (!$insight->totalMember)?0:$insight->canceledMembers *100 / $insight->totalMember !!}%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col text-center">
                                        <div class="col"><span
                                                    class="mb-1 text-muted d-block"><i
                                                        class="fa fa-window-close red"></i> {!! $insight->declinedMembers !!} - Declined</span>
                                            <div class="progress" style="height: 5px;">
                                                <div role="progressbar" aria-valuenow="4"
                                                     aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"
                                                     style="width: {!! (!$insight->totalMember)?0:$insight->declinedMembers *100 / $insight->totalMember !!}%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <section>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <h4>
                            <i class="ft-users info"></i> Members List
                        </h4>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="card-block">
                    <div class="row overflow-scroll height-300">
                        @foreach($members as $member)
                            <div class="col-md-3 card-block">
                                <div class="media-body {!! ($member->status == \App\models\MemberReservation::STATUS_CANCELED ||
                                 $member->status == \App\models\MemberReservation::STATUS_DECLINED )?" red" : '' !!}">
                                    <a href="{!! route("members.show",$member->memberId) !!}">{{$member->name}}</a>
                                    <small class="font-small-1">{{$member->mealplans}}</small>
                                    @if($member->orderId)
                                        <p class="font-small-1">
                                            @if($member->pisBreakfast)
                                                Breakfast:<i
                                                        class="{!! ($member->is_breakfast)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisLunch)

                                                lunch:<i
                                                        class="{!! ($member->is_lunch)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisSnack)

                                                snack:<i
                                                        class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisDinner)

                                                dinner:<i
                                                        class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            <br>
                                            <small class="font-small-1 pink">endOn : {{$member->expireOn}}</small>
                                                <small class="font-small-1">{!! $member->status !!}</small>
                                        </p>
                                    @else
                                        <p class="font-small-1">
                                            @if($member->pisBreakfast)
                                                Breakfast:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisLunch)

                                                lunch:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisSnack)

                                                snack:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisDinner)

                                                dinner:<i class="fa fa-check success"></i>
                                            @endif
                                            <br>
                                            <small class="font-small-1 pink">endOn : {{$member->expireOn}}</small>
                                                <small class="font-small-1">{!! $member->status !!}</small>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        @foreach($orderMembers as $member)
                            <div class="col-md-3 card-block">
                                <div class="media-body {!! ($member->status == \App\models\MemberReservation::STATUS_CANCELED)?"" : '' !!}"
                                     title="{!! $member->name !!}">
                                    <a href="{{ route('members.show', $member->memberId) }}">{{$member->name}}</a>
                                    <small class="font-small-1">{{$member->mealplans}}</small>
                                    @if($member->orderId)
                                        <p class="font-small-1">
                                            @if($member->pisBreakfast)
                                                Breakfast:<i
                                                        class="{!! ($member->is_breakfast)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisLunch)

                                                lunch:<i
                                                        class="{!! ($member->is_lunch)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisSnack)

                                                snack:<i
                                                        class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            @if($member->pisDinner)

                                                dinner:<i
                                                        class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @endif
                                            <br>
                                            <small class="font-small-3">Single Order</small>
                                            <small class="font-small-1">{!! $member->status !!}</small>
                                        </p>
                                    @else
                                        <p class="font-small-1">
                                            @if($member->pisBreakfast)
                                                Breakfast:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisLunch)

                                                lunch:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisSnack)

                                                snack:<i class="fa fa-check success"></i>
                                            @endif
                                            @if($member->pisDinner)

                                                dinner:<i class="fa fa-check success"></i>
                                            @endif

                                            <br>
                                            <small class="font-small-1 pink">Single Order</small>
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="card">
            <div class="card-header">
                <h3>
                    <i class="fa fa-fire red"></i> Kitchen <a href="#" id="printmeals"><i
                                class="fa fa-print info small"></i></a>
                </h3>
            </div>
        </div>
    </section>
    @foreach($mealData as $type => $data)
        <section>
            <blockquote>{!! $type !!}</blockquote>
            @foreach($data as $meal)
                <div class="media image-show" data-title="{!! $meal->title !!}">
                    <img class="rounded mr-3"
                         src="#"
                         data-src="{!! ($meal->logoImage)?env("IMAGE_BASE_URL")."/".$meal->logoImage:env("NO_IMAGE_URL") !!}"
                         width="70" height="70" alt="{!! $meal->title !!}">

                    <div class="media-body">
                        <a href="{!! route("meals.show",$meal->id) !!}"><h5
                                    class="mt-1">{!! $meal->title !!}</h5></a>
                        <p>
                            <small class="">Kcal:
                                <mark>{!! $meal->totalCalories !!}</mark>
                                | Grams:
                                <mark>{!! $meal->totalGrams !!}</mark>
                                | {!! $meal->mealplans !!}{!! $meal->orderText !!}
                            </small>
                        </p>
                    </div>
                </div>
                <div class="row font-small-3">
                    @foreach($meal->recipes as $recipe)
                        @php
                            $mealCount = $meal->memberCount;
                        @endphp
                        <div class="col-md-4">
                            <ul class="list-group-horizontal-sm">
                                <li class="list-group-item">
                                    <div class="media image-show" data-title="{!! $recipe->title !!}">
                                        <img alt="{!! $recipe->title !!}"
                                             class="img-thumbnail height-75 width-75 rounded-circle"
                                             data-src="{!! ($recipe->logoImage)?env("IMAGE_BASE_URL")."/".$recipe->logoImage:env("NO_IMAGE_URL") !!}"
                                             src="https://dietbox.pk/uploads/recipes/04985c93e7e8d46eaf2182f6715c02f5.jpeg">
                                        <div class="media-body">
                                            <a href="{!! route("recipe.show",$recipe->id) !!}"><h5
                                                        class="mt-3">{!! $recipe->title !!}</h5></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    Ingredients for
                                    <span class="badge badge-light"><b class="font-medium-3">{!! $mealCount !!}</b></span>
                                    Members
                                    <small class="pull-right">Kcal:
                                        <mark>{!! $recipe->totalCalories * $mealCount !!}</mark>
                                        | Grams:
                                        <mark>{!! $recipe->totalGrams * $mealCount !!}</mark>
                                    </small>
                                </li>
                                @foreach($recipe->ingredients as $ingredient)
                                    <li class="list-group-item">
                                        <span class="badge badge-light">{!! $ingredient->name !!}</span>
                                        <div class="float-right">
                                            <mark class="badge badge-light">{!! $ingredient->pivot->grams * $mealCount !!}
                                                G
                                            </mark>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach

                </div>

            @endforeach
        </section>
    @endforeach

@endsection
@section('scripts')
@stop

@section('styles')
@stop