@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{{asset('assets/css/leaflet.css')}}" />
<style>
.card {
    margin-bottom: 20px;
}
.chart-container {
    position: relative;
    height: 200px;
}
.stat-card {
/*    padding: 20px;*/
/*    text-align: center;*/
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
.stat-card p {
    margin: 0px;
}
.filters {
    margin-bottom: 20px;
}
.bg-light-blue { background-color: #d1ecf1; }
.bg-light-green { background-color: #d4edda; }
.bg-light-red { background-color: #f8d7da; }
.bg-light-yellow { background-color: #fff3cd; }

.card-body li {
    padding: 10px;
    margin:10px;
}
.fixed-card-height {
    height: 400px; /* Adjust this value as needed */
/*    overflow-y: auto; /* Optional: to add a scrollbar if content overflows */*/
}

#clear-filter {
    cursor: pointer;
}
#map1 {
    height: 100%;
}
.footer-row {
    margin-left: 118px !important;
}
.custom-card-height { height: 553px; }
.custom-card-height canvas { height: 100%;}

.pie-chart {
    height: 400px; /* Set your desired height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-chart canvas {
    height: 100% !important; /* Make the canvas fill the card */
    width: 100% !important;  /* Optional: Adjust width to fit card */
}
</style>
@endsection
@section('content')
<section class="content mb-5">
    <div class="container-fluid">
        {{-- @include('partials.title-pad', [
            'title' => __('labels.content_list_heading'),
            'search' => $search,
            'filter' => 'filter',
            'searchPlaceholder' => __('placeholders.search', ['static' => __('static.content')]),
            'list' => $broadcasts,
            'export' => 'export',
        ]) --}}

        <div class="row titlepad">
            <div class="col-md-12">
                <div class="mt-3 mb-3">
                    <div class="dashbed-border-bottom"></div>
                </div>

                <div class="row align-items-end">
                    <div class="col-sm-7">
                        <h4>Dashboard</h4>
                    </div>
                </div>
            </div>
        </div>

    <div class="filters row">
        <div class="col">
            <select class="form-control" name="university_id">
                <option value="">Select University</option>
                @foreach($universities as $university)
                    <option value="{{$university->id}}" {{request('university_id') == $university->id ? 'selected' : ''}}>{{$university->name ?? 'NA'}}</option>
                @endforeach
            </select>
        </div>
        <div class="col">
            <select class="form-control" name="gender">
                <option value="">Select Gender</option>
                @foreach($genders as $gender)
                <option value="{{$gender}}" {{request('gender') == $gender ? 'selected' : ''}}>{{ucfirst($gender)}}</option>
                @endforeach
            </select>
        </div>
        <div class="col">
            <select class="form-control" name="country_id">
                <option value="">Select Nationality</option>
                @foreach($countries as $country)
                    <option value="{{$country->id}}" {{ request('country_id') == $country->id ? 'selected' : '' }}>{{$country->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="col">
            <input type="date" name="date_from" value="{{request('date_from')}}" placeholder="Select Date From" class="form-control">
        </div>
        <div class="col">
            <input type="date" name="date_to" value="{{request('date_to')}}" placeholder="Select Date To" class="form-control">
        </div>
    </div>

    <div class="mb-3 text-right">
        <a class="clear-filter" id="clear-filter">Clear Filters</a>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="card stat-card bg-light-blue">
                <h2>{{$totalUsers}}</h2>
                <p>Total Accounts</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-green">
                <h2>{{$totalActiveUsers}}</h2>
                <p>Active Accounts</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-red">
                <h2>{{$totalInActiveUsers}}</h2>
                <p>Inactive Accounts</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-yellow">
                <h2>{{$totalBlockedUsers}}</h2>
                <p>Blocked User</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="card stat-card bg-light-blue">
                <h2>{{$totalBroadcasts}}</h2>
                <p>Total Broadcasts</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-green">
                <h2>{{$totalEvents}}</h2>
                <p>Total Events</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-red">
                <h2>{{$totalFeatureUsers}}</h2>
                <p>Premium Feature Users</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card bg-light-yellow">
                <h2>{{$totalPackageUsers}}</h2>
                <p>Premium Package Users</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="card stat-card bg-light-green">
                <h2>{{$totalRevenue}}</h2>
                <p>Total Revenue</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card fixed-card-height">
                <div class="card-header">
                    Event Location
                </div>
                <div class="card-body">
                    <ol>
                        @forelse($eventLocations as $eventLocation)
                            <li>{{$eventLocation}}</li>
                        @empty
                            <li>No record found!</li>
                        @endforelse
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card fixed-card-height">
                <div class="card-body">
                    <div class="filters">
                        <select id="bothYearFilter" class="form-control" name="selected_year">
                            <option value="" disabled>Select Year</option>
                            @foreach($years as $year)
                                <option value="{{$year}}">{{$year}}</option>
                            @endforeach
                        </select>
                    </div>
                    <button id="backButton" style="display: none;">Back</button>
                    <canvas id="bothChart" class="chart-container "></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card fixed-card-height custom-card-height">
                <div class="card-body">
                    <div class="filters">
                        <select id="featureRevenueYearFilter" class="form-control" name="selected_feature_year">
                            <option value="" disabled>Select Year</option>
                            @foreach($years as $year)
                                <option value="{{$year}}">{{$year}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="pie-chart">
                        <canvas id="featureRevenueChart" class="chart-container "></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card fixed-card-height custom-card-height">
                <div class="card-body">
                    <div class="filters">
                        <select id="packageRevenueYearFilter" class="form-control" name="selected_package_year">
                            <option value="" disabled>Select Year</option>
                            @foreach($years as $year)
                                <option value="{{$year}}">{{$year}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="pie-chart">
                        <canvas id="packageRevenueChart" class="chart-container "></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Heat Map
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <input type="checkbox" id="cross_paths" name="heatmap_type" value="cross_paths" checked>
                        <label for="cross_paths" class="me-3">Cross Paths</label>
                        <input type="checkbox" id="red_zones" name="heatmap_type" value="red_zones" checked>
                        <label for="red_zones">Red Zones</label>
                    </div>
                    <div id="heatMapChart" class="chart-container fixed-card-height"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@endsection
@section('scripts')
<script src="{{asset('assets/js/chart/chart.js')}}"></script>
<script src="{{asset('assets/js/chart/leaflet.js')}}"></script>
<script src="{{asset('assets/js/chart/leaflet-heat.js')}}"></script>
<script src="{{asset('assets/js/chart/moment.min.js')}}"></script>
<script src="{{asset('assets/js/chart/chartjs-adapter-moment.js')}}"></script>
<script src="{{asset('assets/js/filter.js')}}"></script>
<script>
    $(document).ready(function() {
        $('#clear-filter').on('click', function() {
            var currentURL = window.location.href.split('?')[0];
            window.location.href = currentURL;
        });
    });
    function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
    }

    function generateRandomColors(numColors) {
        var colors = [];
        for (var i = 0; i < numColors; i++) {
            colors.push(getRandomColor());
        }
        return colors;
    }

   /*Heap Map code here*/
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('heatMapChart', {attributionControl: false}).setView([20.5937, 78.9629], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(map);

        // var universityFilter = document.getElementById('universityFilter');

        var crosspathUsers = [];
        var redzoneUsers = [];

        function updateHeatmap() {
            let heatMapUrl = '{{ route("masters.dashboard.heatMap") }}'+(location.search || '?');
            fetch(heatMapUrl).then(response => {
                return response.json().then(data => {
                    crosspathUsers = data.data.cross_paths;
                    redzoneUsers = data.data.red_zones;
                    
                    // Remove existing heat layers
                    map.eachLayer(function (layer) {
                        if (layer instanceof L.HeatLayer) {
                            map.removeLayer(layer);
                        }
                    });

                    if (document.getElementById('cross_paths').checked) {
                        // Add crosspath users heat layer
                        crosspathHeatLayer = L.heatLayer(crosspathUsers, {
                            radius: 25,
                            blur: 10, 
                            maxZoom: 17,
                            gradient: {
                                0.4: 'blue',
                                0.65: 'lime',
                                0.85: 'orange',
                                1.0: 'red'
                            }
                        }).addTo(map);

                        crosspathHeatLayer.setOptions({ minOpacity: 0.7 });
                    }

                    if (document.getElementById('red_zones').checked) {
                        // Add redzone users heat layer
                        redzoneHeatLayer = L.heatLayer(redzoneUsers, {
                            radius: 25,
                            blur: 10, 
                            maxZoom: 17,
                            gradient: {
                                0.4: 'purple',
                                0.65: 'magenta',
                                0.85: 'red',
                                1.0: 'darkred'
                            }
                        }).addTo(map);

                        redzoneHeatLayer.setOptions({ minOpacity: 0.7 });
                    }
                });
            }).catch(error => {
                console.error('Error fetching heatmap data:', error);
            });
        }

        document.getElementById('cross_paths').addEventListener('change', updateHeatmap);
        document.getElementById('red_zones').addEventListener('change', updateHeatmap);
        // universityFilter.addEventListener('change', updateHeatmap);
        updateHeatmap();

        // map.on('mouseover', function (e) {
        //     var crosspathCount = countPointsInRadius(e.latlng, crosspathUsers);
        //     var redzoneCount = countPointsInRadius(e.latlng, redzoneUsers);
        //     showHoverInfo(e.latlng, crosspathCount, redzoneCount);
        // });

        // map.on('mouseout', function (e) {
        //     hideHoverInfo();
        // });

        // function countPointsInRadius(latlng, points, radius = 50) {
        //     var count = 0;
        //     points.forEach(function (point) {
        //         var distance = map.distance(latlng, L.latLng(point[0], point[1]));
        //         if (distance <= radius) {
        //             count++;
        //         }
        //     });
        //     return count;
        // }

        // function showHoverInfo(latlng, crosspathCount, redzoneCount) {
        //     var info = L.divIcon({
        //         className: 'hover-info',
        //         html: `<div>Crosspath: ${crosspathCount}<br>Redzone: ${redzoneCount}</div>`
        //     });
        //     var marker = L.marker(latlng, { icon: info }).addTo(map);
        //     marker.on('mouseout', function () {
        //         map.removeLayer(marker);
        //     });
        // }

        // function hideHoverInfo() {
        //     // Implement logic to hide hover info if necessary
        // }
    });



    /*Both graph*/
    const ctx = document.getElementById('bothChart').getContext('2d');
    let monthlyData = {};
    let dailyData = {};
    let currentMonth = '';

    const fetchData = (url) => {
        return fetch(url).then(response => response.json());
    };

    const loadMonthlyData = () => {
        let year = $("#bothYearFilter").val();
        fetchData(`{{ route('masters.dashboard.revenue-monthly-data') }}` + (location.search || '?') + `&year=${year}&month=`).then(data => {
            monthlyData = data;
            updateChart(monthlyData);
        });
    };

    const loadDailyData = (month) => {
        let year = $("#bothYearFilter").val();
        fetchData(`{{ route('masters.dashboard.revenue-monthly-data') }}` + (location.search || '?') + `&year=${year}&month=${month}`).then(data => {
            dailyData = data;
            updateChart(dailyData, month);
        });
    };

    const updateChart = (data, month = '') => {
        const labels = Object.keys(data);
        const feature_total_price = labels.map(label => data[label].feature_total_price);
        const package_total_price = labels.map(label => data[label].package_total_price);

        bothChart.data.labels = labels;
        bothChart.data.datasets[0].data = feature_total_price;
        bothChart.data.datasets[1].data = package_total_price;
        bothChart.options.scales.x.time.unit = month ? 'week' : 'month';
        bothChart.options.plugins.tooltip.callbacks.label = function(context) {
            const label = context.dataset.label;
            const value = context.raw;
            return `${label}: ${value}`;
        };

        bothChart.options.plugins.title.text = month ? `Feature & Package Revenue in ${month}` : 'Feature & Package Revenue Over Time';
        bothChart.update();
        document.getElementById('backButton').style.display = month ? 'block' : 'none';
    };

    const bothChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Feature Revenue',
                    data: [],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    tension: 0.1,
                    pointRadius: 5,
                    pointHoverRadius: 7
                },
                {
                    label: 'Package Revenue',
                    data: [],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1,
                    tension: 0.1,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }
            ]
        },
        options: {
            scales: {
                // x: {
                //     title: {
                //         display: true,
                //         text: 'Time'
                //     }
                // },
                x: {
                    type: 'time',
                    time: {
                        unit: 'month',
                        tooltipFormat: 'MMM YYYY',
                        displayFormats: {
                            month: 'MMM'
                        }
                    },
                    title: {
                        display: true,
                        text: 'Month'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Count'
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.dataset.label;
                            const value = context.raw;
                            return `${label}: ${value}`;
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Feature & Package Revenue Over Time'
                }
            },
            onClick: (e, elements) => {
                if (elements.length > 0) {
                    console.clear()
                    const chartElement = elements[0];
                    const selectedMonth = bothChart.data.labels[chartElement.index];
                    loadDailyData(chartElement.index + 1);
                    currentMonth = chartElement.index;
                }
            }
        }
    });

    document.getElementById('bothYearFilter').addEventListener('change', (event) => {
        loadMonthlyData();
        currentMonth = '';
    });

    document.getElementById('backButton').addEventListener('click', () => {
        loadMonthlyData();
        currentMonth = '';
    });
    loadMonthlyData();

    /*Feature Revenue*/
    function featureRevenue(year) {
        let featureYear = year || $("#featureRevenueYearFilter").val();
        const actionFeatureRevenue = `{{ route('masters.dashboard.feature-revenue-chart') }}`+(location.search || '?') + `&year=${featureYear}&month=`;
        
        fetch(actionFeatureRevenue)
            .then(response => response.json())
            .then(data => {
                var featureRevenChart = document.getElementById('featureRevenueChart').getContext('2d');
                if (window.featureRevenChartData) {
                    window.featureRevenChartData.destroy();
                }
                window.featureRevenChartData = new Chart(featureRevenChart, {
                    type: 'pie',
                    data: {
                        labels: data.keys,
                        datasets: [{
                            data: data.values,
                            backgroundColor: generateRandomColors(data.values.length),
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Feature Revenue'
                            }
                        }
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    document.addEventListener('DOMContentLoaded', function() {
        featureRevenue(null);
        document.getElementById('featureRevenueYearFilter').addEventListener('change', function(e) {
            featureRevenue(e.target.value);
        });
    });

    /*Package Revenue*/
    function packageRevenue(year) {
        let packageYear = year || $("#packageRevenueYearFilter").val();
        const actionpackageRevenue = `{{ route('masters.dashboard.package-revenue-chart') }}`+(location.search || '?') + `&year=${packageYear}&month=`;;
        
        fetch(actionpackageRevenue)
            .then(response => response.json())
            .then(data => {
                var packageRevenChart = document.getElementById('packageRevenueChart').getContext('2d');
                if (window.packageRevenChartData) {
                    window.packageRevenChartData.destroy();
                }
                window.packageRevenChartData = new Chart(packageRevenChart, {
                    type: 'pie',
                    data: {
                        labels: data.keys,
                        datasets: [{
                            data: data.values,
                            backgroundColor: generateRandomColors(data.values.length),
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Package Revenue'
                            }
                        }
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }

    document.addEventListener('DOMContentLoaded', function() {
        packageRevenue(null);
        document.getElementById('packageRevenueYearFilter').addEventListener('change', function(e) {
            packageRevenue(e.target.value);
        });
    });

</script>
@endsection