@extends('layouts.app')
@section('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 */*/
    }
    </style>
@endsection
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            @include('partials.title-pad', [
                'title' => __('Accounts'),
                'search' => $search,
                'searchPlaceholder' => __("Search Name ..."),
                'list' => $users,
                // '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">
                        <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>Mobile</th>
                                    <th>Email</th>
                                    <th>Gender</th>
                                    <th>Course</th>
                                    <th>Nationality</th>
                                    <th>University</th>
                                    <th>Profile Type</th>
                                </tr>
                                @php
                                $startingIndex = ($users->currentPage() - 1) * $users->perPage() + 1;
                                @endphp
                                @forelse ($users as $key => $user)
                                    <tr>
                                        <td>{{++$key}}</td>
                                        <td>{{$user->full_name ?? 'NA'}}</td>
                                        <td>{{$user->user->phone_no}}</td>
                                        <td>{{$user->email}}</td>
                                        <td>{{$user->user->gender ?? 'NA'}}</td>
                                        <td>{{$user->course->name ?? 'NA'}}</td>
                                        <td>{{$user->user->country->name ?? 'NA'}}</td>
                                        <td>{{$user->university->name ?? 'NA'}}</td>
                                        <td>{{$user->filter_basic_preferences()->where('university_id', $user->university_id)->first()->profile_visibility ?? 'NA'}}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9">
                                            <p>
                                                <center class="text-danger">{{ __('labels.no_records_found') }}
                                                </center>
                                            </p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <br />
                    </div>
                </div>
                {{ $users->appends(request()->query())->links('partials.pagination') }}
            </div>

            {{-- Graph --}}
            <br />
            <div class="row">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Accounts per Gender
                        </div>
                        <div class="card-body">
                            <canvas id="genderChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Accounts per Nationality
                        </div>
                        <div class="card-body">
                            <canvas id="nationalityChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Accounts per Profile
                        </div>
                        <div class="card-body">
                            <canvas id="privateProfileChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Accounts per Notifications
                        </div>
                        <div class="card-body">
                            <canvas id="notificationsChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Accounts per Course of Study
                        </div>
                        <div class="card-body">
                            <canvas id="courseChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Number of Accounts per Hobby
                        </div>
                        <div class="card-body">
                            <canvas id="hobbyChart" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Line chart for radius--}}
            <div class="row">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Account per Profile Status
                        </div>
                        <div class="card-body">
                            <canvas id="profileStatus" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Micro Map Radius
                        </div>
                        <div class="card-body">
                            <canvas id="microMapRadius" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Line chart for radius--}}

            {{-- Study per year --}}
            <div class="row">
                <div class="col-md-6">
                    <div class="card fixed-card-height">
                        <div class="card-header">
                            Account per Year of Study
                        </div>
                        <div class="card-body">
                            <canvas id="yearStudy" class="chart-container"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Study per year --}}
            <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>{{ __('Account 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 Gender') }}</label>
                                    <select class="form-control selectpicker" name="gender">
                                        <option value="" {{ !request('gender') ? 'selected' : ''}}>All</option>
                                        @foreach($genders as  $gender)
                                            <option value="{{$gender}}" {{ request('gender') == $gender ? 'selected' : ''}}>{{$gender}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect3">{{ __('Select Course') }}</label>
                                    <select class="form-control selectpicker" name="course_id">
                                        <option value="" {{ !request('course_id') ? 'selected' : ''}}>All</option>
                                        @foreach($courses as  $course)
                                            <option value="{{$course->id}}" {{ request('course_id') == $course->id ? 'selected' : ''}}>{{$course->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect4">{{ __('Select Nationality') }}</label>
                                    <select class="form-control selectpicker" name="country_id">
                                        <option value="" {{ !request('country_id') ? 'selected' : ''}}>All</option>
                                        @foreach($nationalities as  $nationality)
                                            <option value="{{$nationality->id}}" {{ request('country_id') == $nationality->id ? 'selected' : ''}}>{{$nationality->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleFormControlSelect5">{{ __('Select Profile Visibility') }}</label>
                                    <select class="form-control selectpicker" name="profile_visibility">
                                        <option value="" {{ !request('profile_visibility') ? 'selected' : ''}}>All</option>
                                        @foreach($profileStatuses as  $profileStatus)
                                            <option value="{{$profileStatus}}" {{ request('profile_visibility') == $profileStatus ? 'selected' : ''}}>{{$profileStatus}}</option>
                                        @endforeach
                                    </select>
                                </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>
        $(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;
        }

        // Gender Chart
        var genderChartData = {!! json_encode(array_values($genderCounts)) !!};
        var ctxGender = document.getElementById('genderChart').getContext('2d');
        var genderChart = new Chart(ctxGender, {
            type: 'pie',
            data: {
                labels: {!! json_encode(array_keys($genderCounts)) !!},
                datasets: [{
                    data: genderChartData,
                    backgroundColor: generateRandomColors(genderChartData.length),
                }]
            }
        });

        // Nationality Chart
        var nationalityChartData = {!! json_encode(array_values($nationalityCounts)) !!};
        var ctxNationality = document.getElementById('nationalityChart').getContext('2d');
        var nationalityChart = new Chart(ctxNationality, {
            type: 'pie',
            data: {
                labels: {!! json_encode(array_keys($nationalityCounts)) !!},
                datasets: [{
                    data: nationalityChartData,
                    backgroundColor: generateRandomColors(nationalityChartData.length),
                }]
            }
        });

        // Profile visibility
        var ctxProfile = document.getElementById('privateProfileChart').getContext('2d');
        var myChart = new Chart(ctxProfile, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode(array_keys($privateProfileCounts)) !!},
                datasets: [{
                    // label: 'Accounts with Private Profile',
                    data: {!! json_encode(array_values($privateProfileCounts)) !!},
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(54, 162, 235, 0.8)'
                    ],
                    borderWidth: 1
                }]
            },
            // options: {
            //     responsive: true,
            //     maintainAspectRatio: false,
            //     legend: {
            //         position: 'bottom',
            //     },
            //     title: {
            //         display: true,
            //         text: 'Accounts with Private Profile'
            //     }
            // }
        });

        // Notifications
        // Profile visibility
        var ctxNotification = document.getElementById('notificationsChart').getContext('2d');
        var myChart = new Chart(ctxNotification, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode(array_keys($notifications)) !!},
                datasets: [{
                    // label: 'Accounts with Private Profile',
                    data: {!! json_encode(array_values($notifications)) !!},
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.8)',
                        'rgba(54, 162, 235, 0.8)'
                    ],
                    borderWidth: 1
                }]
            },
            // options: {
            //     responsive: true,
            //     maintainAspectRatio: false,
            //     legend: {
            //         position: 'bottom',
            //     },
            //     title: {
            //         display: true,
            //         text: 'Accounts with Private Profile'
            //     }
            // }
        });

        // Course Chart
        var courseChartData = {!! json_encode(array_column($courseCounts, 'count')) !!};
        var ctxcourse = document.getElementById('courseChart').getContext('2d');
        var courseChart = new Chart(ctxcourse, {
            type: 'pie',
            data: {
                labels: {!! json_encode(array_column($courseCounts, 'course_name')) !!},
                datasets: [{
                    data: courseChartData,
                    backgroundColor: generateRandomColors(courseChartData.length),
                }]
            }
        });

        // Hobby Chart

        var hobbyChartData = {!! json_encode(array_column($hobbyCounts, 'count')) !!};
        var ctxhobby = document.getElementById('hobbyChart').getContext('2d');
        var hobbyChart = new Chart(ctxhobby, {
                type: 'bar',
                data: {
                    labels: {!! json_encode(array_column($hobbyCounts, 'hobby_name')) !!},
                    datasets: [{
                        label: 'Number of Hobbies',
                        data: hobbyChartData,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    // plugins: {
                    //     legend: {
                    //         position: 'top',
                    //     },
                    //     title: {
                    //         display: true,
                    //         text: 'Number of Students per hobby'
                    //     }
                    // }
                }
        });

        /*MicroMap*/
        var radiusData = @json($microMapRadius);
        var ctx = document.getElementById('microMapRadius').getContext('2d');
        var data = {
            labels: ['Min Radius', 'Avg Radius', 'Max Radius'],
            datasets: [{
                label: 'Radius Stats',
                data: [radiusData.minRadius, radiusData.avgRadius, radiusData.maxRadius],
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 1,
                fill: false,
                tension: 0,
                pointBackgroundColor: ['blue', 'green', 'red'],
                pointRadius: 5
            }]
        };

        var radiusChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Radius'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Statistics'
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += context.parsed.y;
                                return label;
                            }
                        }
                    }
                }
            }
        });

        var ctxprofileStatus = document.getElementById('profileStatus').getContext('2d');
        var myChart = new Chart(ctxprofileStatus, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode(array_keys($settingProfileStatus) ?? []) !!},
                datasets: [{
                    // label: 'Accounts with Private Profile',
                    data: {!! json_encode(array_values($settingProfileStatus) ?? []) !!},
                    backgroundColor: [
                        'red',
                        '#FFBF00',
                        'green'
                    ],
                    borderWidth: 1
                }]
            },
            // options: {
            //     responsive: true,
            //     maintainAspectRatio: false,
            //     legend: {
            //         position: 'bottom',
            //     },
            //     title: {
            //         display: true,
            //         text: 'Accounts with Private Profile'
            //     }
            // }
        });

        var ctxYearStudy = document.getElementById('yearStudy').getContext('2d');
        var myChart = new Chart(ctxYearStudy, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode(array_keys($studyYearCounts) ?? []) !!},
                datasets: [{
                    // label: 'Accounts with Private Profile',
                    data: {!! json_encode(array_values($studyYearCounts) ?? []) !!},
                    backgroundColor: generateRandomColors(7),
                    borderWidth: 1
                }]
            },
            // options: {
            //     responsive: true,
            //     maintainAspectRatio: false,
            //     legend: {
            //         position: 'bottom',
            //     },
            //     title: {
            //         display: true,
            //         text: 'Accounts with Private Profile'
            //     }
            // }
        });

    </script>
@endsection