@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">Location Revenue</h5>
                        <form id="locationRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <select class="form-select form-select-sm" id="locationRevenueFilterType" style="width:auto;">
                                <option value="monthly" selected>Monthly</option>
                                <option value="daily">Daily</option>
                                <option value="yearly">Yearly</option>
                            </select>
                            <input type="date" id="locationRevenueRangeStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="locationRevenueRangeEnd" class="form-control-chart form-select-sm">
                            <select class="form-select form-select-sm" id="locationRevenueBookingType" style="width:auto;">
                                <option value="">All Booking Types</option>
                                <option value="studio">Studio</option>
                                <option value="rental">Rental</option>
                                <option value="resource">Resource</option>
                            </select>
                            <select class="form-select form-select-sm" id="locationRevenueLocation" 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="locationRevenueStudioType" 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="locationRevenueStudio" 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="applyLocationRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="locationRevenueChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
    <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>
    <!-- Revenue by Team Member Chart Row -->
    <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">Revenue by Team Member</h5>
                        <form id="teamMemberRevenueFilter" class="d-flex flex-wrap gap-2 align-items-center">
                            <input type="date" id="teamMemberRevenueStart" class="form-control-chart form-select-sm">
                            <span>to</span>
                            <input type="date" id="teamMemberRevenueEnd" class="form-control-chart form-select-sm" />
                            <select class="form-select form-select-sm" id="teamMemberRevenueLocation" 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="teamMemberSelect" style="width:auto;">
                                <option value="">All Team Members</option>
                                @foreach($team_members as $member)
                                    <option value="{{ $member->id }}">{{ $member->fname }} {{ $member->lname }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn-primary form-select-sm" id="applyTeamMemberRevenueFilter">Apply</button>
                        </form>
                    </div>
                    <canvas id="teamMemberRevenueChart" style="height:320px;max-height:320px;width:100%;"></canvas>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Utility for default date range for team member chart
function getDefaultTeamMemberDateRange() {
    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 defaultTeamRange = getDefaultTeamMemberDateRange();
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('teamMemberRevenueStart').value = defaultTeamRange.start;
    document.getElementById('teamMemberRevenueEnd').value = defaultTeamRange.end;
});

function fetchTeamMemberRevenue() {
    const startDate = document.getElementById('teamMemberRevenueStart').value;
    const endDate = document.getElementById('teamMemberRevenueEnd').value;
    const locationId = document.getElementById('teamMemberRevenueLocation').value;
    const teamMemberId = document.getElementById('teamMemberSelect').value;
    $.ajax({
        url: APP_URL+'/backend/get-team-member-revenue',
        type: 'POST',
        data: {
            _token: _token,
            start_date: startDate,
            end_date: endDate,
            location_id: locationId,
            team_member_id: teamMemberId
        },
        success: function(response) {
            if (response.teamMemberRevenue) {
                teamMemberRevenueData.labels = response.teamMemberRevenue.map(t => t.name);
                teamMemberRevenueData.datasets[0].data = response.teamMemberRevenue.map(t => t.revenue);
            } else {
                teamMemberRevenueData.labels = [];
                teamMemberRevenueData.datasets[0].data = [];
            }
            renderTeamMemberRevenueChart();
        },
        error: function() {
            teamMemberRevenueData.labels = [];
            teamMemberRevenueData.datasets[0].data = [];
            renderTeamMemberRevenueChart();
        }
    });
}
let teamMemberRevenueChart;
let teamMemberRevenueData = {
    labels: [],
    datasets: [{
        label: 'Revenue',
        data: [],
        backgroundColor: [
            'rgba(54, 162, 235, 0.5)',
            'rgba(255, 99, 132, 0.5)',
            'rgba(255, 206, 86, 0.5)',
            'rgba(75, 192, 192, 0.5)',
            'rgba(153, 102, 255, 0.5)'
        ],
        borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
        ],
        borderWidth: 2
    }]
};
function renderTeamMemberRevenueChart() {
    if (teamMemberRevenueChart) teamMemberRevenueChart.destroy();
    const ctx = document.getElementById('teamMemberRevenueChart').getContext('2d');
    teamMemberRevenueChart = new Chart(ctx, {
        type: 'bar',
        data: teamMemberRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Team Member' } },
                y: { display: true, title: { display: true, text: 'Revenue' } }
            }
        }
    });
}
    // ...existing code...
    // After your AJAX success, update teamMemberRevenueData and render the chart
    // Example (replace with actual backend data):
    // if (response.teamMemberRevenue) {
    //     teamMemberRevenueData.labels = response.teamMemberRevenue.map(t => t.name);
    //     teamMemberRevenueData.datasets[0].data = response.teamMemberRevenue.map(t => t.revenue);
    // } else {
    //     teamMemberRevenueData.labels = [];
    //     teamMemberRevenueData.datasets[0].data = [];
    // }
    // renderTeamMemberRevenueChart();
let locationRevenueChart;
let locationRevenueData = {
    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: ''
};
function renderLocationRevenueChart() {
    if (locationRevenueChart) locationRevenueChart.destroy();
    const ctx = document.getElementById('locationRevenueChart').getContext('2d');
    locationRevenueChart = new Chart(ctx, {
        type: 'line',
        data: locationRevenueData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                title: { display: false }
            },
            scales: {
                x: { display: true, title: { display: true, text: locationRevenueData.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('locationRevenueRangeStart').value = defaultRange.start;
document.getElementById('locationRevenueRangeEnd').value = defaultRange.end;

function fetchLocationRevenue() {
    const filterType = document.getElementById('locationRevenueFilterType').value;
    const startDate = document.getElementById('locationRevenueRangeStart').value;
    const endDate = document.getElementById('locationRevenueRangeEnd').value;
    const locationId = document.getElementById('locationRevenueLocation').value;
    const studioType = document.getElementById('locationRevenueStudioType').value;
    const studioId = document.getElementById('locationRevenueStudio').value;
    const bookingType = document.getElementById('locationRevenueBookingType').value;
    $.ajax({
        url: APP_URL+'/backend/get-location-booking-revenue',
        type: 'POST',
        data: {
            filter: filterType,
            start_date: startDate,
            end_date: endDate,
            location_id: locationId,
            studio_type: studioType,
            studio_id: studioId,
            booking_type: bookingType,
            _token: _token
        },
        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);
            }
            locationRevenueData.labels = labels;
            locationRevenueData.datasets[0].data = data;
            locationRevenueData.xTitle = xTitle;
            renderLocationRevenueChart();

            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() {
            locationRevenueData.labels = [];
            locationRevenueData.datasets[0].data = [];
            locationRevenueData.xTitle = '';
            renderLocationRevenueChart();
            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() {
    renderTeamMemberRevenueChart();
    fetchTeamMemberRevenue();
    document.getElementById('applyTeamMemberRevenueFilter').addEventListener('click', function() {
        fetchTeamMemberRevenue();
    });
    fetchLocationRevenue();
    document.getElementById('applyLocationRevenueFilter').addEventListener('click', function() {
        fetchLocationRevenue();
    });
    // Render new bonus charts on DOMContentLoaded
    renderStudioManagersBonusChart2();
    renderLocationManagersBonusChart2();
});
</script>
@endsection