@extends('layouts.app', [
    'navClass' => 'navbar-light bg-secondary',
    'parentSection' => 'laravel',
    'elementName' => 'client-management'
])

@section('title', 'Relatório de Tarefas |')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@section('content')
    @component('layouts.headers.auth')
        @component('layouts.headers.breadcrumbs')
            @slot('title')
            Relatório de Tarefas
            @endslot

            <li class="breadcrumb-item"><a class="text-default" href="{{ route('sales.index') }}">Minhas Tarefas</a></li>
        @endcomponent
    @endcomponent

    <div class="container-fluid mt--6">
        {{-- Linha 1 --}}
        <div class="row">
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card  mb-4">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tarefas Concluídas</p>
                                    <h3 class="font-weight-bolder">
                                       {{ $tasks_done->count() }}
                                    </h3>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center text-white rounded-circle">
                                    <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card  mb-4">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tarefas Pendentes</p>
                                    <h3 class="font-weight-bolder">
                                        {{ $tasks_pending->count()  }}
                                    </h3>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-white text-center rounded-circle">
                                    <i class="ni ni-calendar-grid-58 text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card  mb-4">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Qtde de Tarefas por Usuários</p>
                                    <h3 class="font-weight-bolder">
                                        @if ($tasks_pending->count() > 0)
                                        {{ round($tasks_pending->count() / $users->count(),2) }}
                                        @else
                                        0
                                        @endif
                                    </h3>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-white text-center rounded-circle">
                                    <i class="ni ni-trophy text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card  mb-4">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-9">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Tarefas Em Andamento</p>
                                    <h3 class="font-weight-bolder">
                                        {{ $tasks_ongoing->count() }}
                                    </h3>
                                </div>
                            </div>
                            <div class="col-3 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-white text-center rounded-circle">
                                    <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        {{-- Linha 2 --}}
        <div>
            <div class="card-deck flex-column flex-xl-row">
                <div class="card">
                    <div class="card-header bg-transparent">
                        <h6 class="text-muted text-uppercase ls-1 mb-1">Tarefas</h6>
                        <h2 class="h3 mb-0">Tarefas Concluídas por Mês</h2>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        <div class="chart">
                            <!-- Chart wrapper -->
                            <canvas id="chart-task" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header bg-transparent">
                        <div class="row align-items-center">
                            <div class="col">
                                <h6 class="text-uppercase text-muted ls-1 mb-1">Tarefas</h6>
                                <h2 class="h3 mb-0">Concluídas por Usuário</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        <div class="chart">
                            <canvas id="chart-user" class="chart-canvas"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
@endpush

