@extends('layouts.app')

@section('title', 'Home')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-home"></i>
                            <form class="d-flex" method="get" action="/">
                                <input class="form-control me-2" name="search" type="search" placeholder="Search" aria-label="Search">
                                <button class="btn btn-outline-success" type="submit">Search</button>
                            </form>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="d-flex flex-wrap flex-grow-0">
                            @forelse($cars as $car)
                                    <div class="col-4">
                                        <a href="{{route('cars.details.frontend',$car)}}">
                                            <div class="card m-1">
                                                <div class="card-body m-1">
                                                    <div class="d-flex flex-row justify-content-between">
                                                        <h5 class="card-title">{{Str::limit($car->name, 15, ' ...') }}</h5>
                                                        <div class="rounded-pill bg-info w-50 text-center align-content-center"><span class="p-1 d-inline-block">Hourly {{$car->hourly_price}} <small>RM</small></span></div>
                                                    </div>

                                                    <p class="card-text">{{ Str::limit($car->description, 90, ' ...') }}</p>
                                                    <div class="d-flex flex-row justify-content-between">
                                                        <div class="p-2 m-0 ">
                                                            <p class="p-0 m-0">Model : {{$car->model}} </p>
                                                            <small class="p-0 m-0">Year : {{$car->year}}</small>
                                                        </div>

                                                        <div class="p-2 m-0">
                                                            <div class="p-0 m-0 d-flex flex-row align-content-center justify-content-around">
                                                                <p>Color :</p> <div style="height: 20px; width: 30px; background-color: {{$car->color}}"></div>
                                                            </div>
                                                            <p class="p-0 m-0">
                                                                <small class="p-0 m-0">Available : @if(\App\Helpers\Helpers::isCarAvailable($car)) <span class="rounded-pill bg-success text-white p-2"> Yes </span> @else <span class="rounded-pill bg-danger text-white p-2"> No </span> @endif</small>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if(App\Helpers\Helpers::carFreeHoursFromNextBooking($car)>0)
                                                    <div class="card-footer p-2 m-0 d-flex flex-row justify-content-between">
                                                        <h5 class="p-0 m-0 text-success">Next booking in {{App\Helpers\Helpers::carFreeHoursFromNextBooking($car)}} hours</h5>
                                                        <small class="p-0 m-0"><span class="rounded-pill text-info">Car is partially free</span></small>
                                                    </div>
                                                @else
                                                    <div class="card-footer p-2 m-0 d-flex flex-row justify-content-between">
                                                        <h5 class="p-0 m-0 text-success">This has no bookings </h5>
                                                        <small class="p-0 m-0"><span class="rounded-pill text-info">Car is completely free</span></small>
                                                    </div>
                                                @endif
                                            </div>
                                        </a>
                                    </div>
                            @empty
                                <div class="alert alert-info">
                                    <p>No cars found.</p>
                                </div>
                            @endforelse
                        </div>
                        <div class="d-flex justify-content-end mt-2">
                            {!! $cars->links() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection