@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 {
    text-align: center;
    padding: 20px;
}
.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 */*/
}
.custom-card-height { height: 553px; }
.custom-card-height canvas { height: 100%;}
</style>
@endsection
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            @include('partials.title-pad', [
                'title' => __('Events'),
                'search' => $search,
                'searchPlaceholder' => __("Search Name ..."),
                'list' => $events,
                // 'export' => 'premium.feature.export',
                'filter' => 'filter'
            ])
            <div class="mb-3 text-right">
                <a class="clear-filter" id="clear-filter">Clear Filters</a>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <h6 class="my-2">Events</h6>
                        <div class="dashbed-border-bottom"></div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive bg-white">
                        <table class="table table-striped table-bordered admintable border-0" cellspacing="0"
                            cellpadding="0">
                            <tbody>
                                <tr>
                                    <th>S.No.</th>
                                    <th>Name</th>
                                    <th>University</th>
                                    <th>Event Creation Date & Time</th>
                                    <th>Event Date & Time</th>
                                    <th>Type</th>
                                    <th>Action</th>
                                </tr>
                                @php
                                $startingIndex = ($events->currentPage() - 1) * $events->perPage() + 1;
                                @endphp
                                @forelse ($events as $key => $event)
                                    <tr>
                                        <td>{{++$key}}</td>
                                        <td>{{$event->title ?? 'NA'}}</td>
                                        <td>{{$event->university->name ?? 'NA'}}</td>
                                        <td>{{$event->created_at}}</td>
                                        <td>{{$event->display_start}}</td>
                                        <td>{{$event->type}}</td>
                                        <td><a href="{{ route('masters.event.detail', $event->id) }}" class="text-dark f-16 mr-1"><i class="iconly-boldShow"></i></a></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10">
                                            <p>
                                                <center class="text-danger">{{ __('labels.no_records_found') }}
                                                </center>
                                            </p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <br />
                    </div>
                </div>
                {{ $events->appends(request()->query())->links('partials.pagination') }}
            </div>

            {{-- Graph --}}
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-body ">
                            <div class="filters">
                                <select id="eventYearFilter" 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="backEventButton" style="display: none;">Back</button>
                            <canvas id="eventChart" class="chart-container" width="800" height="400"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-body">
                            <div class="filters">
                                <select id="eventYearFilter" 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="backBroadcastButton" style="display: none;">Back</button>
                            <canvas id="broadcastChart" class="chart-container" width="800" height="400"></canvas>
                        </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="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 " height="350"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            Event Location
                        </div>
                        <div class="card-body">
                            <div class="filters">
                                <select id="universityFilter" class="form-control">
                                    <option value="">All Universities</option>
                                    @foreach($universities as $university)
                                        <option value="{{$university->id}}">{{$university->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="heatMapChart" class="chart-container fixed-card-height"></div>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                #clear-filter {
                    cursor: pointer;
                }
                #map1 {
                    height: 100%;
                }
                .footer-row {
                    margin-left: 118px !important;
                }
            </style>
        </div>

    </section>
    <div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="loginpopupTitle"
            aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content bg-light modalPad">
                <form class="needs-validation" novalidate>
                    <input type="hidden" name="search" value="{{request('search')}}">
                    <div class="modal-header position-relative border-0">
                        <div class="">
                            <button type="button" class="close-btn" data-dismiss="modal" aria-label="Close">
                                <img src="{{ asset('assets/img/close.svg') }}" />
                            </button>
                            <div class="">
                                <h5>{{ __('Feature Filter') }}</h5>
                            </div>

                        </div>
                    </div>
                    <div class="modal-body pt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">{{ __('Select University') }}</label>
                                        <select class="form-control selectpicker" name="university_id">
                                            <option value="" {{ !request('university_id') ? 'selected' : ''}}>All</option>
                                            @foreach($universities as  $university)
                                                <option value="{{$university->id}}" {{ request('university_id') == $university->id ? 'selected' : ''}}>{{$university->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect2">{{ __('Select Type') }}</label>
                                        <select class="form-control selectpicker" name="type">
                                            <option value="" {{ !request('type') ? 'selected' : ''}}>All</option>
                                            @foreach($types as  $type)
                                                <option value="{{$type}}" {{ request('type') == $type ? 'selected' : ''}}>{{$type}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect5">{{ __('From Date') }}</label>
                                        <input type="date" name="from_date" class="form-control" value="{{request('from_date')}}">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect6">{{ __('To') }}</label>
                                        <input type="date" name="to_date" class="form-control" value="{{request('to_date')}}">
                                    </div>
                                </div>

                                <div class="col-md-12 mt-1">
                                    <button type = "submit"
                                    class="btn btn-primary">{{ __('buttons.apply_filter') }}</button>
                                </div>
                            </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@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 type="text/javascript">
        $(document).ready(function() {
            $('#clear-filter').on('click', function() {
                var currentURL = window.location.href.split('?')[0];
                window.location.href = currentURL;
            });
            $("#eventYearFilter").val(2024).trigger('change');
        });

        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;
        }

        /*Event growth*/
        const eventCtx = document.getElementById('eventChart').getContext('2d');
        const eventLevel = {};
        const eventData = {};
        const fetchEventUpdateChart = (year, month = '') => {
            const eventGraphUrl = `{{ route('masters.event.graph-change') }}?year=${year}&month=${month}&search={{request('search')}}&university_id={{request('university_id')}}&type={{request('type')}}&from_date={{request('from_date')}}&to_date={{request('to_date')}}`;
            return fetch(eventGraphUrl)
                .then(response => response.json())
                .then(data => {
                    eventChart.data.labels = Object.keys(data);
                    eventChart.data.datasets[0].data = Object.values(data);
                    eventChart.options.scales.x.time.unit = month ? 'week' : 'month';
                    eventChart.options.plugins.title.text = month 
                        ? `Event Growth in ${eventChart.data.labels[0].slice(0, 7)}` 
                        : `Event Growth Over ${year}`;
                    eventChart.update();
                    document.getElementById('backEventButton').style.display = month ? 'block' : 'none';
                });
        };

        const eventChart = new Chart(eventCtx, {
            type: 'bar',
            data: {
                labels: eventLevel,
                datasets: [{
                    label: 'Event Count',
                    data: eventData,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: true,
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'month',
                            tooltipFormat: 'MMM YYYY',
                            displayFormats: {
                                month: 'MMM'
                            }
                        },
                        title: {
                            display: true,
                            text: 'Month'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Events'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Events Growth Over One Year'
                    }
                },
                onClick: (e, elements) => {
                    if (elements.length > 0) {
                        const chartElement = elements[0];
                        if (chartElement.index > 12) {
                            return false;
                        }
                        const selectedYear = $("#eventYearFilter").val();
                        const selectMonth = chartElement.index + 1; 
                        fetchEventUpdateChart(selectedYear, selectMonth);
                    }
                }
            }
        });

        document.getElementById('eventYearFilter').addEventListener('change', (event) => {
            const selectedYear = event.target.value;
            fetchEventUpdateChart(selectedYear);
        });

        document.getElementById('backEventButton').addEventListener('click', () => {
            const selectedYear = document.getElementById('eventYearFilter').value;
            fetchEventUpdateChart(selectedYear);
        });

        setTimeout(() => {
            const selectedYear = $("#eventYearFilter").val();
            fetchEventUpdateChart(selectedYear);
        }, 0);


        /*Broadcast growth*/
        const broadcastCtx = document.getElementById('broadcastChart').getContext('2d');
        const broadcastLevel = {};
        const broadcastData = {};
        const fetchBroadcastUpdateChart = (year, month = '') => {
            const eventGraphUrl = `{{ route('masters.broadcast.graph-change') }}?year=${year}&month=${month}&search={{request('search')}}&university_id={{request('university_id')}}&type={{request('type')}}&from_date={{request('from_date')}}&to_date={{request('to_date')}}`;
            return fetch(eventGraphUrl)
                .then(response => response.json())
                .then(data => {
                    broadcastChart.data.labels = Object.keys(data);
                    broadcastChart.data.datasets[0].data = Object.values(data);
                    broadcastChart.options.scales.x.time.unit = month ? 'week' : 'month';
                    broadcastChart.options.plugins.title.text = month 
                        ? `Broadcasts Growth in ${broadcastChart.data.labels[0].slice(0, 7)}` 
                        : `Broadcasts Growth Over ${year}`;
                    broadcastChart.update();
                    document.getElementById('backBroadcastButton').style.display = month ? 'block' : 'none';
                });
        };

        const broadcastChart = new Chart(broadcastCtx, {
            type: 'line',
            data: {
                labels: eventLevel,
                datasets: [{
                    label: 'Broadcasts Count',
                    data: eventData,
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: false,
                    tension: 0.1,
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'month',
                            tooltipFormat: 'MMM YYYY',
                            displayFormats: {
                                month: 'MMM'
                            }
                        },
                        title: {
                            display: true,
                            text: 'Month'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Broadcasts'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: 'Broadcasts Growth Over One Year'
                    }
                },
                onClick: (e, elements) => {
                    if (elements.length > 0) {
                        const chartElement = elements[0];
                        if (chartElement.index > 12) {
                            return false;
                        }
                        const selectedYear = $("#eventYearFilter").val();
                        const selectMonth = chartElement.index + 1; 
                        fetchBroadcastUpdateChart(selectedYear, selectMonth);
                    }
                }
            }
        });

        document.getElementById('eventYearFilter').addEventListener('change', (event) => {
            const selectedYear = event.target.value;
            fetchBroadcastUpdateChart(selectedYear);
        });

        document.getElementById('backBroadcastButton').addEventListener('click', () => {
            const selectedYear = document.getElementById('eventYearFilter').value;
            fetchBroadcastUpdateChart(selectedYear);
        });

        setTimeout(() => {
            const selectedYear = $("#eventYearFilter").val();
            fetchBroadcastUpdateChart(selectedYear);
        }, 0);


        /*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.broadcasts.monthly-data') }}?year=${year}&month=&search={{request('search')}}&university_id={{request('university_id')}}&type={{request('type')}}&from_date={{request('from_date')}}&to_date={{request('to_date')}}`).then(data => {
                monthlyData = data;
                updateChart(monthlyData);
            });
        };

        const loadDailyData = (month) => {
            let year = $("#bothYearFilter").val();
            fetchData(`{{ route('masters.broadcasts.monthly-data') }}?year=${year}&month=${month}&search={{request('search')}}&university_id={{request('university_id')}}&type={{request('type')}}&from_date={{request('from_date')}}&to_date={{request('to_date')}}`).then(data => {
                dailyData = data;
                updateChart(dailyData, month);
            });
        };

        const updateChart = (data, month = '') => {
            const labels = Object.keys(data);
            const comments = labels.map(label => data[label].total_comments);
            const likes = labels.map(label => data[label].total_likes);

            bothChart.data.labels = labels;
            bothChart.data.datasets[0].data = comments;
            bothChart.data.datasets[1].data = likes;
            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 ? `Broadcast & Public Event Growth in ${month}` : 'Broadcast & Public Event Growth Over Time';
            bothChart.update();
            document.getElementById('backButton').style.display = month ? 'block' : 'none';
        };

        const bothChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'Comments',
                        data: [],
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Likes',
                        data: [],
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }
                ]
            },
            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: 'Broadcast & Public Event Growth 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();

        /*Event Location Heap Map*/
        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');

        function updateHeatmap() {
            var selectedUniversity = universityFilter.value || '{{request('university_id')}}';
            let heatMapUrl = `{{ route("masters.event.heat-map") }}`;
            let from_date = '{{request('from_date')}}';
            let to_date = '{{request('to_date')}}';
            let type = '{{request('type')}}';
            let search = '{{request('search')}}';
            fetch(heatMapUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ university_id: selectedUniversity, search : search, type: type,to_date: to_date
                })
            }).then(response => {
                return response.json().then(data => {
                    var userCrosspaths = data.data;
                    map.eachLayer(function (layer) {
                        if (layer instanceof L.HeatLayer) {
                            map.removeLayer(layer);
                        }
                    });
                    var heatMapLayer = L.heatLayer(userCrosspaths, {
                        radius: 25,
                        blur: 10, 
                        maxZoom: 17,
                        gradient: {
                            0.4: 'blue',
                            0.65: 'lime',
                            0.85: 'orange',
                            1.0: 'red'
                        }
                    }).addTo(map);

                    heatMapLayer.setOptions({ minOpacity: 0.7 });
                    L.setOptions({ minOpacity: 0.5 });
                });
            }).catch(error => {
                console.error('Error fetching heatmap data:', error);
            });
        }
        universityFilter.addEventListener('change', updateHeatmap);
        updateHeatmap();
    });
    </script>
@endsection