@extends('apex-layouts.main')


@section('title',"Members Bags of ".$onDate)

@section('header-right')
    <a class="btn btn-raised btn-warning round mr-1 mb-1" href="{{ route('reservations.kitchen', $onDate) }}"><i class="fa fa-arrow-left"></i></a>
    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"
       href="{{ route('reservations.transit', $onDate) }}">
        <i class="fa fa-truck indigo"></i> Dispatch
    </a>
    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"
       href="{{ route('reservations.delivered', $onDate) }}">
        <i class="fa fa-check success"></i> Delivered
    </a>
{{--    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1"--}}
{{--       href="{{ route('reservations.exportPrint', $onDate) }}">--}}
{{--        <i class="fa fa-print"></i> Take out Prints--}}
{{--    </a>--}}
    <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>
{{--    <a class="btn btn-raised round  mr-1 mb-1" style="display: none">--}}
{{--        <form action="{{ route('reservations.print')}}" enctype="multipart/form-data" method="post">--}}
{{--            @csrf--}}
{{--            <input type="file" style="display: none" id="button_submit" name="file_excel" onchange="form.submit()">--}}
{{--        </form>--}}
{{--    </a>--}}
{{--    <b href="" class="btn btn-raised btn-info round btn-min-width mr-1 mb-1" id="import"><i class="ft-upload-cloud"></i></b>--}}
@endsection


@section('content')
    <section>
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <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> Total Members :
                                    <mark>{!! $membersCount !!} </mark>
                                </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:{!!  (!$membersCount)?0:$insight->cookingMembers *100 / $membersCount !!}%;"></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: {!! (!$membersCount)?0:$insight->transitMembers *100 / $membersCount !!}%;">
                                                </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: {!! (!$membersCount)?0:$insight->deliveredMembers *100 / $membersCount !!}%;"></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: {!! (!$membersCount)?0:$insight->canceledMembers *100 / $membersCount !!}%;"></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: {!! (!$membersCount)?0:$insight->declinedMembers *100 / $membersCount !!}%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <form action="{{route("reservations.doTransit",$onDate)}}" method="post">
        @csrf
        <section>
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <h4>
                                <i class="ft-users info"></i> Members List
                                <small><i class="fa fa-print"></i></small>
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-block">
                        <div class="row">
                            @foreach($members as $member)
                                <div class="col-md-3 card-block
                                    {!! ($member->status == \App\models\MemberReservation::STATUS_CANCELED)?"danger":"" !!}"
                                    {!! ($member->status == \App\models\MemberReservation::STATUS_CANCELED)?"style='text-decoration: line-through'":"" !!}>

                                    @if($member->status == \App\models\MemberReservation::STATUS_IN_TRANSIT)
                                        <a href="{!! route("reservations.declined",$member->id) !!}"
                                           class="pull-right font-small-1">Mark Declined</a>
                                    @endif
                                    @if($member->type == \App\models\MemberReservation::TYPE_ORDER and $member->status == \App\models\MemberReservation::STATUS_PENDING)
                                        <a class="danger ajax-base-modal mb-1 mr-1 pull-right font-small-1" href="#"
                                           data-modal-id="member-reservation-cancel-modal-{{$member->id}}"
                                           data-url="{{route('reservations.cancelOrder',$member->id)}}">Cancel Single
                                            Order</a>
                                    @endif

                                    <div class="media-body" title="{!! $member->name !!}">
                                        <a href="{!! route("members.show",$member->memberId) !!}">{{$member->name}}</a>
                                        <small class="font-small-1">{{$member->mealplan}}</small>
                                        <p class="font-small-1 mb-0">
                                            Breakfast:<i
                                                    class="{!! ($member->is_breakfast)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            lunch:<i
                                                    class="{!! ($member->is_lunch)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            snack:<i
                                                    class="{!! ($member->is_snack)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            dinner:<i
                                                    class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            @if($member->type == \App\models\MemberReservation::TYPE_ORDER)
                                            </br>
                                            <mark>Single day {{$member->type}}</mark>
                                            @endif
                                            <span class="purple">{!! $member->status !!}</span>
                                            </br>
                                            {!! $member->address !!}
                                            </br>
                                            <b>Note: </b>{!! $member->address_note !!}
                                            </br>
                                        </p>
                                    </div>