@extends('apex-layouts.main')


@section('title',"Dispatch ".$onDate." Members Reservations")

@section('header-right')
    <a class="btn btn-raised btn-light round btn-min-width mr-1 mb-1" href="{{ route('reservations.orders', $onDate) }}"><i class="fa fa-arrow-left"></i> </a>
@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> Left 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">
                                    @foreach($insights as $insight)
                                        <div class="col text-center">
                                            <div class="col"><span
                                                        class="mb-1 text-muted d-block"><i
                                                            class="fa fa-fire warning"></i> {!! $insight->count !!} -  {!! $insight->name!!}</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->count *100 / $membersCount !!}%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </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
                            </h4>
                        </div>
                        <div class="col-2">
                            <select class="form-control" name="user_id">
                                <option>Select Rider</option>
                                @foreach($users as  $id => $name)
                                    <option value="{{$id}}">{{$name}}</option>
                                @endForeach
                            </select>
                        </div>
                        <div class="col-2">
                            <a href="#"
                               id="selectAll"
                               class="btn btn-light"><i class="ft-check-circle warning"></i></a>
                            <button type="submit" class="btn btn-info">save</button>

                        </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">
                                    <div class="custom-checkbox pull-right">
                                        <input type="checkbox" name="member_reservationIds[] "
                                               class="custom-control-input checkox-all"
                                               value="{{$member->id}}"
                                               id="customcheckbox{{$member->id}}">
                                        <label class="custom-control-label"
                                               for="customcheckbox{{$member->id}}"></label>
                                    </div>
                                    <div class="media-body" title="{!! $member->name !!}">
                                        <strong>{{$member->name}}</strong>
                                        <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_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            dinner:<i
                                                    class="{!! ($member->is_dinner)?"fa fa-check success": "fa fa-close red"!!}"></i>
                                            </br>
                                            <mark>endOn:{{$member->expireOn}}</mark>
                                            </br>
                                            {!! $member->address !!}
                                            </br>
                                            <b>Note: </b>{!! $member->address_note !!}
                                            </br>
                                        </p>
                                    </div>

                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </form>

@stop
@section('scripts')

    <script>

        $("#selectAll").click(function () {
            $(".checkox-all").each(function () {
                $(this).prop("checked", true);
            });
        });
    </script>
@stop

@section('styles')
@stop