@extends('layouts.backend.app')

@section('title', 'Bookings')

@section('content')
    <div class="p-1">
        <div class="card">
            <div class="d-flex justify-content-between p-1">
                <h3 class="card-title">Bookings</h3>
                <div>
                    <h6><span class="alert-success">@if(Session::has('success')){{ Session::get('success') }}@endif </span></h6>
                    <h6><span class="alert-danger">@if(Session::has('error')){{ Session::get('error') }}@endif </span></h6>
                </div>
            </div>

            <!-- /.card-header -->
            <div class="card-body">
                <table class="table-responsive table-striped w-100" id="example">
                    <thead>
                    <th>Made By</th>
                    <th>Car Model</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Per Hour</th>
                    <th>Total Hour</th>
                    <th>Total Cost</th>
                    <th>Status</th>
                    <th class="text-center">Actions</th>
                    </thead>
                    <tbody>
                    @foreach ($bookings as $booking)
                        <tr>
                            <td>{{ $booking->user->name }}</td>
                            <td>{{$booking->car->model}}</td>
                            <td>{{ $booking->start_date }}</td>
                            <td>{{ $booking->end_date }}</td>
                            <td><span class="badge bg-info">{{ $booking->price }} RM</span></td>
                            <td>{{ $booking->hours() }}</td>
                            <td><span class="badge bg-info">{{ $booking->totalCost() }} RM</span></td>
                            <td>@if($booking->status == 1)<span class="badge bg-warning">Ongoing</span> @elseif($booking->status == 3) <span class="badge bg-danger">Declined </span> @else <span class="badge bg-success">Completed</span> @endif</td>
                            <td>
                                <a href="#" onclick="event.preventDefault(); document.getElementById('markAsComplete').submit();" class="btn btn-sm btn-outline-success">
                                    <i class='bx bxs-check-circle' ></i>
                                </a>
                                <a href="#" onclick="event.preventDefault(); document.getElementById('decline').submit();" class="btn btn-sm btn-outline-danger">
                                    <i class='bx bx-minus-circle'></i>
                                </a>
                                <form id="decline" method="POST" action="{{route('backend.bookings.change-status',['booking'=>$booking,'status'=>3])}}" class="d-none">
                                    @csrf
                                    @method('PATCH')
                                </form>
                                <form id="markAsComplete" method="POST" action="{{route('backend.bookings.change-status',['booking'=>$booking,'status'=>2])}}" class="d-none">
                                    @csrf
                                    @method('PATCH')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                "lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
                "order": [[0, "desc"]],
            });
        });
    </script>
@endsection