@extends('layout.master',['activePage' => 'dash', 'menuParent' => 'dash', 'titlePage' => __('Dashboard')])

@push('plugin-styles')
{!! Html::style('assets/css/loader.css') !!}
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('plugins/apex/apexcharts.css') !!}


@endpush

@section('content')
<br>
<!--  Navbar Starts / Breadcrumb Area Starts -->
<div class="sub-header-container">
    <header class="header navbar navbar-expand-sm ">
        <ul class="navbar-nav flex-row">
            <li>
                <div class="page-header">
                    <nav class="breadcrumb-one" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Catalogos')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('DASHBOARD')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>
<!--  Navbar Ends / Breadcrumb Area Ends -->
<div class="layout-px-spacing mt-2">
    <div class="container-fluid p-0">
        <div class="card">
            <div class="card-body">
                <div class="w-100">
                    <label class="font-15 font-weight-bold">Periodo a filtrar</label>
                    <div class="row">
                        <div class="col-md-2">
                            <label>Año:</label>
                            <input id="filtro_anio" class="form-control" type="number">
                        </div>
                        <div class="col-md-2">
                            <label>Mes:</label>
                            <select class="form-control" id="filtro_mes">
                                <option selected="selected" value="0">-Todos-</option>
                                @foreach($data['meses'] as $sc)
                                <option value="{{$sc->id}}"> {{$sc->descripcion}}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-md-3">
                            <label>Sucursal:</label>
                            <select class="form-control" id="filtro_sucursal">
                                <option selected="selected" value="0">-Todas-</option>
                                @foreach($data['sucursales'] as $sc)
                                <option value="{{$sc->id}}"> {{$sc->descripcion}}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary mt-4" id="btn_filtrar" onclick="getComparativa()">Filtrar</button>
                        </div>
                    </div>
                </div>
                <div class="w-100 mt-2">
                    <!-- <div class="row">
                        <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                            <h5></h5>
                        </div>
                    </div> -->
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <div id="content_1" class="tabcontent">
                                <div id="comparativaChartComprasPagos"></div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <div id="content_1" class="tabcontent">
                                <div id="comparativaChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
{!! Html::script('assets/js/loader.js') !!}
{!! Html::script('plugins/flatpickr/flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
{!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
{!! Html::script('plugins/apex/apexcharts.min.js') !!}
{!! Html::script('assets/js/charts/apex-chart.js') !!}

@push('custom-scripts')
<script>
    $(document).ready(function() {


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        const xmas = new Date();
        const year = xmas.getFullYear()
        const month = xmas.getMonth()

        $('#filtro_anio').val(year);
        $('#filtro_mes').val(month + 1).trigger('change');
        getComparativa()

    });


    function getComparativa() {

        $.ajax({
                url: '{{ url("home/get_compartiva")}}',
                type: 'POST',
                dataType: 'json',
                data: {
                    anio: $('#filtro_anio').val(),
                    mes: $('#filtro_mes option:selected').val(),
                    sucursal: $('#filtro_sucursal option:selected').val(),
                },
            })
            .done(function(resp) {

                var comparativaChart = document.querySelector("#comparativaChart");

                if (document.querySelector("#comparativaChart").hasChildNodes()) {
                    document.querySelector("#comparativaChart").innerHTML = '';
                }

                var data_con = resp.data['estadisticas'];
                var labels = resp.data['estadisticas']['conceptos'];

                var comparativaChartOptions = {
                    series: [{
                            name: 'Periodo ' + $('#filtro_mes option:selected').text() + ' - ' + $('#filtro_anio').val(),
                            data: data_con['importes'],

                        },
                        {
                            name: 'Periodo anterior',
                            data: data_con['importes_anteriores']
                        },
                    ],
                    colors: ['#0b294d', '#ffc107'],
                    chart: {
                        type: 'bar',
                        fontFamily: 'Poppins, sans-serif',
                        height: 400,
                        zoom: {
                            enabled: false
                        }
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '35%',
                            endingShape: 'rounded',
                        },
                    },
                    dataLabels: {
                        enabled: false,
                    },
                    legend: {
                        position: 'bottom',
                        offsetX: 0,
                        offsetY: 0,
                        itemMargin: {
                            horizontal: 5,
                            vertical: 5
                        },
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: labels,
                        labels: {
                            show: true,
                            style: {
                                colors: [],
                                fontSize: '10px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                        },
                    },
                    yaxis: {
                        labels: {
                            show: true,
                            style: {
                                colors: [],
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            formatter: function(val) {
                                return formatter.format(val)
                            },
                        },
                    },
                    title: {
                        text: 'Comparativa conceptos',
                        align: 'center',
                        floating: true,
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                        },
                        offsetY: 0

                    },
                    // fill: {
                    //     colors: ['#0b294d', '#ffc107']
                    // },
                    // markers: {
                    //     colors: ['#0b294d', '#ffc107']
                    // },
                    tooltip: {
                        enabled: true,
                        shared: true,
                        style: {
                            fontSize: '13px',
                        },
                        onDatasetHover: {
                            highlightDataSeries: false,
                        },
                        y: {
                            formatter: function(val) {
                                return formatter.format(val)
                            },
                        },
                        x: {
                            show: true,
                            formatter: function(val) {
                                return val
                            },
                        },
                    }
                };

                var comparativaChart = new ApexCharts(
                    comparativaChart,
                    comparativaChartOptions
                );

                var comparativaChartComprasPagos = document.querySelector("#comparativaChartComprasPagos");

                if (document.querySelector("#comparativaChartComprasPagos").hasChildNodes()) {
                    document.querySelector("#comparativaChartComprasPagos").innerHTML = '';
                }

                var data_compras = resp.data['compras_pagos'];
                var labels_compras = resp.data['compras_pagos']['conceptos'];

                var comparativaChartComprasPagosOptions = {
                    series: [{
                            name: 'Periodo ' + $('#filtro_mes option:selected').text() + ' - ' + $('#filtro_anio').val(),
                            data: data_compras['importes'],

                        },
                        {
                            name: 'Periodo anterior',
                            data: data_compras['importes_anteriores']
                        },
                    ],
                    colors: ['#0b294d', '#ffc107'],
                    chart: {
                        type: 'bar',
                        fontFamily: 'Poppins, sans-serif',
                        height: 400,
                        zoom: {
                            enabled: false
                        },
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '35%',
                            endingShape: 'rounded',
                        },
                    },
                    dataLabels: {
                        enabled: false,
                    },
                    legend: {
                        position: 'bottom',
                        offsetX: 0,
                        offsetY: 0,
                        itemMargin: {
                            horizontal: 5,
                            vertical: 5
                        },
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['transparent']
                    },
                    xaxis: {
                        categories: labels_compras,
                        labels: {
                            show: true,
                            style: {
                                colors: [],
                                fontSize: '10px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                        },
                    },
                    yaxis: {
                        labels: {
                            show: true,
                            style: {
                                colors: [],
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 400,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            formatter: function(val) {
                                return formatter.format(val)
                            },
                        },
                    },
                    title: {
                        text: 'Compras y pagos',
                        align: 'center',
                        floating: true,
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                        },
                        offsetY: 0

                    },
                    // fill: {
                    //     colors: ['#0b294d', '#ffc107']
                    // },
                    // markers: {
                    //     colors: ['#0b294d', '#ffc107']
                    // },
                    tooltip: {
                        enabled: true,
                        shared: true,
                        style: {
                            fontSize: '13px',
                        },
                        onDatasetHover: {
                            highlightDataSeries: false,
                        },
                        y: {
                            formatter: function(val) {
                                return formatter.format(val)
                            },
                        },
                        x: {
                            show: true,
                            formatter: function(val) {
                                return val
                            },
                        },
                    }
                };

                var comparativaChartComprasPagos = new ApexCharts(
                    comparativaChartComprasPagos,
                    comparativaChartComprasPagosOptions
                );


                comparativaChartComprasPagos.render();
                comparativaChart.render();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    };
</script>
@csrf

@endpush