@push('js')
    <script src="{{ asset('argon') }}/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.min.js"></script>
    <script src="{{ asset('argon') }}/vendor/chart.js/dist/Chart.extension.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.min.js" integrity="sha512-mlz/Fs1VtBou2TrUkGzX4VoGvybkD9nkeXWJm3rle0DPHssYYx4j+8kIS15T78ttGfmOjH0lLaBXGcShaVkdkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-buttons1');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/

            var buttons = [
                {extend: 'copy', text: 'Copiar', exportOptions: {columns: [0,1]}, messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Cliente"},
                {extend: 'print', text: 'PDF', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Cliente"},
                {extend: 'excelHtml5', text: 'Excel', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Cliente"}
                ];

            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                lengthChange: !1,
                dom: 'Bfrtip',
                buttons: buttons,
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-buttons2');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/

            var buttons = [
                {extend: 'copy', text: 'Copiar', exportOptions: {columns: [0,1]}, messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Fornecedor"},
                {extend: 'print', text: 'PDF', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Fornecedor"},
                {extend: 'excelHtml5', text: 'Excel', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Fornecedor"}
                ];

            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                lengthChange: !1,
                dom: 'Bfrtip',
                buttons: buttons,
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-buttons3');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/

            var buttons = [
                {extend: 'copy', text: 'Copiar', exportOptions: {columns: [0,1]}, messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Vendedor"},
                {extend: 'print', text: 'PDF', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Vendedor"},
                {extend: 'excelHtml5', text: 'Excel', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Vendedor"}
                ];

            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                lengthChange: !1,
                dom: 'Bfrtip',
                buttons: buttons,
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
    <script>
        var DatatableButtons = (function() {
        // Variables

        var $dtButtons = $('#datatable-buttons4');


        // Methods

        function init($this) {

            // For more options check out the Datatables Docs:
            // https://datatables.net/extensions/buttons/

            var buttons = [
                {extend: 'copy', text: 'Copiar', exportOptions: {columns: [0,1]}, messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Produto"},
                {extend: 'print', text: 'PDF', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Produto"},
                {extend: 'excelHtml5', text: 'Excel', exportOptions: {columns: [0,1]},  messageTop: 'Porto Exclusivo - Travel Together', title: "Vendas por Produto"}
                ];

            // Basic options. For more options check out the Datatables Docs:
            // https://datatables.net/manual/options

            var options = {

                lengthChange: !1,
                dom: 'Bfrtip',
                buttons: buttons,
                // select: {
                // 	style: "multi"
                // },
                language: {
                    paginate: {
                        previous: "<i class='fas fa-angle-left'>",
                        next: "<i class='fas fa-angle-right'>"
                    },
                    search: "Busca rápida:",
                    emptyTable: "Nenhum registro encontrado",
                    info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 até 0 de 0 registros",
                    infoFiltered: "(Filtrados de _MAX_ registros)",
                    infoThousands: ".",
                    loadingRecords: "Carregando...",
                    processing: "Processando...",
                    zeroRecords: "Nenhum registro encontrado",
                    lengthMenu: "Exibir _MENU_ registros",
                    decimal: ",",
                },
                info: "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            };

            // Init the datatable

            var table = $this.on('init.dt', function() {
                $('.dt-buttons .btn').removeClass('btn-secondary').addClass('btn-sm btn-default');
            }).DataTable(options);
        }


        // Events

        if ($dtButtons.length) {
            init($dtButtons);
        }

        })();
    </script>
    <script>
        var Charts = (function() {

        // Variable
        var $toggle = $('[data-toggle="chart"]');
        var mode = 'light'; //(themeMode) ? themeMode : 'light';
        var fonts = {
            base: 'Open Sans'
        }

        // Colors
        var colors = {
            gray: {
                100: '#f6f9fc',
                200: '#e9ecef',
                300: '#dee2e6',
                400: '#ced4da',
                500: '#adb5bd',
                600: '#8898aa',
                700: '#525f7f',
                800: '#32325d',
                900: '#212529'
            },
            theme: {
                'default': '#172b4d',
                'primary': '#5e72e4',
                'secondary': '#f4f5f7',
                'info': '#11cdef',
                'success': '#2dce89',
                'danger': '#f5365c',
                'warning': '#fb6340'
            },
            black: '#12263F',
            white: '#FFFFFF',
            transparent: 'transparent',
        };


        // Methods

        // Chart.js global options
        function chartOptions() {

            // Options
            var options = {
                defaults: {
                    global: {
                        responsive: true,
                        maintainAspectRatio: false,
                        defaultColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
                        defaultFontColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
                        defaultFontFamily: fonts.base,
                        defaultFontSize: 13,
                        layout: {
                            padding: 0
                        },
                        legend: {
                            display: false,
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 16
                            }
                        },
                        elements: {
                            point: {
                                radius: 0,
                                backgroundColor: colors.theme['primary']
                            },
                            line: {
                                tension: .4,
                                borderWidth: 4,
                                borderColor: colors.theme['primary'],
                                backgroundColor: colors.transparent,
                                borderCapStyle: 'rounded'
                            },
                            rectangle: {
                                backgroundColor: colors.theme['warning']
                            },
                            arc: {
                                backgroundColor: colors.theme['primary'],
                                borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
                                borderWidth: 4
                            }
                        },
                        tooltips: {
                            enabled: true,
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    doughnut: {
                        cutoutPercentage: 83,
                        legendCallback: function(chart) {
                            var data = chart.data;
                            var content = '';

                            data.labels.forEach(function(label, index) {
                                var bgColor = data.datasets[0].backgroundColor[index];

                                content += '<span class="chart-legend-item">';
                                content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
                                content += label;
                                content += '</span>';
                            });

                            return content;
                        }
                    }
                }
            }

            // yAxes
            Chart.scaleService.updateScaleDefaults('linear', {
                gridLines: {
                    borderDash: [2],
                    borderDashOffset: [2],
                    color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
                    drawBorder: false,
                    drawTicks: false,
                    lineWidth: 0,
                    zeroLineWidth: 0,
                    zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
                    zeroLineBorderDash: [2],
                    zeroLineBorderDashOffset: [2]
                },
                ticks: {
                    beginAtZero: true,
                    padding: 10,
                    callback: function(value) {
                        if (!(value % 10)) {
                            return value
                        }
                    }
                }
            });

            // xAxes
            Chart.scaleService.updateScaleDefaults('category', {
                gridLines: {
                    drawBorder: false,
                    drawOnChartArea: false,
                    drawTicks: false
                },
                ticks: {
                    padding: 20
                },
                maxBarThickness: 10
            });

            return options;

        }

        // Parse global options
        function parseOptions(parent, options) {
            for (var item in options) {
                if (typeof options[item] !== 'object') {
                    parent[item] = options[item];
                } else {
                    parseOptions(parent[item], options[item]);
                }
            }
        }

        // Push options
        function pushOptions(parent, options) {
            for (var item in options) {
                if (Array.isArray(options[item])) {
                    options[item].forEach(function(data) {
                        parent[item].push(data);
                    });
                } else {
                    pushOptions(parent[item], options[item]);
                }
            }
        }

        // Pop options
        function popOptions(parent, options) {
            for (var item in options) {
                if (Array.isArray(options[item])) {
                    options[item].forEach(function(data) {
                        parent[item].pop();
                    });
                } else {
                    popOptions(parent[item], options[item]);
                }
            }
        }

        // Toggle options
        function toggleOptions(elem) {
            var options = elem.data('add');
            var $target = $(elem.data('target'));
            var $chart = $target.data('chart');

            if (elem.is(':checked')) {

                // Add options
                pushOptions($chart, options);

                // Update chart
                $chart.update();
            } else {

                // Remove options
                popOptions($chart, options);

                // Update chart
                $chart.update();
            }
        }

        // Update options
        function updateOptions(elem) {
            var options = elem.data('update');
            var $target = $(elem.data('target'));
            var $chart = $target.data('chart');

            // Parse options
            parseOptions($chart, options);

            // Toggle ticks
            toggleTicks(elem, $chart);

            // Update chart
            $chart.update();
        }

        // Toggle ticks
        function toggleTicks(elem, $chart) {

            if (elem.data('prefix') !== undefined || elem.data('prefix') !== undefined) {
                var prefix = elem.data('prefix') ? elem.data('prefix') : '';
                var suffix = elem.data('suffix') ? elem.data('suffix') : '';

                // Update ticks
                $chart.options.scales.yAxes[0].ticks.callback = function(value) {
                    if (!(value % 10)) {
                        return prefix + value + suffix;
                    }
                }

                // Update tooltips
                $chart.options.tooltips.callbacks.label = function(item, data) {
                    var label = data.datasets[item.datasetIndex].label || '';
                    var yLabel = item.yLabel;
                    var content = '';

                    if (data.datasets.length > 1) {
                        content += '<span class="popover-body-label mr-auto">' + label + '</span>';
                    }

                    content += '<span class="popover-body-value">' + prefix + yLabel + suffix + '</span>';
                    return content;
                }

            }
        }


        // Events

        // Parse global options
        if (window.Chart) {
            parseOptions(Chart, chartOptions());
        }

        // Toggle options
        $toggle.on({
            'change': function() {
                var $this = $(this);

                if ($this.is('[data-add]')) {
                    toggleOptions($this);
                }
            },
            'click': function() {
                var $this = $(this);

                if ($this.is('[data-update]')) {
                    updateOptions($this);
                }
            }
        });


        // Return

        return {
            colors: colors,
            fonts: fonts,
            mode: mode
        };

        })();
    </script>
    <script>
        var SalesChart = (function() {

        // Variables
        var $chart = $('#chart-task');
        var months = @json($months);
        var task = @json($task_array);
            // Methods
            function init($this) {
                var salesChart = new Chart($this, {
                    type: 'line',
                    options: {
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    color: Charts.colors.gray[200],
                                    zeroLineColor: Charts.colors.gray[200]
                                },
                                ticks: {

                                }
                            }]
                        }
                    },
                    data: {
                        labels: months,
                        datasets: [{
                            label: 'Tarefas',
                            data: task
                        }]
                    }
                });

                // Save to jQuery object

                $this.data('chart', salesChart);

            };
            // Events

            if ($chart.length) {
                init($chart);
            }
            })();
    </script>
    <script>
        var BarsChart = (function() {
        //
        // Variables
        //

        var $chart = $('#chart-user');
        var user = @json($users_arr);
        var task_user = @json($array_user);

        //
        // Methods
        //

        // Init chart
        function initChart($chart) {

            // Create chart
            var ordersChart = new Chart($chart, {
                type: 'bar',
                data: {
                    labels: user,
                    datasets: [{
                        label: 'Tarefas',
                        data: task_user
                    }]
                }
            });

            // Save to jQuery object
            $chart.data('chart', ordersChart);
        }


        // Init chart
        if ($chart.length) {
            initChart($chart);
        }

        })();
    </script>
@endpush