@extends('adminlte::page')

@section('title', __('statistics.tab-title'))

@section('content_header')
    <h3 class="text-center menu-title">{{ __('statistics.title') }}</h3>
    <button id="generatePDF" class="btn btn-primary">Izvoz u PDF</button>
@stop

@section('content')
<div class="row">
    <div class="col page-tab">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="table-responsive">
                        <table id="statsTable" class="table display table-hover statistics-table w-100"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="ft-pagination">
            <span class="float-right position-right-10"></span>
        </div>
    </div>
</div>

<div id="single" class="row single-statistics-card" style="display:none">
    <div class="col-4 page-tab">
        <div class="card">
            <div class="card-body">
                <h2 id="user_name"></h2>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-4">
        <h3 class="text-center">Broj naloga po periodu</h3>
        <div id="main-graph-wrapper"></div>
    </div>
    <div class="col-2">
        <h3 class="text-center">Prosjek dana po nalogu</h3>
        <div id="avg-graph-wrapper"></div>
    </div>
    <div class="col-6">
        <div id="single-graph-wrapper" class="row"></div>
    </div>
</div>

<div class="modal fade" id="statistics-filter" tabindex="-1" role="dialog" aria-labelledby="statistics-filter-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg filters-modal" role="document">
        <div class="modal-content">

            <button type="button" class="close" aria-label="Close" data-bs-dismiss="modal">
                <img class="float-right close-x-icon" src="/images/close-x.png">
            </button>
            <h5 class="modal-title">Filtriraj</h5>

            <div id="statistics-filter-body" class="modal-body">
                <div class="row">
                    <label for="filter[user_name]">Serviser</label>
                    <div class="col-12">
                        <div class="form-group">
                            <select id="filter_user_id" name="filter[user_id][]" class="form-control select2" multiple>
                                @foreach($servisers as $serviser)
                                    <option value="{{ $serviser->id }}">{{ $serviser->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <label for="filter[date_range]">Period</label>
                    <div class="col-12">
                        <div class="form-group">
                            <select name="filter[date_range]" id="filter_date_range" class="form-control select2">
                                <option value="w" selected> Tjedan </option>
                                <option value="m"> Mjesec </option>
                                <option value="y"> Godina </option>
                                <option value="r"> Razdoblje </option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row" id="date_range_wrapper" style="display:none;">
                    <label for="filter[date_from]">Razdoblje</label>
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group">
                            <input type="text" id="filter_date_from" name="filter[date_from]" placeholder="Od" class="form-control flatpickr set-cal-icon">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group">
                            <input type="text" id="filter_date_to" name="filter[date_to]" placeholder="Do" class="form-control flatpickr set-cal-icon">
                        </div>
                    </div>
                </div>

                <div class="text-center p-4 mt-4">
                    <button type="button" class="btn btn-outline-primary mr-3" data-bs-dismiss="modal">Odustani</button>
                    <button type="button" class="btn btn-primary ml-3" id="submit-filter" data-bs-dismiss="modal">Filtriraj</button>
                </div>
                <div class="text-center p-2">
                    <a class="purple-text ml-3" id="reset-filter" data-bs-dismiss="modal">Resetiraj</a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="single-stats" tabindex="-1" role="dialog" aria-labelledby="single-stats-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg filters-modal" role="document">
        <div class="modal-content">

            <button type="button" class="close" aria-label="Close" data-bs-dismiss="modal">
                <img class="float-right close-x-icon" src="/images/close-x.png">
            </button>
            <h5 class="modal-title"></h5>

            <div id="single-stats-body" class="modal-body">

            </div>
        </div>
    </div>
</div>


@stop

@push('css')
    @include('adminlte::libs.css.datatables')
    @include('adminlte::libs.css.select2')
@endpush
@section('footer')
    @include('layouts.error-modal')
@append

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    @include('adminlte::libs.js.datatables')
    @include('adminlte::libs.js.select2')
    @section('plugins.Chartjs', true)

    <script defer type="text/javascript" src="{{ asset('/js/tabswitcher.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/datatables-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/modal-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/date-de.min.js') }}"></script>

    <script type="text/javascript">
        // Chart.plugins.register({
        //     afterDatasetsDraw: function(chart) {
        //         var ctx = chart.ctx;

        //         chart.data.datasets.forEach(function(dataset, i) {
        //         var meta = chart.getDatasetMeta(i);
        //         if (!meta.hidden) {
        //             meta.data.forEach(function(element, index) {
        //             ctx.fillStyle = 'black';
        //             var fontSize = 16;
        //             var fontStyle = 'normal';
        //             var fontFamily = 'Helvetica Neue';
        //             ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

        //             var dataString = dataset.data[index].toString();

        //             ctx.textAlign = 'center';
        //             ctx.textBaseline = 'bottom';

        //             var padding = 5;
        //             var position = element.tooltipPosition();
        //             ctx.fillText(dataString, position.x, position.y - padding);
        //             });
        //         }
        //         });
        //     }
        // });

        $(document).ready(function() {
            function updateFooter(sum) {
                const footer = $('.statistics-table tfoot tr');
                // Use column indexes to update the correct footer cells
                $(footer).find('th').eq(1).html(sum.wo_open);
                $(footer).find('th').eq(2).html(sum.wo_closed);
                $(footer).find('th').eq(3).html(sum.days_open);
                $(footer).find('th').eq(4).html(sum.avg_days_closed.toFixed(2));
            }

            function getGraphData() {
                $.ajax({
                    url: route('statistics.get_graph', {
                        date_range: $('#filter_date_range').val(),
                        date_from: $('#filter_date_from').val(),
                        date_to: $('#filter_date_to').val()
                    }),
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        $('#main-graph-wrapper').html('').append($('<canvas>', {id: 'mainGraph', width: 400, height: 400}));
                        let mainGraph = new Chart(document.getElementById("mainGraph"), {
                            type: 'bar',
                            data: {
                                labels: response.graphStats.labels,
                                datasets: response.graphStats.datasets
                            },
                            options: {
                                tooltips: {
                                    callbacks: {
                                        label: function(tooltipItem, data) {
                                            const dataset = data.datasets[tooltipItem.datasetIndex];
                                            const value = tooltipItem.yLabel;
                                            return `${dataset.label}: ${Math.ceil(value)}`;
                                        }
                                    }
                                },
                                scales: {
                                    y: {
                                        beginAtZero: true,
                                        ticks: {
                                            stepSize: 1,
                                            precision: 0
                                        },
                                        title: {
                                            display: true,
                                            text: 'Broj naloga'
                                        }
                                    }
                                }
                            }
                        });

                        $('#avg-graph-wrapper').html('').append($('<canvas>', {id: 'avgGraph', width: 400, height: 400}));
                        let avgGraph = new Chart(document.getElementById("avgGraph"), {
                            type: 'pie',
                            data: {
                                labels: response.avgGraph.labels,
                                datasets: response.avgGraph.datasets
                            }
                        });

                        let i;
                        let u = response.userGraphs;
                        $('#single-graph-wrapper').html('');
                        Object.entries(u).forEach(([key, value]) => {
                            let $wrap = $('<div>', { class: 'col-4 user-graph-wrap' });
                            let $p = $('<p>').text(value.name);
                            let $canvas = $('<canvas>', {
                                class: 'user-graph',
                                id: value.gID,
                                width: 200,
                                height: 200,
                                dname: value.name
                            });
                            $wrap.append($p).append($canvas);
                            $('#single-graph-wrapper').append($wrap);
                            new Chart(document.getElementById(value.gID), value);
                        });
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX error:', status, error);
                    }
                });
            }
            getGraphData();

            async function generatePDF() {
                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF();

                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();
                const margin = 10;
                const gap = 5;

                const pxToMm = px => px * 25.4 / 96;

                let fromDate = new Date();
                let toDate = new Date();
                switch ($('#filter_date_range').val()) {
                    case 'w':
                    default:
                        fromDate.setDate(toDate.getDate() - 7);
                        break;
                    case 'm':
                        fromDate.setMonth(toDate.getMonth() - 1);
                        break;
                    case 'y':
                        fromDate.setFullYear(toDate.getFullYear() - 1);
                        break;
                    case 'r':
                        fromDate = new Date($('#filter_date_from').val());
                        toDate = new Date($('#filter_date_to').val());
                        break;
                }
                const fromString = `${String(fromDate.getDate()).padStart(2, '0')}.${String(fromDate.getMonth() + 1).padStart(2, '0')}.${fromDate.getFullYear()}.`;
                const toString = `${String(toDate.getDate()).padStart(2, '0')}.${String(toDate.getMonth() + 1).padStart(2, '0')}.${toDate.getFullYear()}.`;
                pdf.setFontSize(16);
                pdf.text('Statistika — od ' + fromString + ' do ' + toString, pageWidth / 2, 15, { align: "center" });

                const tableElement = document.getElementById("statsTable");
                const tableCanvas = await html2canvas(tableElement, { scale: 1 });
                const tableImage = tableCanvas.toDataURL("image/png");

                const tableHeightEstimate = pxToMm(tableCanvas.height);
                let currentY = margin;

                if (tableHeightEstimate > pageHeight) {
                    pdf.addPage();
                    currentY = margin;
                }

                pdf.addImage(tableImage, 'PNG', margin, currentY + 30, pageWidth - 2 * margin, 0);
                currentY += tableHeightEstimate + 30;

                const canvas1 = document.getElementById("mainGraph");
                const img1 = canvas1.toDataURL("image/png");
                const w1 = pxToMm(canvas1.width);
                const h1 = pxToMm(canvas1.height);

                const canvas2 = document.getElementById("avgGraph");
                const img2 = canvas2.toDataURL("image/png");
                const w2 = pxToMm(canvas2.width);
                const h2 = pxToMm(canvas2.height);

                const totalChartWidth = w1 + gap + w2;
                let scale = 0.8;
                if (totalChartWidth > pageWidth - 2 * margin) {
                    scale = (pageWidth - 2 * margin - gap) / totalChartWidth;
                }

                const scaledW1 = w1 * scale;
                const scaledH1 = h1 * scale;
                const scaledW2 = w2 * scale;
                const scaledH2 = h2 * scale;

                const startX = (pageWidth - (scaledW1 + gap + scaledW2)) / 2;

                if (currentY + Math.max(scaledH1, scaledH2) > pageHeight - margin) {
                    pdf.addPage();
                    currentY = margin;
                }

                pdf.text("Broj naloga po periodu", startX + scaledW1 / 2, currentY - 5, { align: "center" });
                pdf.addImage(img1, 'PNG', startX, currentY, scaledW1, scaledH1);
                pdf.text("Prosjek dana po nalogu", startX + scaledW1 + gap + scaledW2 / 2, currentY - 5, { align: "center" });
                pdf.addImage(img2, 'PNG', startX + scaledW1 + gap, currentY, scaledW2, scaledH2);

                const additionalCharts = [];
                $('.user-graph').each(function(){
                    additionalCharts.push({
                        id: $(this).attr('id'),
                        name: $(this).attr('dname')
                    });
                });

                const chartsPerRow = 3;
                const chartGap = 5;
                const totalGaps = (chartsPerRow - 1) * chartGap;
                const chartWidth = ((pageWidth - 2 * margin - totalGaps) / chartsPerRow) - 10;

                let x = margin;
                let y = currentY + scaledH1 + 20;
                for (let i = 0; i < additionalCharts.length; i++) {
                    const chartCanvas = document.getElementById(additionalCharts[i].id);
                    if (!chartCanvas) continue;

                    const chartImage = chartCanvas.toDataURL("image/png");

                    const aspectRatio = chartCanvas.height / chartCanvas.width;
                    const chartHeight = chartWidth * aspectRatio;

                    if (y + chartHeight + margin > pageHeight) {
                        pdf.addPage();
                        y = margin + 20;
                    }
                    
                    pdf.text(additionalCharts[i].name, x + (chartWidth / 2), y - 5, { align: "center" });
                    pdf.addImage(chartImage, 'PNG', x, y, chartWidth, chartHeight);
                    x += chartWidth + chartGap;
                    if ((i + 1) % chartsPerRow === 0) {
                        x = margin;
                        y += chartHeight + chartGap + margin;
                    }
                }

                pdf.save(`statistika_${fromString.replace('.', '_')}_${toString.replace('.', '_')}.pdf`);
            }

            async function addAdditionalCharts(pdf, chartsData, startY) {
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();
                const margin = 10;
                const chartsPerRow = 3;
                const chartGap = 5;
                const totalGaps = (chartsPerRow - 1) * chartGap;
                const chartWidth = ((pageWidth - 2 * margin - totalGaps) / chartsPerRow) - 10;
                const startX = (pageWidth - (scaledW1 + gap + scaledW2)) / 2;

                let x = margin;
                let y = startY;

                for (let i = 0; i < chartsData.length; i++) {
                    const chartCanvas = document.getElementById(chartsData[i].id);
                    if (!chartCanvas) continue;

                    const chartImage = chartCanvas.toDataURL("image/png");

                    const aspectRatio = chartCanvas.height / chartCanvas.width;
                    const chartHeight = chartWidth * aspectRatio;

                    if (y + chartHeight + margin > pageHeight) {
                        pdf.addPage();
                        y = margin;
                    }
                    
                    pdf.text(chartsData[i].name, startX + scaledW1 + gap + scaledW2 / 2, currentY - 5, { align: "center" });
                    pdf.addImage(chartImage, 'PNG', x, y, chartWidth, chartHeight);
                    x += chartWidth + chartGap;
                    if ((i + 1) % chartsPerRow === 0) {
                        x = margin;
                        y += chartHeight + chartGap;
                    }
                }
                return y;
            }

            $('#generatePDF').on('click', function() {
                generatePDF();
            });

            let statsModal = $('#single-stats');
            var statsModalBody = $('#single-stats-body');
            let filterModal = $('#statistics-filter');
            let filterModalBody = $('#statistics-filter-body');

            initializeSelect2("filter_user_id", "Odaberite servisere", filterModal, 5, true);

            $('#filter_date_range').on('change', function(){
                if ($(this).val() == 'r') {
                    $('#date_range_wrapper').show();
                } else {
                    $('#date_range_wrapper').hide();
                    $('#filter_date_from').val('');
                    $('#filter_date_to').val('');
                }
            });

            let dt_settings = {
                ajax: {
                    url: route('statistics.all'),
                    data: function (d) {
                        d.user_id = $('#filter_user_id').val();
                        d.date_range = $('#filter_date_range').val();
                        d.date_from = $('#filter_date_from').val();
                        d.date_to = $('#filter_date_to').val();
                    }
                },
                columns: JSON.parse('@json($columns)'),
                columnDefs: [
                    {
                        targets: "_all",
                        defaultContent: "--",
                        className: "dt-center",
                    },
                    {
                        targets: 4,
                        render: function ( data, type, row){
                            return data ? parseFloat(data).toFixed(2) : '--';
                        },
                        // createdCell: function (td, cellData, rowData, row, col) {
                        //     $(td).css('border-left', '10px solid ' + rowData.statusColor);
                        // }
                    },
                ],
                createdRow: function(row, data, dataIndex) {
                    $(row).attr('data-user-id', data.id);
                    $(row).on('click', function() {
                        $('#single').show();
                        $.ajax({
                            type: "GET",
                            url: route('statistics.single', {
                                id: data.id,
                                date_range: $('#filter_date_range').val(),
                                date_from: $('#filter_date_from').val(),
                                date_to: $('#filter_date_to').val()
                            }),
                            success: function(response){
                                $('#single .card-body').html(response.html);
                                statsModalBody.html(response.html);
                                getGraphData();
                                // statsModal.modal('show');
                            },
                            error: function(response) {
                                $('#errorModal').modal('show');
                            }
                        });
                    });
                },
                deferRender: true,
                autoWidth: false,
                buttons: [
                    {
                        text: '{!! trans('generic.buttons.filter') !!}',
                        className: 'btn btn-light',
                        action: () => filterModal.modal('show')
                    },
                ],
                rowCallback: function(row, data, dataIndex) {
                    if (dataIndex % 2 === 0) {
                        // even row
                    } else {
                        $(row).css('background-color', '#00000011')
                    };
                },
            }
            var table = generateDatatable(dt_settings, $('.statistics-table'));
            table.on('xhr.dt', function(e, settings, json, xhr){
                if (!$('.statistics-table tfoot').length) {
                    const columnCount = $('.statistics-table thead tr th').length;
                    let footerHtml = '<tfoot><tr>';
                    for (let i = 0; i < columnCount; i++) {
                        footerHtml += '<th></th>';
                    }
                    footerHtml += '</tr></tfoot>';

                    $('.statistics-table').append(footerHtml);
                }
                updateFooter(json.sum);
            });

            $(document).on('click', '#submit-filter', function (){
                table.ajax.reload();
                getGraphData();
            })

            $(document).on('click', '#reset-filter', function (){
                filterModal.find('select').val(null).trigger('change'); // Reset select2 values
                filterModal.find('input[type="text"]').val(''); // Reset input values
                table.ajax.reload();
                getGraphData();
            })
        });
    </script>
@endpush