@extends('admin.layouts.main')
@section('title', 'Dashboard')
@section('content')
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Detail User</h4>
                    <div class="d-inline-block">
                        <h2>{{ $user->name }}</h2>
                        <p class="mb-0">Role: {{ $user->role }}</p>
                        <p class="mb-0">Email: {{ $user->email }}</p>
                        <p class="mb-0">Total Mood: {{ $total }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Filter</h4>
                    <form id="filter-calendar">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="form-group">
                                    <label for="start_date">Start Date</label>
                                    <input type="date" class="form-control" id="start_date" name="start_date">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="end_date">End Date</label>
                                    <input type="date" class="form-control" id="end_date" name="end_date">
                                </div>
                            </div>
                            <div class="col">
                                <div class="d-flex">
                                    <button type="submit" class="btn btn-primary">Filter</button>
{{--                                    <a href="{{ route('admin.mood.detail', ['id' => $user->id]) }}"--}}
{{--                                       class="btn btn-danger">Reset</a>--}}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Mood Statistics</h4>
                    <canvas id="canvas" width="500" height="250"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Mood Calendar</h4>
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/chart.js/Chart.bundle.min.js') }}"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.13/index.global.min.js'></script>
    <script>
        const config = {
            type: 'bar',
            data: {
                labels: ["Very Sad", "Sad", "Neutral", "Happy", "Very Happy"],
                datasets: [{
                    label: "Mood",
                    data: [
                        '{{ $statistic['very_sad'] }}',
                        '{{ $statistic['sad'] }}',
                        '{{ $statistic['neutral'] }}',
                        '{{ $statistic['happy'] }}',
                        '{{ $statistic['very_happy'] }}'
                    ],
                    borderColor: "transparent",
                    borderWidth: "0",
                    backgroundColor: ["#ff6384", "#36a2eb", "#cc65fe", "#ffce56", "#4bc0c0"]
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    xAxes: [{
                        barPercentage: 0.5
                    }]
                }
            }
        };

        window.onload = function () {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myDoughnut = new Chart(ctx, config);
        };

        $(document).ready(function () {
            function loadMoodCalendar(userId, startDate = null, endDate = null) {
                $.ajax({
                    url: "{{ route('admin.mood.calendar', ['id' => ':id']) }}".replace(':id', userId),
                    type: 'GET',
                    data: {
                        start_date: startDate,
                        end_date: endDate
                    },
                    success: function (response) {
                        const result = {
                            "1": "😡 (Sangat Sedih)",
                            "2": "😠 (Sedih)",
                            "3": "😐 (Biasa)",
                            "4": "😊 (Senang)",
                            "5": "😀 (Sangat Senang)"
                        };
                        response.data = Object.keys(response.data).reduce(function (obj, key) {
                            obj[key] = result[response.data[key]];
                            return obj;
                        }, {});
                        setCalendarData(response.data);
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            }

            function setCalendarData(data) {
                const calendarEl = document.getElementById('calendar');
                const calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
                    events: Object.keys(data).map(function (key) {
                        return {
                            title: data[key],
                            start: key,
                            backgroundColor: '#36a2eb',
                        };
                    })
                });

                calendar.render();
            }

            $('#filter-calendar').submit(function (e) {
                e.preventDefault();
                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                loadMoodCalendar('{{ $user->id }}', startDate, endDate);
            });

            loadMoodCalendar('{{ $user->id }}');
            function showOrHideResetButton() {
                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                if (startDate || endDate) {
                    $('#reset').show();
                } else {
                    $('#reset').hide();
                }
            }
        });
    </script>
@endpush