@extends('layouts.main')

@section('content')
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-warning">
            <p>{{ $message }}</p>
        </div>
    @endif

    @role('Admin')
        @include('dashboard.Admin')
    @endrole

    @role('Operaciones')
        @include('dashboard.Operaciones')
    @endrole

    @role('Planificacion')
        @include('dashboard.Planificacion')
    @endrole

    @role('Cliente')
        @include('dashboard.Cliente')
    @endrole

    @role('Facturacion')
        @include('dashboard.Facturacion')
    @endrole

    @role('Taller')
        @include('dashboard.Taller')
    @endrole

    @role('Tecnico')
        @include('dashboard.Tecnico')
    @endrole

    @role('Asesor')
        @include('dashboard.Vendedor')
    @endrole

    @role('Tienda')
        @include('dashboard.Recepcion')
    @endrole
@endsection

@section('page-styles')
    @role('Planificacion')
        @mapstyles

        <style>
            .gnw-map-service {
                height: 200px;
                width: 200px;
            }

        </style>
    @endrole

@endsection

@section('page-scripts')
    <script>
        $(function() {
            $('.detailClick').click(function () {
                console.log('click');
                $(this).children('.check').children('input').prop('checked', true);

            });

            $(".parcialDetail").change(function(){
                var checked = $(this).is(':checked');
                var detail = $(this).val();

                if(checked){
                    $(this).closest("tr").css("background-color", "#FFEF96");
                    $.get("/parcial/"+detail+"/1", {}, function(data){
                        toastr.success('Entrega parcial', 'Entrega parcial marcada con éxito')
                    });
                }else{
                    $(this).closest("tr").css("background-color", "#eff3f7");
                    $.get("/parcial/"+detail+"/0", {}, function(data){
                        toastr.warning('Entrega parcial', 'Entrega parcial desmarcada con éxito')
                    });
                }
            });

            $(".checkRecharge").click(function (){
                var checked = $(this).is(':checked');

                var dr = $(this).data('dr');
                var dre = $(this).data('dre');

                if(checked){
                    $("#" + dr).prop("disabled", false);
                    $("#" + dre).prop("disabled", false);
                }else{
                    $("#" + dr).prop("disabled", true);
                    $("#" + dre).prop("disabled", true);
                }
            });

            $(".dateRe").change(function (){
                var date = $(this).val();
                var exp = $(this).data('exp');

                d = new Date(date);

                $("#" + exp).val((d.getFullYear()+1) + '-' + ((d.getMonth()+1).toString().length == 1 ? '0' : '') + (d.getMonth()+1) + '-' + (d.getDate().toString().length == 1 ? '0' : '') + d.getDate());
            });

            $('.searchRefill').on('keyup', function () {
                var query = $(this).val();
                var tableId = $(this).data('table');
                var detail = $(this).data('detail');

                $.ajax({
                    url: '{{ route("refills.search") }}',
                    type: 'GET',
                    data: { query: query, detail: detail },
                    success: function(response) {
                        $('#'+tableId).html(response);
                    }
                });
            });

            $(".confirm-invoiced").click(function () {
                let r = false;
                Swal.fire({
                    title: '¿Desea marcar como facturado?',
                    text: "Valide si todo esta correcto",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        r = true;
                    }else {
                        r = false;
                    }
                });

                return r;
            });

            $("#assignTecnical").submit(function (e) {
                $("#listAssign").html("");

                $(".assign").each(function () {
                    if($(this).is(':checked')){
                        $("#listAssign").append('<input type="hidden" name="assign[]" value="' + $(this).val() + '">');
                    }
                });

                $(".assignOrder").each(function () {
                    if($(this).is(':checked')){
                        $("#listAssignOrder").append('<input type="hidden" name="assignOrder[]" value="' + $(this).val() + '">');
                    }
                });
            });

            $(".assignOrder").click(function () {
                var checked = $(this).is(':checked');
                var cClass = $(this).data('all');

                if(checked){
                    $("." + cClass).each(function () {
                        $(this).attr('checked', true);
                    });
                }else{
                    $("." + cClass).each(function () {
                        $(this).attr('checked', false);
                    });
                }
            });
        } );

        function addDetail(detail, id, name, max, price) {

            @php
                $html = view('refill.selectAction', ['actions' => $actions ?? []])->render();
            @endphp

            $("#table-refills-body-" + detail).append(
                '<tr>' +
                '<td>' + name + '</td>' +
                '<td> $ ' + price + '</td>' +
                '<td>' +
                '<input type="number" class="form-control" name="quantity[]" min="1" max="' + max + '" required>' +
                '<input type="hidden" name="refill[]" value="' + id + '">' +
                '</td>' +
                '<td>' +
                '{!! $html !!}' +
                '</td>' +
                '<td>' +
                'Pendiente' +
                '</td>' +
                '<td>' +
                '<button type="button" class="btn btn-danger" onclick="removeDetail(this)">Eliminar</button>' +
                '</td>' +
                '</tr>'
            )

            $("#btn-approved-" + detail).html("Solicitar aprobación");

            console.log('addDetail');
            console.log("#table-refills-body-" + detail);
            return false;
        }

        function removeDetail(e) {
            $(e).parent().parent().remove();
        }

        @role('Admin|Operaciones|Planificacion')
            function indexbar() {
                var optionsBar = {
                    chart: {
                        height: 249,
                        responsive: 'true',
                        type: 'bar',
                        toolbar: {
                            show: false,
                        },
                        fontFamily: 'Nunito, sans-serif',
                    },
                    colors: [myVarVal, '#f93a5a', '#f7a556'],
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: false
                            },
                            columnWidth: '42%',
                            endingShape: 'rounded',
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    grid: {
                        show: true,
                        borderColor: '#f3f3f3',
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        endingShape: 'rounded',
                        colors: ['transparent'],
                    },
                    responsive: [{
                        enable: 'true',
                        breakpoint: 576,
                        options: {
                            stroke: {
                                show: true,
                                width: 1,
                                endingShape: 'rounded',
                                colors: ['transparent'],
                            },
                        },

                    }],
                    series: [{
                        name: 'Solicitado',
                        data: {{json_encode($ordersByMonth['requested'])}}
                    }, {
                        name: 'En taller',
                        data: {{json_encode($ordersByMonth['workshop'])}}
                    }, {
                        name: 'Facturado',
                        data: {{json_encode($ordersByMonth['invoiced'])}}
                    }],
                    xaxis: {
                        categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dic'],
                    },
                    fill: {
                        opacity: 1
                    },
                    legend: {
                        show: false,
                        floating: true,
                        position: 'top',
                        horizontalAlign: 'left',
                    },

                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return " " + val + " ordenes"
                            }
                        }
                    }
                }
                document.querySelector('#bar').innerHTML = ""
                new ApexCharts(document.querySelector('#bar'), optionsBar).render();
            }

            function salesbar() {

                var options = {
                    series: [{
                        "name": "Ventas",
                        "data": {{json_encode($dataSales)}}
                    }],
                    chart: {
                        height: 320,
                        type: 'bar',
                    },
                    grid: {
                        borderColor: '#f2f5f7',
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 10,
                            dataLabels: {
                                position: 'top', // top, center, bottom
                            },
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: function (val) {
                            return val + "";
                        },
                        offsetY: -20,
                        style: {
                            fontSize: '12px',
                            colors: ["#8c9097"]
                        }
                    },
                    colors: ["#0162e8"],
                    xaxis: {
                        categories: {!!  json_encode($seriesSales) !!},
                        position: 'top',
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        },
                        crosshairs: {
                            fill: {
                                type: 'gradient',
                                gradient: {
                                    colorFrom: '#D8E3F0',
                                    colorTo: '#BED1E6',
                                    stops: [0, 100],
                                    opacityFrom: 0.4,
                                    opacityTo: 0.5,
                                }
                            }
                        },
                        tooltip: {
                            enabled: true,
                        },
                        labels: {
                            show: true,
                            style: {
                                colors: "#8c9097",
                                fontSize: '11px',
                                fontWeight: 600,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                        }
                    },
                    yaxis: {
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false,
                        },
                        labels: {
                            show: false,
                            formatter: function (val) {
                                var num = parseFloat(val); // Convertir a float
                                num = num.toFixed(1);
                                return "$" + num;
                            }
                        }

                    },
                    title: {
                        text: 'Ventas',
                        floating: true,
                        offsetY: 330,
                        align: 'center',
                        style: {
                            color: '#444'
                        }
                    }
                };

                document.querySelector('#barSales').innerHTML = ""
                new ApexCharts(document.querySelector('#barSales'), options).render();
            }

            $(function(){
                if(document.querySelector('#bar') !== null){
                    indexbar();
                    salesbar();
                }
            });
        @endrole

        @role('Recepcion|Planificacion')
        $(function(){
            $("#printCards").click(function (){

                var count = 0;

                $(".printCard").each(function(){
                    if($(this).prop('checked')){
                        count++;

                        $("#printCardFrm").append('<input type="hidden" name="orders[]" value="' + $(this).val() + ' ">');
                    }
                });

                if(count == 0){
                    alert("Seleccione una orden");
                    return;
                }

                $("#printCardFrm").submit();

            });
        });
        @endrole

        $(function(){
            $(".external-check").change(function () {
                var enabled = $(this).data('enabled');
                var checked = $(this).is(':checked');

                if(checked){
                    $("#" + enabled).show("slow");
                }else{
                    $("#" + enabled).hide("slow");
                }
            });
        });
    </script>

    @role('Planificacion')
        @mapscripts

        <script>
            $(".saveDelivery").click(function(){
                var frm = $(this).data('frm');
                var order = $(this).data('order');
                var data = $("#"+frm).serialize();

                $.post("{{ route('managements.store.dashboard') }}", data, function(){
                    $("#modalDelivery"+order).modal("hide");
                    toastr.success('Entrega', 'Entrega almacenada con éxito');

                    $("#btnDelivery-"+order).addClass('btn-success');
                    $("#btnDelivery-"+order).removeClass('btn-primary');
                });
            });
        </script>
    @endrole
@endsection