@extends('site.layouts.app')
@section('title', 'Dashboard Owner Relation')
@section('datatable')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style type="text/css">
        input {
            border: 0;
            outline: 0;
            border-bottom: 2px solid #03a8f45e !important;
            color: #ccc;
        }
    </style>
@endsection
@section('subtitle', 'Control Panel')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Dashboard Owner Relation</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home', ['site' => $site->slug]) }}">Dashboard Owner Relation</a>
                        </li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="h-100">
                    <div class="row">
                        <div class="col-xl-8">
                            <div class="card">
                                <div class="card-header border-0 align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Overview Status Ticket</h4>
                                    <div>
                                        <select name="year_line" class="select2" id="year_line_ticket">
                                            @php
                                                $year_now = date('Y');
                                            @endphp
                                            @for ($i = $year_now; $i >= 1991; $i--)
                                                <option @if ($i == date('Y')) selected @endif
                                                    value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>

                                <div class="card-header p-0 border-0 bg-light-subtle">
                                    <div class="row g-0 text-center">
                                        <div class="col-12 col-sm-4">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="total">0</span></h5>
                                                <p class="text-muted mb-0">Total Ticket</p>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-4">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="open">0</span></h5>
                                                <p class="text-muted mb-0">Open</p>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-4">
                                            <div class="p-3 border border-dashed border-start-0">
                                                <h5 class="mb-1"><span class="counter-value" id="close">0</span></h5>
                                                <p class="text-muted mb-0">Close</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body p-0 pb-2">
                                    <div class="w-100">
                                        <div id="status_ticket" data-colors='["--vz-primary", "--vz-success"]'
                                            class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div><!-- end col -->

                        <div class="col-xl-4">
                            <div class="card card-height-100">
                                <div class="card-header align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Ticket by Category</h4>
                                    <div class="flex-shrink-0">
                                        <div>
                                            <select name="year_donut" class="select2" id="year_donut">
                                                @php
                                                    $year_now = date('Y');
                                                @endphp
                                                @for ($i = $year_now; $i >= 1991; $i--)
                                                    <option @if ($i == date('Y')) selected @endif
                                                        value="{{ $i }}">{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                </div><!-- end card header -->

                                <div class="card-body">
                                    <div id="dept_wo"
                                        data-colors='["--vz-primary", "--vz-success", "--vz-info", "--vz-warning", "--vz-secondary", "--vz-danger"]'
                                        class="apex-charts" dir="ltr"></div>
                                </div>
                            </div> <!-- .card-->
                        </div>
                        <!-- end col -->
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header border-0 align-items-center d-flex">
                                    <h4 class="card-title mb-0 flex-grow-1">Overview Status Item Ticket</h4>
                                    <div>
                                        <select name="year_line" class="select2" id="year_line">
                                            @php
                                                $year_now = date('Y');
                                            @endphp
                                            @for ($i = $year_now; $i >= 1991; $i--)
                                                <option @if ($i == date('Y')) selected @endif
                                                    value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="card-header p-0 border-0 bg-light-subtle">
                                    <div class="row g-0 text-center d-flex align-items-stretch">
                                        <div class="col-12 col-sm-4 col-lg-2">
                                            <div class="p-3 border border-dashed border-start-0 h-100">
                                                <h5 class="mb-1"><span class="counter-value" id="totalItem">0</span></h5>
                                                <p class="text-muted mb-0">Total Ticket Item</p>
                                            </div>
                                        </div>
                                        @foreach ($statusTypes as $st)
                                        <div class="col-12 col-sm-4 col-lg-2">
                                            <div class="p-3 border border-dashed border-start-0 h-100">
                                                <h5 class="mb-1"><span class="counter-value" id="{{ Str::slug($st) }}">0</span></h5>
                                                <p class="text-muted mb-0">{{ $st }}</p>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="card-body p-0 pb-2">
                                    <div class="w-100">
                                        <div id="status_item" data-colors='["--vz-primary", "--vz-success", "--vz-info", "--vz-warning", "--vz-secondary", "--vz-danger"]'
                                            class="apex-charts" dir="ltr"></div>
                                    </div>
                                </div><!-- end card body -->
                            </div><!-- end card -->
                        </div>
                    </div>

                </div> <!-- end .h-100-->

            </div> <!-- end col -->
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://themesbrand.com/velzon/html/creative/assets/libs/apexcharts/apexcharts.min.js"></script>
    <script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
    <script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/maps/world-merc.js"></script>
    <script src="https://themesbrand.com/velzon/html/creative/assets/libs/swiper/swiper-bundle.min.js"></script>
    <!-- <script src="https://themesbrand.com/velzon/html/creative/assets/js/pages/dashboard-ecommerce.init.js"></script> -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script src="{{ asset('adminlte/component/accounting/accounting.min.js') }}"></script>
    <script type="text/javascript">
        function getChartColorsArray(chartId) {
            if (document.getElementById(chartId) !== null) {
                var colors = document.getElementById(chartId).getAttribute("data-colors");
                if (colors) {
                    colors = JSON.parse(colors);
                    return colors.map(function(value) {
                        var newValue = value.replace(" ", "");
                        if (newValue.indexOf(",") === -1) {
                            var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
                            if (color) return color;
                            else return newValue;;
                        } else {
                            var val = value.split(',');
                            if (val.length == 2) {
                                var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
                                rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                                return rgbaColor;
                            } else {
                                return newValue;
                            }
                        }
                    });
                }
            }
        }

        $(function() {
            $('.select2').select2();

            $('#year_line_ticket').on('change', function() {
                chartTicket();
            });

            $('#year_donut').on('change', function() {
                chartTicket();
            });

            $('#year_line').on('change', function() {
                chartTicket();
            });

            chartTicket();
        });

        function chartTicket() {
            var yearLine        = $('#year_line_ticket').val();
            var yearDonut       = $('#year_donut').val();
            var yearLineItem    = $('#year_line').val();

            $.ajax({
                url: "{{ route('site.home.chartticket', ['site' => $site->slug]) }}",
                type: "GET",
                dataType: 'json',
                data: {
                    year_line: yearLine,
                    year_donut: yearDonut,
                    year_line_item: yearLineItem,
                },
                success: function(data) {

                    var dataTicket      = data.line_ticket;
                    var dataDonut       = data.donut;
                    var dataTicketItem  = data.line_ticket_item;

                    $('#open').html(accounting.formatMoney(dataTicket.count_open, '', ',', '.'));
                    $('#close').html(accounting.formatMoney(dataTicket.count_close, '', ',', '.'));
                    $('#total').html(accounting.formatMoney(dataTicket.count_total, '', ',', '.'));
                    $('#totalItem').html(accounting.formatMoney(dataTicketItem.total_status_counts, '', ',', '.'));

                    $.each(dataTicketItem.status_counts, function (status, count) {
                        var selector = status.replace(/_/g, "-");
                        $('#' + selector).html(accounting.formatMoney(count, '', ',', '.'));
                    });

                    // Initialize or update chart configurations
                    renderBarChart("status_ticket", dataTicket.month_labels, [
                        { name: 'Open', data: dataTicket.open },
                        { name: 'Close', data: dataTicket.close }
                    ], getChartColorsArray("status_ticket"));

                    renderPieChart("dept_wo", dataDonut.labels, dataDonut.values, getChartColorsArray("dept_wo"));

                    renderBarChart("status_item", dataTicketItem.month_labels, [
                        { name: 'New', data: dataTicketItem.status_values.new },
                        { name: 'In Progress', data: dataTicketItem.status_values.in_progress },
                        { name: 'Pending BSH Manager Approval', data: dataTicketItem.status_values.pending_bsh_manager_approval },
                        { name: 'Pending Magnitude', data: dataTicketItem.status_values.pending_magnitude },
                        { name: 'Pending BSH Approval', data: dataTicketItem.status_values.pending_bsh_approval },
                        { name: 'Pending Owner Approval', data: dataTicketItem.status_values.pending_owner_approval },
                        { name: 'Pending Owner Feedback', data: dataTicketItem.status_values.pending_owner_feedback },
                        { name: 'Reopened', data: dataTicketItem.status_values.reopened },
                        { name: 'Resolved', data: dataTicketItem.status_values.resolved },
                        { name: 'Closed', data: dataTicketItem.status_values.closed }
                    ], getChartColorsArray("status_item"));
                }
            });
        }

        // Function to render or update a bar chart
        function renderBarChart(elementId, categories, seriesData, colors) {
            var chartOptions = {
                chart: {
                    height: 350,
                    type: 'bar',
                    toolbar: { show: false }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '45%',
                        endingShape: 'rounded'
                    }
                },
                dataLabels: { enabled: false },
                stroke: { show: true, width: 2, colors: ['transparent'] },
                series: seriesData,
                colors: colors,
                xaxis: { categories: categories },
                yaxis: { title: { text: 'Value' } },
                grid: { borderColor: '#f1f1f1' },
                fill: { opacity: 1 },
                tooltip: {
                    y: { formatter: function(val) { return val; } }
                }
            };

            var chart = new ApexCharts(document.querySelector("#" + elementId), chartOptions);
            chart.render();

            // Update chart data if the chart already exists
            if (chart) {
                chart.updateSeries(seriesData);
            }
        }

        // Function to render or update a pie chart
        function renderPieChart(elementId, labels, seriesData, colors) {
            var chartOptions = {
                series: seriesData,
                chart: {
                    height: 350,
                    type: 'pie'
                },
                labels: labels,
                legend: { position: 'bottom' },
                dataLabels: {
                    dropShadow: { enabled: false }
                },
                colors: colors
            };

            var chart = new ApexCharts(document.querySelector("#" + elementId), chartOptions);
            chart.render();

            // Update chart data if the chart already exists
            if (chart) {
                chart.updateSeries(seriesData);
                chart.updateOptions({ labels: labels });
            }
        }

    </script>
@endpush