<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once 'includes/admin_auth.php';


/*
|--------------------------------------------------------------------------
| Page Scripts (Charts & Dashboard JS)
|--------------------------------------------------------------------------
*/
$script = '<script>

// ================================ Semi Circle Gauge chart Start ================================ 
var options = {
    series: [75],
    chart: {
        width: 400,
        height: 300,
        type: "radialBar",
        sparkline: { enabled: true },
        toolbar: { show: false }
    },
    plotOptions: {
        radialBar: {
            offsetY: -24,
            offsetX: -14,
            startAngle: -90,
            endAngle: 90,
            track: {
                background: "#E3E6E9",
                strokeWidth: "70%"
            },
            hollow: {
                size: "70%"
            },
            dataLabels: {
                show: false
            }
        }
    },
    fill: {
        type: "gradient",
        colors: ["#9DBAFF"],
        gradient: {
            shade: "dark",
            type: "horizontal",
            shadeIntensity: 0.5,
            gradientToColors: ["#487FFF"],
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0,100]
        }
    },
    stroke: { lineCap: "round" }
};

var chart = new ApexCharts(document.querySelector("#semiCircleGaugeTwo"), options);
chart.render();

// ================================ Bar Chart ================================ 
var options = {
    series: [{
        name: "Booking",
        data: [6200, 5200, 4200, 3200, 1200]
    }],
    chart: {
        type: "bar",
        height: 270,
        toolbar: { show: false }
    },
    plotOptions: {
        bar: {
            borderRadius: 4,
            horizontal: true,
            distributed: true,
            barHeight: "22px"
        }
    },
    dataLabels: { enabled: false },
    colors: ["#8501F8","#FF9F29","#00D40E","#F84B01","#2FBCFC"]
};

var chart = new ApexCharts(document.querySelector("#statisticBarChart"), options);
chart.render();

</script>';

include './partials/layouts/layoutTop.php';

?>

<div class="dashboard-main-body">

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Booking System</h6>

        <ul class="d-flex align-items-center gap-2">
            <li class="fw-medium">
                <a href="dashboard.php" class="d-flex align-items-center gap-1 hover-text-primary">
                    <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                    Dashboard
                </a>
            </li>
            <li>-</li>
            <li class="fw-medium">Booking System</li>
        </ul>
    </div>


    <!-- Dashboard Cards -->
    <div class="row gy-4">

        <div class="col-xxl-4 col-md-6">
            <div class="shadow-7 p-16 radius-12 bg-base">
                <div class="row g-3">

                    <div class="col-sm-6">
                        <div class="py-20 px-24 radius-8 h-100 bg-blue-light">
                            <span class="d-block mt-12 text-neutral-800">New Booking</span>
                            <h6 class="mt-1 mb-0">170</h6>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="py-20 px-24 radius-8 h-100 bg-green-light">
                            <span class="d-block mt-12 text-neutral-800">Schedule Room</span>
                            <h6 class="mt-1 mb-0">285</h6>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="py-20 px-24 radius-8 h-100 bg-red-light">
                            <span class="d-block mt-12 text-neutral-800">Total Customers</span>
                            <h6 class="mt-1 mb-0">175</h6>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="py-20 px-24 radius-8 h-100 bg-warning-light">
                            <span class="d-block mt-12 text-neutral-800">Total Revenue</span>
                            <h6 class="mt-1 mb-0">$750.00</h6>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <!-- Semi Circle Gauge -->
        <div class="col-xxl-4 col-md-6">
            <div class="shadow-7 p-24 radius-12 bg-base h-100">
                <div class="text-center">
                    <div id="semiCircleGaugeTwo"></div>
                    <h3 class="mt-40 mb-0">35</h3>
                    <span class="text-neutral-800 mt-4">Available Room Today</span>
                </div>
            </div>
        </div>


        <!-- Booking Statistic -->
        <div class="col-xxl-4">
            <div class="shadow-7 p-20 radius-12 bg-base h-100">
                <div class="d-flex justify-content-between">
                    <h6 class="fw-bold text-lg">Booking Statistic</h6>

                    <select class="form-select form-select-sm w-auto">
                        <option>Yearly</option>
                        <option>Monthly</option>
                        <option>Weekly</option>
                        <option>Today</option>
                    </select>
                </div>

                <div id="statisticBarChart"></div>
            </div>
        </div>

    </div>

</div>

<?php include './partials/layouts/layoutBottom.php'; ?>