@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">Rental Booking Revenue</h5>
                        <form id="rentalRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <select class="form-select form-select-sm" id="rentalRevenueFilterType" style="width:auto;">
                                <option value="monthly" selected>Monthly</option>
                                <option value="daily">Daily</option>
                                <option value="yearly">Yearly</option>
                            </select>
                            <input type="date" id="rentalRevenueRangeStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="rentalRevenueRangeEnd" class="form-control-chart form-select-sm" />
                            <select class="form-select form-select-sm" id="rentalRevenueLocation" 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="rentalType" style="width:auto;">
                                <option value="">All Equipment Types</option>
                                @foreach($equipment_types as $equipment_type)
                                    <option value="{{ $equipment_type->id }}">{{ $equipment_type->cat_name }}</option>
                                @endforeach
                            </select>
                            <select class="form-select form-select-sm" id="rentalUnit" style="width:auto;">
                                <option value="">All Equipments</option>
                                @foreach($equipments as $equip)
                                    <option value="{{ $equip->id }}" data-loc-id="{{ $equip->location_id }}">{{ $equip->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn-primary form-select-sm" id="applyRentalRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="rentalBookingRevenueChart" 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="rentalLocationManagersBonusChart" 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">Rental Managers Bonus</h5>
                    <canvas id="rentalManagersBonusChart" 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>
// Chart data and variables
let rentalBookingRevenueChart;
let rentalBookingRevenueData = {
    labels: [],
    datasets: [{
        label: 'Revenue',
        data: [],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 2,
        fill:true,
        tension: 0.3
    }],
    xTitle: ''
};
let rentalManagersBonusChart;
let rentalManagersBonusData = {
    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 rentalLocationManagersBonusChart;
let rentalLocationManagersBonusData = {
    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 renderRentalBookingRevenueChart() {
    if (rentalBookingRevenueChart) rentalBookingRevenueChart.destroy();
    const ctx = document.getElementById('rentalBookingRevenueChart').getContext('2d');
    rentalBookingRevenueChart = new Chart(ctx, {
        type: 'line',
        data: rentalBookingRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: rentalBookingRevenueData.xTitle || '' } },
                y: { display: true, title: { display: true, text: 'Revenue' } }
            }
        }
    });
}
function renderRentalManagersBonusChart() {
    if (rentalManagersBonusChart) rentalManagersBonusChart.destroy();
    const ctx = document.getElementById('rentalManagersBonusChart').getContext('2d');
    rentalManagersBonusChart = new Chart(ctx, {
        type: 'bar',
        data: rentalManagersBonusData,
        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 renderRentalLocationManagersBonusChart() {
    if (rentalLocationManagersBonusChart) rentalLocationManagersBonusChart.destroy();
    const ctx = document.getElementById('rentalLocationManagersBonusChart').getContext('2d');
    rentalLocationManagersBonusChart = new Chart(ctx, {
        type: 'bar',
        data: rentalLocationManagersBonusData,
        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('rentalRevenueRangeStart').value = defaultRange.start;
document.getElementById('rentalRevenueRangeEnd').value = defaultRange.end;

function fetchRentalBookingRevenue() {
    const filterType = document.getElementById('rentalRevenueFilterType').value;
    const startDate = document.getElementById('rentalRevenueRangeStart').value;
    const endDate = document.getElementById('rentalRevenueRangeEnd').value;
    const locationId = document.getElementById('rentalRevenueLocation').value;
    const rentalType = document.getElementById('rentalType').value;
    const rentalId = document.getElementById('rentalUnit').value;
    $.ajax({
        url: APP_URL+'/backend/get-rental-booking-revenue',
        type: 'POST',
        data: {
            _token: _token,
            filter: filterType,
            start_date: startDate,
            end_date: endDate,
            location_id: locationId,
            rental_id: rentalId,
            rental_type: rentalType
        },
        success: function(response) {
            let results = response.results;
            let bookingShareRental = response.bookingShareRental;
            let bookingShareLocation = response.bookingShareLocation;
            let labels = [];
            let data = [];
            let xTitle = '';
            let managerBonusLabels = [];
            let managerBonusData = [];
            let locationBonusLabels = [];
            let locationBonusData = [];
            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);
            }
            rentalBookingRevenueData.labels = labels;
            rentalBookingRevenueData.datasets[0].data = data;
            rentalBookingRevenueData.xTitle = xTitle;
            renderRentalBookingRevenueChart();


            // Update Rental Managers Bonus Chart
            if (bookingShareLocation.length > 0) {
                rentalManagersBonusData.labels = bookingShareLocation.map(b => b.manager);
                rentalManagersBonusData.datasets[0].data = bookingShareLocation.map(b => b.total_points);
            } else {
                rentalManagersBonusData.labels = [];
                rentalManagersBonusData.datasets[0].data = [];
            }
            renderRentalManagersBonusChart();

            // Update Location Managers Bonus Chart
            if (bookingShareRental.length > 0) {
                rentalLocationManagersBonusData.labels = bookingShareRental.map(b => b.manager);
                rentalLocationManagersBonusData.datasets[0].data = bookingShareRental.map(b => b.total_points);
            } else {
                rentalLocationManagersBonusData.labels = [];
                rentalLocationManagersBonusData.datasets[0].data = [];
            }
            renderRentalLocationManagersBonusChart();
        },
        error: function() {
            rentalBookingRevenueData.labels = [];
            rentalBookingRevenueData.datasets[0].data = [];
            rentalBookingRevenueData.xTitle = '';
            renderRentalBookingRevenueChart();
            rentalManagersBonusData.labels = [];
            rentalManagersBonusData.datasets[0].data = [];
            renderRentalManagersBonusChart();
            rentalLocationManagersBonusData.labels = [];
            rentalLocationManagersBonusData.datasets[0].data = [];
            renderRentalLocationManagersBonusChart();
        }
    });
}
document.addEventListener('DOMContentLoaded', function() {
    fetchRentalBookingRevenue();
    renderRentalManagersBonusChart();
    renderRentalLocationManagersBonusChart();
    document.getElementById('applyRentalRevenueFilter').addEventListener('click', function() {
        fetchRentalBookingRevenue();
    });
});
</script>
@endsection