@extends('templates.structure')


@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/datepicker3.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header no-border">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title">Online Store Visitors</h3>
                    <a href="javascript:void(0);">View Report</a>
                </div>
                </div>
                <div class="card-body">
                <div class="d-flex">
                    <p class="d-flex flex-column">
                    <span class="text-bold text-lg">820</span>
                    <span>Visitors Over Time</span>
                    </p>
                    <p class="ml-auto d-flex flex-column text-right">
                    <span class="text-success">
                        <i class="fa fa-arrow-up"></i> 12.5%
                    </span>
                    <span class="text-muted">Since last week</span>
                    </p>
                </div>
                <!-- /.d-flex -->

                <div class="position-relative mb-4">
                    <canvas id="visitors-chart" height="200"></canvas>
                </div>

                <div class="d-flex flex-row justify-content-end">
                    <span class="mr-2">
                    <i class="fa fa-square text-primary"></i> This Week
                    </span>

                    <span>
                    <i class="fa fa-square text-gray"></i> Last Week
                    </span>
                </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header no-border">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title">Sales</h3>
                    <a href="javascript:void(0);">View Report</a>
                </div>
                </div>
                <div class="card-body">
                <div class="d-flex">
                    <p class="d-flex flex-column">
                    <span class="text-bold text-lg">$18,230.00</span>
                    <span>Sales Over Time</span>
                    </p>
                    <p class="ml-auto d-flex flex-column text-right">
                    <span class="text-success">
                        <i class="fa fa-arrow-up"></i> 33.1%
                    </span>
                    <span class="text-muted">Since last month</span>
                    </p>
                </div>
                <!-- /.d-flex -->

                <div class="position-relative mb-4">
                    <canvas id="sales-chart" height="200"></canvas>
                </div>

                <div class="d-flex flex-row justify-content-end">
                    <span class="mr-2">
                    <i class="fa fa-square text-primary"></i> This year
                    </span>

                    <span>
                    <i class="fa fa-square text-gray"></i> Last year
                    </span>
                </div>
                </div>
            </div>
        </div>
            <!-- /.card -->


        <div class=col-lg-12>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">       
                        
                        <h1>Today's Meeting Room at Your Centre</h1>             
                        <p>{{$data['booking_date']}}</p>
                            <table id="example1" class="table table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Book Time</th>
                                        <th>Facility Name</th>
                                        <th>Total Hours</th>
                                        <th>Client</th>
                                        <th>Booked by</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>                
                    </div>
                </div>
            </div>

        </div>
        <!-- /.col-md-6 -->
    </div>
    <!-- /.row -->

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script>
    var table = $('#example1').DataTable({
        "scrollX": true,
        "processing": true,
        "pageLength":5,
        "ajax": "{{route('chart-today-meeting.datatable')}}", 
        "columns": [
                { "name": "op.booked_slots", "data": "booked_slots" },
                { "name": "unity_facilities.name", "data": "facility_name" },
                { "name": "op.total_slots", "data": "total_slots", "searchable": true },
                { "name": "op.client_name", "data": "client_name", "searchable": true },
                { "name": "op.created_by", "data": "created_by", "searchable": true },
                { "name": "op.notes", "data": "notes", "searchable": true },                
            ],
        "order" :[[ 0, 'asc' ]]
    })
</script>
@endsection