@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">Studio Booking Revenue</h5>
                        <form id="studioRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <select class="form-select form-select-sm" id="revenueFilterType" style="width:auto;">
                                <option value="monthly" selected>Monthly</option>
                                <option value="daily">Daily</option>
                                <option value="yearly">Yearly</option>
                            </select>
                            <input type="date" id="revenueRangeStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="revenueRangeEnd" class="form-control-chart form-select-sm" />
                            <select class="form-select form-select-sm" id="revenueLocation" 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="revenueStudioType" 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="revenueStudio" 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="applyStudioRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="studioBookingRevenueChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- Studio & Location Managers Bonus Charts Row -->
    <!-- <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-0">Studio Managers Bonus</h5>
                    <canvas id="studioManagersBonusChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-0">Location Managers Bonus</h5>
                    <canvas id="locationManagersBonusChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div> -->
    <!-- Additional Bonus Charts Row -->
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-0">Location Managers Bonus</h5>
                    <canvas id="locationManagersBonusChart2" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-0">Studio Managers Bonus</h5>
                    <canvas id="studioManagersBonusChart2" 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 studioBookingRevenueChart;
let studioBookingRevenueData = {
    labels: [],
    datasets: [{
        label: 'Revenue',
        data: [],
        backgroundColor: 'rgba(40, 167, 69, 0.5)',
        borderColor: 'rgba(40, 167, 69, 1)',
        borderWidth: 2,
        fill: true,
        tension: 0.3
    }],
    xTitle: ''
};
function renderStudioBookingRevenueChart() {
    if (studioBookingRevenueChart) studioBookingRevenueChart.destroy();
    const ctx = document.getElementById('studioBookingRevenueChart').getContext('2d');
    studioBookingRevenueChart = new Chart(ctx, {
        type: 'line',
        data: studioBookingRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: studioBookingRevenueData.xTitle || 'Date' } },
                y: { display: true, title: { display: true, text: 'Revenue ($)' } }
            }
        }
    });
}

function getDefaultDateRange() {
    const end = new Date();
    const start = new Date(end.getFullYear(), end.getMonth() - 4, 1);
    return {
        start: start.toISOString().slice(0, 10),
        end: new Date(end.getFullYear(), end.getMonth() + 1, 0).toISOString().slice(0, 10)
    };
}

const defaultRange = getDefaultDateRange();
document.getElementById('revenueRangeStart').value = defaultRange.start;
document.getElementById('revenueRangeEnd').value = defaultRange.end;

function fetchStudioBookingRevenue() {
    const filterType = document.getElementById('revenueFilterType').value;
    const startDate = document.getElementById('revenueRangeStart').value;
    const endDate = document.getElementById('revenueRangeEnd').value;
    const locationId = document.getElementById('revenueLocation').value;
    const revenueStudioType = document.getElementById('revenueStudioType').value;
    const studioId = document.getElementById('revenueStudio').value;
    $.ajax({
        url: APP_URL+'/backend/get-studio-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 bookingShareStudio = response.bookingShareStudio;
            let bookingShareLocation = response.bookingShareLocation;
            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);
            }
            studioBookingRevenueData.labels = labels;
            studioBookingRevenueData.datasets[0].data = data;
            studioBookingRevenueData.xTitle = xTitle;
            renderStudioBookingRevenueChart();

            if(bookingShareStudio.length > 0){
                studioManagersBonusData2.labels = bookingShareStudio.map(r => r.manager);
                studioManagersBonusData2.datasets[0].data = bookingShareStudio.map(r => r.total_points);
            }else{
                studioManagersBonusData2.labels = [];
                studioManagersBonusData2.datasets[0].data = [];
            }
            
            if(bookingShareLocation.length > 0){
                locationManagersBonusData2.labels = bookingShareLocation.map(r => r.manager);
                locationManagersBonusData2.datasets[0].data = bookingShareLocation.map(r => r.total_points);
            }else{
                locationManagersBonusData2.labels = [];
                locationManagersBonusData2.datasets[0].data = [];
            }
            // Render new bonus charts
            renderStudioManagersBonusChart2();
            renderLocationManagersBonusChart2();
        },
        error: function() {
            studioBookingRevenueData.labels = [];
            studioBookingRevenueData.datasets[0].data = [];
            studioBookingRevenueData.xTitle = '';
            renderStudioBookingRevenueChart();
            studioManagersBonusData2.labels = [];
            studioManagersBonusData2.datasets[0].data = [];
            renderStudioManagersBonusChart2();
            locationManagersBonusData2.labels = [];
            locationManagersBonusData2.datasets[0].data = [];
            renderLocationManagersBonusChart2();
        }
    });
}

// --- Additional Bonus Chart Data and Chart Variables ---
let studioManagersBonusChart2;
let studioManagersBonusData2 = {
    labels: [],
    datasets: [{
        label: 'Bonus ($)',
        data: [],
        backgroundColor: [
            'rgba(255, 159, 64, 0.5)',
            'rgba(255, 99, 132, 0.5)',
            'rgba(54, 162, 235, 0.5)'
        ],
        borderColor: [
            'rgba(255, 159, 64, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)'
        ],
        borderWidth: 2
    }]
};

let locationManagersBonusChart2;
let locationManagersBonusData2 = {
    labels: [],
    datasets: [{
        label: 'Bonus ($)',
        data: [],
        backgroundColor: [
            'rgba(153, 102, 255, 0.5)',
            'rgba(75, 192, 192, 0.5)',
            'rgba(255, 206, 86, 0.5)'
        ],
        borderColor: [
            'rgba(153, 102, 255, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 2
    }]
};

function renderStudioManagersBonusChart2() {
    if (studioManagersBonusChart2) studioManagersBonusChart2.destroy();
    const ctx = document.getElementById('studioManagersBonusChart2').getContext('2d');
    studioManagersBonusChart2 = new Chart(ctx, {
        type: 'bar',
        data: studioManagersBonusData2,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Managers' } },
                y: { display: true, title: { display: true, text: 'Bonus ($)' } }
            }
        }
    });
}

function renderLocationManagersBonusChart2() {
    if (locationManagersBonusChart2) locationManagersBonusChart2.destroy();
    const ctx = document.getElementById('locationManagersBonusChart2').getContext('2d');
    locationManagersBonusChart2 = new Chart(ctx, {
        type: 'bar',
        data: locationManagersBonusData2,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Managers' } },
                y: { display: true, title: { display: true, text: 'Bonus ($)' } }
            }
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    fetchStudioBookingRevenue();
    document.getElementById('applyStudioRevenueFilter').addEventListener('click', function() {
        fetchStudioBookingRevenue();
    });
    // Render new bonus charts on DOMContentLoaded
    renderStudioManagersBonusChart2();
    renderLocationManagersBonusChart2();
});
</script>
@endsection