@extends('admin.layouts.admin')

@section('content')
    <script src="{{ asset('admin/js/plugins/apexcharts.min.js') }}"></script>

    <div class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item" aria-current="page">Reports</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h2 class="mb-0">Reports</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-sm-12">
                    <div class="">
                        <div class="">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card shadow-sm border">
                                        <div class="card-body">
                                            <form id="filter-form">
                                                @csrf

                                                <div class="d-flex justify-content-between">
                                                    <div class="fw-medium">REPORTS BY THE NUMBER OF APPOINTMENTS</div>
                                                    <div>
                                                        <select name="duration" id="duration-select" class="form-select form-select-sm">
                                                            <option value="daily" selected>Daily</option>
                                                            <option value="monthly">Monthly</option>
                                                            <option value="annually">Annually</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <hr>

                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <select class="form-control" name="service" id="service-filter">
                                                            <option value="">Service Filter</option>
                                                            @foreach ($services as $item)
                                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <select class="form-control" name="staff" id="staff-filter">
                                                            <option value="">Staff Filter</option>
                                                            @foreach ($staff as $item)
                                                                <option value="{{ $item->id }}">{{ $item->first_name }} {{ $item->last_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="input-group">
                                                            <select class="form-control" name="status" id="status-filter">
                                                                <option value="">Status Filter</option>
                                                                <option value="P">Pending</option>
                                                                <option value="C">Cancelled</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>

                                            <div id="chart"></div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Chart 2 --}}
                                <div class="col-md-6">
                                    <div class="card shadow-sm border">
                                        <div class="card-body">
                                            <form id="filter-form-2">
                                                @csrf

                                                <div class="d-flex justify-content-between">
                                                    <div class="fw-medium">REPORTS BY APPOINTMENT EARNINGS ($)</div>
                                                    <div>
                                                        <select name="duration" id="duration-select-2" class="form-select form-select-sm">
                                                            <option value="daily" selected>Daily</option>
                                                            <option value="monthly">Monthly</option>
                                                            <option value="annually">Annually</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <hr>

                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <select class="form-control" name="service" id="service-filter-2">
                                                            <option value="">Service Filter</option>
                                                            @foreach ($services as $item)
                                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <select class="form-control" name="staff" id="staff-filter-2">
                                                            <option value="">Staff Filter</option>
                                                            @foreach ($staff as $item)
                                                                <option value="{{ $item->id }}">{{ $item->first_name }} {{ $item->last_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <select class="form-control" name="status" id="status-filter-2">
                                                            <option value="">Status Filter</option>
                                                            <option value="P">Pending</option>
                                                            <option value="C">Cancelled</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>

                                            <div id="chart-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card shadow-sm border">
                                        <div class="card-body">
                                            <form id="filter-form-3">
                                                @csrf

                                                <div class="d-flex justify-content-between">
                                                    <div class="fw-medium">MOST EARNING STAFF</div>
                                                    <div>
                                                        <select name="duration" id="duration-select-3" class="form-select form-select-sm">
                                                            <option value="this_week">This Week</option>
                                                            <option value="previous_week">Previous Week</option>
                                                            <option value="this_month" selected>This Month</option>
                                                            <option value="previous_month">Previous Month</option>
                                                            <option value="this_year">This Year</option>
                                                            <option value="previous_year">Previous Year</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <hr>
                                            </form>

                                            <div id="chart-3"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card shadow-sm border">
                                        <div class="card-body">
                                            <form id="filter-form-4">
                                                @csrf

                                                <div class="d-flex justify-content-between">
                                                    <div class="fw-medium">MOST EARNING SERVICE</div>
                                                    <div>
                                                        <select name="duration" id="duration-select-4" class="form-select form-select-sm">
                                                            <option value="this_week">This Week</option>
                                                            <option value="previous_week">Previous Week</option>
                                                            <option value="this_month" selected>This Month</option>
                                                            <option value="previous_month">Previous Month</option>
                                                            <option value="this_year">This Year</option>
                                                            <option value="previous_year">Previous Year</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <hr>
                                            </form>

                                            <div id="chart-4"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let chart;
        let chart2;
        let chart3;
        let chart4;

        function fetchChartData() {
            $.ajax({
                url: '{{ route('admin.appointment-chart') }}',
                method: 'GET',
                data: $('#filter-form').serialize(),
                dataType: 'json',
                success: function(data) {
                    const yValues = data.map(item => item.y);
                    const maxY = Math.max(...yValues);

                    const options = {
                        chart: {
                            type: 'bar',
                            height: 350,
                            toolbar: {
                                show: false,
                            },
                        },
                        series: [{
                            name: 'Appointments',
                            data: data.map(item => ({
                                x: new Date(item.x).getTime(),
                                y: item.y,
                                fillColor: item.color
                            }))
                        }],
                        xaxis: {
                            type: 'datetime',
                            categories: data.map(item => new Date(item.x).getTime()),
                        },
                        yaxis: {
                            min: 0,
                            max: maxY,
                            tickAmount: maxY + 1,
                            forceNiceScale: true,
                            labels: {
                                formatter: function(val) {
                                    return Math.floor(val);
                                }
                            }
                        },
                        plotOptions: {
                            bar: {
                                columnWidth: '50%',
                                borderRadius: 4
                            }
                        },
                        tooltip: {
                            x: {
                                format: 'dd MMM yyyy'
                            }
                        }
                    };

                    if (data.length > 0) {
                        options.fill = {
                            opacity: 1,
                            colors: data.map(item => item.fillColor)
                        };
                    }

                    if (chart) {
                        chart.updateOptions(options);
                    } else {
                        chart = new ApexCharts(document.querySelector("#chart"), options);
                        chart.render();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        function fetchChartData_2() {
            $.ajax({
                url: '{{ route('admin.appointment-chart-2') }}',
                method: 'GET',
                data: $('#filter-form-2').serialize(),
                dataType: 'json',
                success: function(data) {
                    const maxYValue = Math.max(...data.map(item => item.y));
                    const tickAmount = maxYValue / 50 + 1;

                    const options = {
                        chart: {
                            height: 350,
                            type: 'area',
                            toolbar: {
                                show: false,
                            },
                        },
                        series: [{
                            name: 'Appointments',
                            data: data.map(item => ({
                                x: new Date(item.x).getTime(),
                                y: item.y
                            }))
                        }],
                        xaxis: {
                            type: 'datetime',
                            categories: data.map(item => new Date(item.x).getTime()),
                        },
                        yaxis: {
                            min: 0,
                            max: maxYValue,
                            tickAmount: tickAmount,
                            labels: {
                                formatter: function(value) {
                                    return value.toFixed(0);
                                }
                            }
                        },
                        fill: {
                            type: 'gradient',
                            gradient: {
                                shadeIntensity: 1,
                                opacityFrom: 0.7,
                                opacityTo: 0.9,
                                stops: [0, 100]
                            }
                        },
                        stroke: {
                            width: 2,
                            curve: 'smooth'
                        },
                        markers: {
                            size: 6,
                            strokeWidth: 0,
                            hover: {
                                sizeOffset: 3
                            }
                        },
                        tooltip: {
                            x: {
                                format: 'dd MMM yyyy'
                            }
                        }
                    };

                    const chart2 = new ApexCharts(document.querySelector("#chart-2"), options);
                    chart2.render();
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        function fetchChartData_3() {
            // Serialize form data
            var formData = $('#filter-form-3').serialize();

            $.ajax({
                url: '{{ route('admin.appointment-chart-3') }}',
                method: 'GET',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    const colors = ['#2ecc71', '#3498db', '#9b59b6', '#f1c40f', '#e74c3c', '#1abc9c', '#34495e', '#95a5a6', '#d35400', '#2980b9'];

                    const options = {
                        chart: {
                            height: 350,
                            type: 'donut',
                            toolbar: {
                                show: false,
                            },
                        },
                        series: data.map(item => item.value),
                        labels: data.map(item => item.user),
                        colors: colors,
                        fill: {
                            type: 'gradient',
                            gradient: {
                                shadeIntensity: 1,
                                opacityFrom: 0.7,
                                opacityTo: 0.9,
                                stops: [0, 100]
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(value) {
                                    return value.toFixed(0);
                                }
                            }
                        },
                        legend: {
                            show: true,
                            position: 'right',
                            verticalAlign: 'middle',
                            fontSize: '14px',
                            markers: {
                                width: 10,
                                height: 10,
                                strokeWidth: 0,
                                radius: 12,
                            },
                            itemMargin: {
                                horizontal: 15,
                                vertical: 8
                            }
                        }
                    };

                    // Select the chart container element and render the chart
                    const chart3 = new ApexCharts(document.querySelector("#chart-3"), options);
                    chart3.render();
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        function fetchChartData_4() {
            $.ajax({
                url: '{{ route('admin.appointment-chart-4') }}',
                method: 'GET',
                data: $('#filter-form-4').serialize(),
                dataType: 'json',
                success: function(data) {
                    const colors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
                        '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
                        '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
                        '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

                    const options = {
                        chart: {
                            height: 350,
                            type: 'donut',
                            toolbar: {
                                show: false,
                            },
                        },
                        series: data.map(item => item.value),
                        labels: data.map(item => item.service),
                        colors: colors,
                        fill: {
                            type: 'gradient',
                            gradient: {
                                shadeIntensity: 1,
                                opacityFrom: 0.7,
                                opacityTo: 0.9,
                                stops: [0, 100]
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(value) {
                                    return value.toFixed(2); // Adjust decimal places as needed
                                }
                            }
                        },
                        legend: {
                            show: true,
                            position: 'right',
                            verticalAlign: 'middle',
                            fontSize: '14px',
                            markers: {
                                width: 10,
                                height: 10,
                                strokeWidth: 0,
                                radius: 12,
                            },
                            itemMargin: {
                                horizontal: 15,
                                vertical: 8
                            }
                        }
                    };

                    const chart4 = new ApexCharts(document.querySelector("#chart-4"), options);
                    chart4.render();
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        }

        $(document).ready(function() {
            $('#status-filter, #service-filter, #staff-filter, #duration-select').change(function() {
                fetchChartData();
            })

            $('#status-filter-2, #service-filter-2, #staff-filter-2, #duration-select-2').change(function() {
                fetchChartData_2();
            })

            $('#duration-select-3').change(function() {
                fetchChartData_3();
            })

            $('#duration-select-4').change(function() {
                fetchChartData_4();
            })

            fetchChartData();
            fetchChartData_2();
            fetchChartData_3();
            fetchChartData_4();
        });
    </script>

@endsection