@extends('layouts.sidebar')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
                        <h5 class="card-title mb-0">Guest Booking Revenue</h5>
                        <form id="guestRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <select class="form-select form-select-sm" id="guestRevenueFilterType" style="width:auto;">
                                <option value="monthly" selected>Monthly</option>
                                <option value="daily">Daily</option>
                                <option value="yearly">Yearly</option>
                            </select>
                            <input type="date" id="guestRevenueRangeStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="guestRevenueRangeEnd" class="form-control-chart form-select-sm" />
                            <select class="form-select form-select-sm" id="guestRevenueLocation" style="width:auto;">
                                <option value="">All Locations</option>
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}">{{ $location->location }}</option>
                                @endforeach
                            </select>
                            <select class="form-select form-select-sm" id="guestRevenueStudioType" style="width:auto;">
                                <option value="">All Studio Types</option>
                                @foreach($studio_types as $studio_type)
                                    <option value="{{ $studio_type->id }}">{{ $studio_type->name }}</option>
                                @endforeach
                            </select>
                            <select class="form-select form-select-sm" id="guestRevenueStudio" style="width:auto;">
                                <option value="">All Studios</option>
                                @foreach($studios as $studio)
                                    <option value="{{ $studio->id }}" data-loc-id="{{ $studio->location_id }}">{{ $studio->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn-primary form-select-sm" id="applyGuestRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="guestBookingRevenueChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let guestBookingRevenueChart;
let guestBookingRevenueData = {
    labels: [],
    datasets: [{
        label: 'Revenue',
        data: [],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 2
    }],
    xTitle: ''
};

function renderGuestBookingRevenueChart() {
    if (guestBookingRevenueChart) guestBookingRevenueChart.destroy();
    const ctx = document.getElementById('guestBookingRevenueChart').getContext('2d');
    guestBookingRevenueChart = new Chart(ctx, {
        type: 'bar',
        data: guestBookingRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: guestBookingRevenueData.xTitle || '' } },
                y: { display: true, title: { display: true, text: 'Revenue' } }
            }
        }
    });
}

// Utility for default date range
function getDefaultDateRange() {
    const now = new Date();
    const start = new Date(now.getFullYear(), now.getMonth(), 1);
    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    return {
        start: start.toISOString().slice(0, 10),
        end: end.toISOString().slice(0, 10)
    };
}
const defaultRange = getDefaultDateRange();
document.getElementById('guestRevenueRangeStart').value = defaultRange.start;
document.getElementById('guestRevenueRangeEnd').value = defaultRange.end;
function fetchGuestBookingRevenue() {
    const filterType = document.getElementById('guestRevenueFilterType').value;
    const startDate = document.getElementById('guestRevenueRangeStart').value;
    const endDate = document.getElementById('guestRevenueRangeEnd').value;
    const locationId = document.getElementById('guestRevenueLocation').value;
    const revenueStudioType = document.getElementById('guestRevenueStudioType').value;
    const studioId = document.getElementById('guestRevenueStudio').value;
    $.ajax({
        url: APP_URL+'/backend/get-guest-booking-revenue',
        type: 'POST',
        data: {
            _token: _token,
            filter: filterType,
            start_date: startDate,
            end_date: endDate,
            location_id: locationId,
            studio_id: studioId,
            studio_type: revenueStudioType
        },
        success: function(response) {
            let results = response.results;
            let labels = [];
            let data = [];
            let xTitle = '';
            if (results.length > 0) {
                if (filterType === 'yearly') {
                    xTitle = 'Year';
                    labels = results.map(r => new Date(r.created_at).getFullYear().toString());
                } else if (filterType === 'daily') {
                    xTitle = 'Date';
                    labels = results.map(r => r.created_at.slice(0, 10));
                } else {
                    xTitle = 'Month';
                    labels = results.map(r => {
                        const d = new Date(r.created_at);
                        return d.toLocaleString('default', { month: 'short', year: 'numeric' });
                    });
                }
                data = results.map(r => r.revenue);
            }
            guestBookingRevenueData.labels = labels;
            guestBookingRevenueData.datasets[0].data = data;
            guestBookingRevenueData.xTitle = xTitle;
            renderGuestBookingRevenueChart();
        },
        error: function() {
            guestBookingRevenueData.labels = [];
            guestBookingRevenueData.datasets[0].data = [];
            guestBookingRevenueData.xTitle = '';
            renderGuestBookingRevenueChart();
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    fetchGuestBookingRevenue();
    document.getElementById('applyGuestRevenueFilter').addEventListener('click', function() {
        fetchGuestBookingRevenue();
    });
});
</script>
@endsection