@extends('admin.layouts.app')
@section('title', 'Trips')
@section('content')
    @include('admin.includes.alerts')
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:500');

        /*body {*/
        /*    background-image: url(https://images.pexels.com/photos/735911/pexels-photo-735911.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);*/
        /*    font-family: 'Raleway', sans-serif;*/
        /*}*/

        .main-search-input {
            margin: 20px auto;
            border-radius: 50px;
            max-width: 1000px;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            padding: 9px;
            max-height: 68px;
        }

        .main-search-input-item {
            flex: 1;
            border-right: 1px solid #e9e9e9;
            margin-top: 3px;
            position: relative;
            padding-left: 30px;
            padding-right: 30px;
        }

        .main-search-input .main-search-input-item:nth-last-child(2) {
            border-right: 0;
            padding-left: 15px;
            padding-right: 15px;
        }

        .main-search-input input, .main-search-input input:focus {
            font-size: 16px;
            border: 0;
            background: #fff;
            margin: 0;
            padding: 0;
            height: 44px;
            line-height: 44px;
            box-shadow: none;
            max-width: 100%;
            width: 100%;
            font-family: 'Raleway', sans-serif;
            outline: none !important;
        }

        .main-search-input select {
            border: 0;
            padding-top: 2px;
            padding-bottom: 0;
            height: 44px;
            box-shadow: none;
            max-width: 100%;
            font-size: 16px;
            width: 100%;
            font-family: 'Raleway', sans-serif;
            outline: none !important;
        }

        .main-search-input button.button {
            font-family: 'Raleway', sans-serif;
            font-size: 16px;
            font-weight: 500;
            padding: 0 40px;
            margin-right: 1px;
            height: 50px;
            outline: 0;
            background-color: #f91942;
            color: #fff;
            position: relative;
            overflow: hidden;
            border: 0;
            border-radius: 50px;
        }
    </style>
    <div class="main-card mb-3 card">
        <div class="card-body">


            <div class="row">

                <div class="col-lg-12 col-xl-12">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <h5 class="card-title">TODAY TRIPS
                                <a href="#">
                                </a></h5>
                            <div class="grid-menu grid-menu-3col">
                                <div class="no-gutters row">

                                    @foreach ($manifestsSummary as $x => $manifest)
                                        <div class="col-sm-6 col-xl-4">
                                            <li class="list-group-item todo-list-wrapper list-group list-group-flush">
                                                <div class="todo-indicator bg-primary"></div>
                                                <div class="widget-content p-0">
                                                    <div class="widget-content-wrapper">
                                                        <div class="widget-content-left">
                                                            <div class="widget-heading">
                                                                {{ $manifest->origin }} - {{ $manifest->destination }}<br>
                                                                {{ $manifest->label }}<br>{{ $manifest->trip_date }} {{ $manifest->departure }}
                                                            </div>
                                                        </div>
                                                        <div class="widget-content-right">
                                                            <div class="widget-subheading">
                                                                <div>
                                                                    Tickets : <strong>{{ $manifest->booked_seats }}</strong>
                                                                    Sales : <strong>{{ $manifest->collection }} Tsh</strong>
                                                                </div>
                                                            </div>

                                                            <div class="widget-subheading">
                                                                <div>
                                                                    Target : <strong>{{ $manifest->percentage }}%</strong>
                                                                    Vacancies :
                                                                    <strong>{{ $manifest->capacity - $manifest->booked_seats }}</strong>
                                                                </div>
                                                            </div>

                                                            <div class="widget-subheading">
                                                                <div>

                                                                    <strong>
                                                                        @if($manifest->status == 0)
                                                                            <span class="mb-2 mr-2 badge badge-danger">cancelled</span>
                                                                        @elseif($manifest->status == 1)
                                                                            @if($manifest->boarding_status == "Booking is OPEN")
                                                                                <span class="mb-2 mr-2 badge badge-success">{{ $manifest->boarding_status }}</span>
                                                                            @elseif($manifest->boarding_status == "On Journey")
                                                                                <span class="mb-2 mr-2 badge badge-warning">{{ $manifest->boarding_status }}</span>
                                                                            @elseif($manifest->boarding_status == "Booking is CLOSED")
                                                                                <span class="mb-2 mr-2 badge badge-danger">{{ $manifest->boarding_status }}</span>
                                                                            @endif
                                                                        @endif

                                                                    </strong>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                        </div>

                                    @endforeach

                                </div>
                            </div>
                            {{--                            <div class="divider"></div>--}}
                        </div>
                    </div>
                </div>


            </div>



        </div>
    </div>
@endsection