title = "Dashboard"
url = "/officer/dashboard"
layout = "BaliTiket2"

[session]
security = "user"
allowedUserGroups[] = "officer"
redirect = "bali-tiket/login"
==
<?php
	use Yuren\BaliTiket\Models\Bookings;
	use Yuren\BaliTiket\Models\Vendor;
    use Yuren\BaliTiket\Models\Guestlist;

	use Winter\Storm\Auth\AuthManager;
	use Auth;
    use Carbon\Carbon;

	function onStart()
    {
        $dateNow = date('Y-m-d');
        $this['dateNow'] = date('d, F Y');
        $tomorrow = date('Y-m-d', strtotime('+1 day'));
        $lastWeek = date('Y-m-d', strtotime('-7 day'));

        // Query data dari database
        $guestCounts = Bookings::selectRaw('DATE(arrival_date) as date, SUM(person) as total')
            ->where('status_payment', 'paid')
            ->whereBetween('arrival_date', [$lastWeek, $dateNow])
            ->groupBy('date')
            ->orderBy('date', 'asc')
            ->get();

        $checkins = Guestlist::selectRaw('DATE(datetime) as date, COUNT(*) as total')
            ->whereBetween('datetime', [$lastWeek, $tomorrow])
            ->groupBy('date')
            ->orderBy('date', 'asc')
            ->get();

        // Format data untuk chart.js
        $this['chartData'] = json_encode([
            'labels' => $guestCounts->pluck('date'), // Tanggal dari bookings
            'datasets' => [
                [
                    'label' => 'Number of Guests',
                    'data' => $guestCounts->pluck('total'), // Jumlah tamu
                    'backgroundColor' => 'rgba(255, 99, 132, 0.5)',
                    'borderColor' => 'rgba(255, 99, 132, 1)',
                    'fill' => false,
                    'tension' => 0.4,
                ],
                [
                    'label' => 'Guest Check-in',
                    'data' => $checkins->pluck('total'), // Jumlah check-in
                    'backgroundColor' => 'rgba(54, 162, 235, 0.5)',
                    'borderColor' => 'rgba(54, 162, 235, 1)',
                    'fill' => false,
                    'tension' => 0.4,
                ],
            ],
        ]);

        $this['guestCount'] = Bookings::where('status_payment', 'paid')->whereRaw('DATE(arrival_date) = ?', [$dateNow])->sum('person');
        $this['guestCheckinCount'] = Guestlist::orderBy('no_invoice', 'asc')->whereRaw('DATE(datetime) = ?', [$dateNow])->count();
    }
?>
==

<div class="container py-md-4 py-3">
    <div class="row g-0">
        <div class="col-md-12 row g-0">
            <div class="col-md-12 row g-0 mb-4">
                <div class="col-md-3 col-6 pe-2 pe-md-3">
                    <div class="card rounded-0 w-100 shadow">
                        <div class="card-body">
                            <p class="fw-bold mb-1"><small>Number of Guests</small></p>
                            <p class="mb-1 fs-2 fw-semibold text-primary">{{guestCount}} Guests</p>
                            <p class="fw-bold mb-0"><small>{{ dateNow }}</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6 pe-md-3 ps-md-0 ps-2">
                    <div class="card rounded-0 w-100 shadow">
                        <div class="card-body">
                            <p class="fw-bold mb-1"><small>Number of Check-in</small></p>
                            <p class="mb-1 fs-2 fw-semibold text-success">{{guestCheckinCount}} Guests</p>
                            <p class="fw-bold mb-0"><small>{{ dateNow }}</small></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="col-md-6 col-12 mb-4 pe-md-3 pe-0">
                <div class="card rounded-0 shadow">
                    <div class="card-body">
                        <form method="get" action="{{url('officer/guest-list')}}" class="row g-0">
                            <div class="col-md-3 col-6 p-2 order-md-1 order-1">
                                <label for="">Filter Date</label>
                                <select class="form-select rounded-0 mt-1" name="date_filter" id="">
                                    <option value="today" selected>Today</option>
                                    <option value="yesterday">Yesterday</option>
                                    <option value="date-range">Date Range</option>
                                </select>
                            </div>
                            <div class="container-date-from col-md-3 col-6 p-2 order-md-2 order-3">
                                <label for="">From</label>
                                <input class="form-control rounded-0 mt-1 flatpickr flatpickr-input date-from w-100"
                                    type="text" placeholder="From" name="from">
                            </div>
                            <div class="container-date-to col-md-3 col-6 p-2 order-md-3 order-4">
                                <label for="">To</label>
                                <input class="form-control rounded-0 mt-1 flatpickr flatpickr-input date-to w-100"
                                    type="text" placeholder="To" name="to">
                            </div>
                            <div class="col-md-3 col-6 p-2 order-md-4 order-2">
                                <label for="">View By</label>
                                <select class="form-select rounded-0 mt-1" id="" name="view_by">
                                    <option value="guest-list" selected>Guest List</option>
                                    <option value="booking-list">Booking List</option>
                                    <option value="list-ticket">List Ticket</option>
                                </select>
                            </div>
                            <div class="col-12 p-2 order-md-5 order-5">
                                <button type="submit" class="btn btn-primary rounded-0 px-4">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="col-md-12 mt-3">
            <div class="card rounded-0 w-100 shadow">
                <div class="card-body">
                    <div class="chartjs-size-monitor">
                        <div class="chartjs-size-monitor-expand">
                            <div class=""></div>
                        </div>
                        <div class="chartjs-size-monitor-shrink">
                            <div class=""></div>
                        </div>
                    </div>
                    <canvas id="canvas" style="display: block; width: 100%; height: 400px;"
                        class="chartjs-render-monitor"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

{% put styles %}
<style>
    @keyframes chartjs-render-animation {
        from {
            opacity: .99
        }

        to {
            opacity: 1
        }
    }

    .chartjs-render-monitor {
        animation: chartjs-render-animation 1ms
    }

    .chartjs-size-monitor,
    .chartjs-size-monitor-expand,
    .chartjs-size-monitor-shrink {
        position: absolute;
        direction: ltr;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
        z-index: -1
    }

    .chartjs-size-monitor-expand>div {
        position: absolute;
        width: 1000000px;
        height: 1000000px;
        left: 0;
        top: 0
    }

    .chartjs-size-monitor-shrink>div {
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0
    }
</style>
{% endput %}

{% put scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
    // Ambil data dari backend
    var chartData = {{ chartData| raw }};

    var config = {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            scales: {
                x: {
                    display: true,
                    // title: {
                    //     display: true,
                    //     text: 'Date'
                    // }
                },
                y: {
                    display: true,
                    // title: {
                    //     display: true,
                    //     text: 'Number of Guests'
                    // },
                    ticks: {
                        stepSize: 10
                    }
                }
            }
        }
    };

    window.onload = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };
</script>
{% endput %}