@extends('layouts.main')

@section('content')

<h4 class="mb-4">Booking Reports</h4>

<div class="card p-4">

<div class="row text-center">

<!-- Total -->
<div class="col-md-4">
<div class="card p-3 bg-primary text-white shadow">
<h3>{{ $total }}</h3>
<p>Total Bookings</p>
</div>
</div>

<!-- Completed -->
<div class="col-md-4">
<div class="card p-3 bg-success text-white shadow">
<h3>{{ $completed }}</h3>
<p>Completed</p>
</div>
</div>

<!-- Cancelled -->
<div class="col-md-4">
<div class="card p-3 bg-danger text-white shadow">
<h3>{{ $cancelled }}</h3>
<p>Cancelled</p>
</div>
</div>

</div>

</div>

@endsection