<?php include("cn.php");?>
<?php $title = "Bookings";?>
<!DOCTYPE html>
<html lang="en">
<style>
    #Booking_info{
        padding-top: 0;
    }
</style>
<?php include("head-tag.php");
$sql = mysqli_query($connect, "select count(*) as total from rentedcars");
$data = mysqli_fetch_assoc($sql);

?>
<body>

<div class="inner-wrapper">
<?php include("pre-loader.php");?>

<?php include("header.php");?>
<div class="page-wrapper">
    <div class="container-fluid">
        
<div class="col-xl-12 col-lg-12 col-md-12">

<div class="row">
<div class="col-xl-3 col-lg-3 col-sm-6 col-12">
<div class="card dash-widget ctm-border-radius shadow-sm">
<div class="card-body" style="padding: 0.65rem;">
<div class="card-icon bg-info" style="width: 40px;
    height: 40px;">
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
<?php 
$sql = mysqli_query($connect, "select count(id) as total from rentedcars");
$data = mysqli_fetch_assoc($sql);
?>
<div class="card-right">
<h4 class="card-title"><a style="color: #4ab9cf; font-weight: bold;">Total Bookings</a></h4>
<p class="card-text"><?php echo $data['total']?></p>
</div>
</div>
</div>
</div>
<?php 
$sql = mysqli_query($connect, "SELECT count(id) as total from rentedcars WHERE Status = 'Pending'");
$data = mysqli_fetch_assoc($sql);
?>
<div class="col-xl-3 col-lg-3 col-sm-6 col-12">
    <div class="card dash-widget ctm-border-radius shadow-sm">
        <div class="card-body" style="padding: 0.65rem;">
            <div class="card-icon bg-danger" style="width: 40px;
    height: 40px;">
                <i class="fa fa-calendar-times-o" aria-hidden="true"></i>
            </div>
            <div class="card-right">
                <h4 class="card-title"><a style="color: #4ab9cf; font-weight: bold;">Pending</a></h4>
                <p class="card-text"><?php echo $data['total']?></p>
            </div>
        </div>
    </div>
</div>
<?php 
$sql = mysqli_query($connect, "SELECT count(id) as total from rentedcars WHERE Status = 'assigned'");
$data = mysqli_fetch_assoc($sql);
?>
<div class="col-xl-3 col-lg-3 col-sm-6 col-12">
    <div class="card dash-widget ctm-border-radius shadow-sm">
        <div class="card-body" style="padding: 0.65rem;">
            <div class="card-icon bg-warning" style="width: 40px;
    height: 40px;">
                <i class="fa fa-calendar-plus-o"></i>
            </div>
            <div class="card-right">
                <h4 class="card-title"><a style="color: #4ab9cf; font-weight: bold;">Assigned</a></h4>
                <p class="card-text"><?php echo $data['total']?></p>
            </div>
        </div>
    </div>
</div>
<?php 
$sql = mysqli_query($connect, "SELECT count(id) as total from rentedcars WHERE Status = 'Completed'");
$data = mysqli_fetch_assoc($sql);
?>
<div class="col-xl-3 col-lg-3 col-sm-6 col-12">
    <div class="card dash-widget ctm-border-radius shadow-sm">
        <div class="card-body" style="padding: 0.65rem;">
            <div class="card-icon bg-success" style="width: 40px;
    height: 40px;">
                <i class="fa fa-calendar-check-o" aria-hidden="true"></i>
            </div>
            <div class="card-right">
                <h4 class="card-title"><a style="color: #4ab9cf; font-weight: bold;">Complete</a></h4>
                <p class="card-text"><?php echo $data['total']?></p>
            </div>
        </div>
    </div>
</div>


</div>
</div>
<div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
                
                <div class="ctm-border-radius shadow-sm card">
                    <div class="card-body">
                         <div class="table-responsive table-togglable table-hover" style="white-space: normal;">
                            <table id="Booking" class="table table-striped table-bordered ">
    
        <input type="button" class="dt-button" onclick="location.href='new-booking.php';" value="&#10133;Booking"/>
    
                        
						<thead>
						<tr>
						  <th class="text-center">Status</th>
						  <th class="text-center">Booking #</th>
						  <th class="text-center">Driver</th>
						  <th class="text-center">Last Cancelled By</th>
						  <th class="text-center">Booking Made on</th>
						  <th class="text-center">Booking Date</th>
						  <th class="text-center">Car</th>
						  <th class="text-center">Pickup</th>
						  <th class="text-center">Destination</th>
						  <th class="text-center">Customer</th>
						  <th class="text-center">Amount</th>
						  <th class="text-center">Payment</th>
						  <th class="text-center">Voucher Number</th>
						  <th class="text-center">Payment Reference</th>
						  <th class="text-center">Source</th>
						  <th class="text-center">Delete</th>
						</tr>
						</thead>
						<tbody></tbody>
						</table>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>


</div>
<div class="sidebar-overlay" id="sidebar_overlay"></div>

<?php include("scripts.php");?>
</body>

<script>
  $(document).ready(function () {
    $('#Booking').DataTable({
        dom: '<"top"Blfpir>t<"bottom"pi>',
        filter: true,
        ordering: true,
        paging: true,
        fixedHeader: true,
        order: [[1, "desc"]],
        lengthMenu: [100, 500, 1000, 2000],
        processing: true,
        serverSide: true,
        deferRender: true,
        pagingType: 'full_numbers',
        ajax: {
            url: 'ajax/fetch-bookings.php',
            type: 'GET'
        },
        columns: [
            { data: 'actions' },
            { data: 'BookingNumber' },
            { data: 'driver_status' },
            { data: 'last_cancelled_by' },
            { data: 'booking_date' },
            { data: 'rent_start_date' },
            { data: 'car_title' },
            { data: 'pickup' },
            { data: 'Destination' },
            { data: 'customer_name' },
            { data: 'total_amount' },
            { data: 'payment_info' },
            { data: 'voucher_number' },
            { data: 'PaymentReference' },
            { data: 'source_info' },
            { data: 'delete_action' }
        ],    
        buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdf',
                orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'print',
                orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'colvis',
                collectionLayout: 'fixed three-column',
                columns: ':not(.noVis)',
                postfixButtons: ['colvisRestore']
            }
        ],
        language: {
            buttons: {
                colvis: 'Select Fields'
            }
        },
        columnDefs: [
            {
                targets: [],
                className: 'noVis'
            },
            {
                targets: [],
                visible: false
            }
        ]
    });
});
</script>

</html>