@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">People Booking Revenue</h5>
                        <form id="peopleRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <select class="form-select form-select-sm" id="peopleRevenueFilterType" style="width:auto;">
                                <option value="monthly" selected>Monthly</option>
                                <option value="daily">Daily</option>
                                <option value="yearly">Yearly</option>
                            </select>
                            <input type="date" id="peopleRevenueRangeStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="peopleRevenueRangeEnd" class="form-control-chart form-select-sm" />
                            <select class="form-select form-select-sm" id="peopleRevenueLocation" 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="peopleUnit" style="width:auto;">
                                <option value="">All People</option>
                                @foreach($resources as $resource)
                                    <option value="{{ $resource->id }}">{{ $resource->fname }} {{ $resource->lname }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn-primary form-select-sm" id="applyPeopleRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="peopleBookingRevenueChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- 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="peopleLocationManagersBonusChart" 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">People Managers Bonus</h5>
                    <canvas id="peopleManagersBonusChart" 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 peopleBookingRevenueChart;
let peopleBookingRevenueData = {
    labels: [],
    datasets: [{
        label: 'Revenue',
        data: [],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 2,
        fill:true
    }],
    xTitle: ''
};
let peopleManagersBonusChart;
let peopleManagersBonusData = {
    labels: [],
    datasets: [{
        label: 'Bonus ($)',
        data: [],
        backgroundColor: [
            'rgba(255, 99, 132, 0.5)',
            'rgba(54, 162, 235, 0.5)',
            'rgba(255, 206, 86, 0.5)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 2
    }]
};
let peopleLocationManagersBonusChart;
let peopleLocationManagersBonusData = {
    labels: [],
    datasets: [{
        label: 'Bonus ($)',
        data: [],
        backgroundColor: [
            'rgba(75, 192, 192, 0.5)',
            'rgba(153, 102, 255, 0.5)',
            'rgba(255, 159, 64, 0.5)'
        ],
        borderColor: [
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 2
    }]
};
function renderPeopleBookingRevenueChart() {
    if (peopleBookingRevenueChart) peopleBookingRevenueChart.destroy();
    const ctx = document.getElementById('peopleBookingRevenueChart').getContext('2d');
    peopleBookingRevenueChart = new Chart(ctx, {
        type: 'line',
        data: peopleBookingRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: peopleBookingRevenueData.xTitle || '' } },
                y: { display: true, title: { display: true, text: 'Revenue' } }
            }
        }
    });
}
function renderPeopleManagersBonusChart() {
    if (peopleManagersBonusChart) peopleManagersBonusChart.destroy();
    const ctx = document.getElementById('peopleManagersBonusChart').getContext('2d');
    peopleManagersBonusChart = new Chart(ctx, {
        type: 'bar',
        data: peopleManagersBonusData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Manager' } },
                y: { display: true, title: { display: true, text: 'Bonus ($)' } }
            }
        }
    });
}
function renderPeopleLocationManagersBonusChart() {
    if (peopleLocationManagersBonusChart) peopleLocationManagersBonusChart.destroy();
    const ctx = document.getElementById('peopleLocationManagersBonusChart').getContext('2d');
    peopleLocationManagersBonusChart = new Chart(ctx, {
        type: 'bar',
        data: peopleLocationManagersBonusData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Manager' } },
                y: { display: true, title: { display: true, text: 'Bonus ($)' } }
            }
        }
    });
}
// 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('peopleRevenueRangeStart').value = defaultRange.start;
document.getElementById('peopleRevenueRangeEnd').value = defaultRange.end;

function fetchPeopleBookingRevenue() {
    const filterType = document.getElementById('peopleRevenueFilterType').value;
    const startDate = document.getElementById('peopleRevenueRangeStart').value;
    const endDate = document.getElementById('peopleRevenueRangeEnd').value;
    const locationId = document.getElementById('peopleRevenueLocation').value;
    const peopleId = document.getElementById('peopleUnit').value;
    $.ajax({
        url: APP_URL+'/backend/get-people-booking-revenue',
        type: 'POST',
        data: {
            _token: _token,
            filter: filterType,
            start_date: startDate,
            end_date: endDate,
            location_id: locationId,
            people_id: peopleId
        },
        success: function(response) {
            let results = response.results;
            let bookingSharePeople = response.bookingSharePeople;
            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);
            }
            peopleBookingRevenueData.labels = labels;
            peopleBookingRevenueData.datasets[0].data = data;
            peopleBookingRevenueData.xTitle = xTitle;
            renderPeopleBookingRevenueChart();
            // Update People Managers Bonus Chart
            if (bookingSharePeople.length > 0) {
                peopleManagersBonusData.labels = bookingSharePeople.map(b => b.manager);
                peopleManagersBonusData.datasets[0].data = bookingSharePeople.map(b => b.total_points);
            } else {
                peopleManagersBonusData.labels = [];
                peopleManagersBonusData.datasets[0].data = [];
            }
            renderPeopleManagersBonusChart();
            // Update Location Managers Bonus Chart
            if (bookingShareLocation.length > 0) {
                peopleLocationManagersBonusData.labels = bookingShareLocation.map(b => b.manager);
                peopleLocationManagersBonusData.datasets[0].data = bookingShareLocation.map(b => b.total_points);
            } else {
                peopleLocationManagersBonusData.labels = [];
                peopleLocationManagersBonusData.datasets[0].data = [];
            }
            renderPeopleLocationManagersBonusChart();
        },
        error: function() {
            peopleBookingRevenueData.labels = [];
            peopleBookingRevenueData.datasets[0].data = [];
            peopleBookingRevenueData.xTitle = '';
            renderPeopleBookingRevenueChart();
            peopleManagersBonusData.labels = [];
            peopleManagersBonusData.datasets[0].data = [];
            renderPeopleManagersBonusChart();
            peopleLocationManagersBonusData.labels = [];
            peopleLocationManagersBonusData.datasets[0].data = [];
            renderPeopleLocationManagersBonusChart();
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    fetchPeopleBookingRevenue();
    renderPeopleManagersBonusChart();
    renderPeopleLocationManagersBonusChart();
    document.getElementById('applyPeopleRevenueFilter').addEventListener('click', function() {
        fetchPeopleBookingRevenue();
    });
});
</script>
@endsection