@extends('layouts.app')
@php setlocale(LC_TIME, 'pt_BR', 'pt_BR.utf-8', 'pt_BR.utf-8', 'portuguese'); @endphp

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.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') }}">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/animate.css/animate.min.css">

<style>
    .white-space {
        white-space: pre-wrap !important;
    }
    
    .swal2-popup .swal2-image {
    max-width:400px !important;
}
</style>

@section('title', 'Estação')
@section('content')
<div class="container-fluid mt-2">
    <div class="row">
        <div class="col-xl-4 order-xl-2">
            <div class="card card-profile">
                <img src="https://argon-dashboard-pro-laravel.creative-tim.com/argon/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
                <div class="row justify-content-center">
                    <div class="col-lg-3 order-lg-2">
                        <div class="card-profile-image">
                            <a href="#">
                                <img src="{{asset('argon/img/theme/team-4-800x800.jpg')}}" class="rounded-circle">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
                    <div class="d-flex justify-content-between">
                        @can('coordenador-reman')
                        <a href="#" class="btn btn-sm btn-info mr-4" data-toggle="modal" data-target="#ModalFuncionario">Trocar</a>
                        @endcan
                        <a href="#" class="btn btn-sm btn-default float-right d-none" disable>Menssagem</a>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <input type="hidden" id="total_dia" value="{{$vendas_dia->total}}">
                    <input type="hidden" id="meta_dia" value="{{$meta_dia}}">
                    <div class="text-center">
                        <br>
                        <h5 class="h3">
                            {{$funcionario->name}}<span class="font-weight-light"></span>
                        </h5>
                    </div>
                    <div class="row">
                        <div class="col border rounded">
                            <div class="card-profile-stats d-flex justify-content-center">
                                <div>
                                    <span class="heading">{{$num_vendas}}</span>
                                    <span class="description">Vendas</span>
                                </div>
                            </div>
                        </div>
                        <div class="col border rounded">
                            <div class="card-profile-stats d-flex justify-content-center">
                                <div>
                                    <span class="heading">{{$num_clientes}}</span>
                                    <span class="description">Clientes</span>
                                </div>
                            </div>
                        </div>
                        <div class="col border rounded">
                            <div class="card-profile-stats d-flex justify-content-center">
                                <div>
                                    <span class="heading">{{$num_telemarketing}}</span>
                                    <span class="description">Telemarketing</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="h5 font-weight-300">
                            <i class="ni location_pin mr-2"></i>
                        </div>
                        <div class="h5 mt-4">
                            <i class="ni business_briefcase-24 mr-2"></i>{{$funcionario->nome_empresa_usuario}}
                        </div>
                        <div>
                            <i class="ni education_hat mr-2"></i>{{$funcionario->nome_municipio_usuario}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Progress track -->
            <div class="card">
                <!-- Card header -->
                <div class="card-header">
                    <!-- Title -->
                    <div class="row">
                        <div class="col-md-8">
                            <sapn class="h3 mb-0">Tarefas</s>
                        </div>
                        <div class="col-md-4 text-right">
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#ModalTarefas">adicionar</button>
                        </div>
                    </div>
                </div>
                <!-- Card body -->
                <div class="card-body p-0">
                    <div class="timeline timeline-one-side" data-timeline-content="axis" data-timeline-axis-style="dashed">
                        <!-- List group -->
                        <ul class="list-group list-group-flush timeline-block" data-toggle="checklist">
                            @foreach($tarefas as $tarefa)
                            <li class="checklist-entry list-group-item flex-column align-items-start py-2 px-4">
                                <div class="timeline timeline-one-side" data-timeline-content="axis" data-timeline-axis-style="dashed">
                                    <div class="timeline-block">
                                        <span class="timeline-step 
                                        @if($tarefa->tipo_tarefa == 'retorno' )badge-warning
                                        @else
                                        @endif
                                        ">
                                            @if($tarefa->tipo_tarefa == 'retorno' )
                                            <i class="fas fa-phone"></i>
                                            @else
                                            @endif
                                        </span>
                                        <div class="timeline-content" style="max-width:100% !important">
                                            <div class="d-flex justify-content-between checklist-item 

                                            @if($tarefa->tipo_tarefa == 'retorno' )
                                            checklist-item-danger
                                            @else
                                            @endif

                                            @if($tarefa->status_tarefa == 'realizado' )
                                            checklist-item-checked
                                            @else
                                            @endif
                                            ">
                                                <div class="checklist-info">
                                                    <span class="text-muted text-sm font-weight-bold">{{$tarefa->titulo_tarefa}}</span><br>
                                                    <h6 class="text-sm mt-1 mb-0">{{$tarefa->descricao_tarefa}}</h6>
                                                    <small class="text-muted"> <i class="fas fa-clock mr-1"></i> {{$tarefa->data_tarefa}} </small>
                                                </div>

                                                <div class="custom-control custom-checkbox">
                                                    <label class="custom-toggle custom-toggle-success">
                                                        <input type="checkbox" class="btn-qqc" value="{{$tarefa->status_tarefa}}" data-cod="{{$tarefa->id}}" @if($tarefa->status_tarefa == 'realizada' )
                                                        checked
                                                        @else
                                                        @endif
                                                        >
                                                        <span class="custom-toggle-slider rounded-circle" data-label-off="Não" data-label-on="Sim"></span>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 order-xl-1">
            <div class="row">

                <div class="col-lg-6">
                    <a href="{{route('crm.index')}}" target="_blank">
                        <div class="btn card bg-gradient-info border-0">
                            <!-- Card body -->
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title text-uppercase text-muted mb-0 text-white">CRM</h4>
                                        <span class="h5 font-weight-bold mb-0 text-white">Tenha uma maior interação com seus clientes</span>
                                    </div>
                                    <div class="col-auto mx-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-6">
                    <a href="#">
                        <div class="btn card bg-gradient-warning border-0" onclick="info()">
                            <!-- Card body -->
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="card-title text-uppercase text-muted mb-0 text-white">Orçamentos</h4>
                                        <span class="h5 font-weight-bold mb-0 text-white">Crie e gerencie orçamentos para seus cientes</span>
                                    </div>
                                    <div class="col-auto mx-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="fas fa-file-invoice-dollar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4">
                    <a href="#">
                        @if(auth()->user()->tipo == 'PAR')
                        <div class="btn card bg-default border-0" onclick="info()">
                        @else
                        <div class="btn card bg-default border-0" data-toggle="modal" data-target="#RelatorioVendedorModal">
                        @endif
                            <!-- Card body -->
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col d-flex justify-content-center align-items-center">
                                        <h4 class="card-title text-uppercase text-muted mb-0 text-white">Vendedores</h4>
                                        <!-- <span class="h5 font-weight-bold mb-0 text-white">Crie e gerencie orçamentos para seus cientes</span> -->
                                    </div>
                                    <div class="col-auto mx-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="fas fa-user-tag"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4">
                    <a href="#">
                        <div class="btn card bg-default border-0" data-toggle="modal" data-target="#RelatorioProdutoModal">
                            <!-- Card body -->
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col d-flex justify-content-center align-items-center">
                                        <h4 class="card-title text-uppercase text-muted mb-0 text-white">Produtos</h4>
                                        <!-- <span class="h5 font-weight-bold mb-0 text-white">Crie e gerencie orçamentos para seus cientes</span> -->
                                    </div>
                                    <div class="col-auto mx-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="fas fa-boxes"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4">
                    <a href="#">
                        <div class="btn card bg-default border-0" onclick="info()">
                            <!-- Card body -->
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col d-flex justify-content-center align-items-center">
                                        <h4 class="card-title text-uppercase text-muted mb-0 text-white">Clientes</h4>
                                        <!-- <span class="h5 font-weight-bold mb-0 text-white">Crie e gerencie orçamentos para seus cientes</span> -->
                                    </div>
                                    <div class="col-auto mx-auto">
                                        <div class="icon icon-shape bg-white text-dark rounded-circle shadow">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="card">
                <!-- Card header -->
                <div class="card-header">
                    <!-- Title -->
                    <h5 class="h3 mb-0">Ordens por Mês</h5>
                </div>
                <!-- Card body -->
                <div class="card-body bg-default">
                    <div class="chart">
                        <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                            <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                            </div>
                        </div>
                        <!-- Chart wrapper -->
                        <canvas id="chart-barstacked-vendas" class="chart-canvas chartjs-render-monitor" width="817" height="350" style="display: block; width: 817px; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

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

@include('php.modal-tarefas')
@include('php.modal-relatorio-produtos')
@include('php.modal-relatorio-vendedores')

<div class="modal fade" id="ModalFuncionario" tabindex="-1" role="dialog" aria-labelledby="ModalFuncionario" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-default">Trocar Funcionario</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form action="{{route('subdashboard.index')}}" method="post">
                {{csrf_field()}}
                <div class="modal-body">
                    <div class="form-group">
                        <label for="funcionario_selecionado">Vendedor</label>

                        <select clearifnotmatch="true" name="funcionario_selecionado" id="funcionario_selecionado" class="form-control">
                            @foreach($vendedores as $vendedor)
                            <option value="{{$vendedor->id}}">{{$vendedor->name}}</option>
                            @endforeach
                        </select>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Alterar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="ModalDadosClientes" tabindex="-1" role="dialog" aria-labelledby="ModalFuncionario" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-default">Contato dos clientes</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-mobile-alt px-1"></i></span>
                        </div>
                        <input id="celular_captado" type="text" class="form-control" readonly value="">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-phone"></i></span>
                        </div>
                        <input id="telefone_captado" type="text" class="form-control" readonly value="">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-at"></i></span>
                        </div>
                        <input id="email_captado" type="text" class="form-control" readonly value="">
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-danger">Fechar</button>
            </div>
        </div>
    </div>
</div>

@endsection
@push('js')
<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://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.js"></script>
<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-bs4/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-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js')}}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script src="{{ asset('argon') }}/vendor/moment/min/moment.min.js"></script>
<script src="{{ asset('argon') }}/vendor/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>

<!-- Checkbox -->
<script>
    $('input[type="checkbox"]').change(function() {
        this.value = this.checked ? 'realizada' : 'espera';
    });
</script>

<!-- Datepicker -->
<script>
    $(document).ready(function() {
        $('.datepicker').datepicker({
            todayBtn: 'linked',
            format: 'yyyy-mm-dd',
            language: "pt-BR",
            autoclose: true
        });
    });
</script>

<!-- Atualizar tarefa -->
<script>
    $(document).on('change', '.btn-qqc', function() {
        let cod = $(this).data('cod')
        let valor = $(this).val()
        console.log(cod);
        let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            url: "/tarefa/atualizar/" + cod,
            method: 'post',
            dataType: 'json',
            data: {
                _token: CSRF_TOKEN,
                id: cod,
                valor: valor
            },
            timeout: 5000,
            success: function(retorno) {
                $.notify({
                    // options
                    icon: 'fas fa-bell fa-2x',
                    title: 'Sucesso',
                    message: 'Situação da tarefa alterada',
                    url: ''
                }, {
                    element: 'body',
                    type: 'success',
                    allow_dismiss: true,
                    offset: {
                        x: 15, // Keep this as default
                        y: 15 // Unless there'll be alignment issues as this value is targeted in CSS
                    },
                    spacing: 10,
                    z_index: 1080,
                    url_target: '_blank',
                    mouse_over: false,
                    animate: {
                        enter: 'animated fadeInDown',
                        exit: 'animated fadeOutUp'
                    },
                    template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert-notify" role="alert">' +
                        '<span class="alert-icon" data-notify="icon"></span> ' +
                        '<div class="alert-text"</div> ' +
                        '<span class="alert-title" data-notify="title">{1}</span> ' +
                        '<span data-notify="message">{2}</span>' +
                        '</div>' +
                        // '<div class="progress" data-notify="progressbar">' +
                        // '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                        // '</div>' +
                        // '<a href="{3}" target="{4}" data-notify="url"></a>' +
                        '<button type="button" class="close" data-notify="dismiss" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                        '</div>'
                });
            },
            error: function() {
                alert('Algo inesperado aconteceu');
            }
        });
    });
</script>

<!-- Tabela dinamica -->
<!-- <script type="text/javascript">
    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            } else {
                getData(page);
            }
        }
    });

    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
            var myurl = $(this).attr('href');
            var page = $(this).attr('href').split('page=')[1];
            getData(page);
        });
    });

    function getData(page) {
        $.ajax({
            url: '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function(data) {
            $("#tag_container").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError) {
            alert('Algo inesperado aconteceu...');
        });
    }
</script> -->

<!-- Modal Cliente -->
<script>
    $('#ModalDadosClientes').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget)
        var celular = button.data('celular')
        var email = button.data('email')
        var telefone = button.data('telefone')

        var modal = $(this)
        modal.find('.modal-body #celular_captado').val(celular)
        modal.find('.modal-body #telefone_captado').val(telefone)
        modal.find('.modal-body #email_captado').val(email)

    });
</script>

@if($retornar_ligacao > 0)
<script>
    swal("Atenção", "Você possui ligações para retornar", "warning")
</script>
@else
@endif

<!-- Info -->
<script>
    function info() {
        swal("Então...", "Ainda estamos trabalhando nisso", "info")
    }
</script>

<!-- Datatable Vendedor -->
<script>
    $.fn.dataTable.Api.register('column().data().sum()', function() {
        return this.reduce(function(a, b) {
            var x = parseFloat(a) || 0;
            var y = parseFloat(b) || 0;
            return x + y;
        }, 0);
    });
    $(document).ready(function() {
        $('.input-daterange').datepicker({
            todayBtn: 'linked',
            format: 'yyyy-mm-dd',
            language: "pt-BR",
            autoclose: true
        });

        load_data();

        function load_data(from_date = '', to_date = '') {
            var table = $('#table').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: "{{ route('subdashboard.vendedor_ajax') }}",
                    data: {
                        from_date: from_date,
                        to_date: to_date
                    }
                },
                "deferRender": true,
               "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    // Total over all pages
                    valor_total = api.column(3, {
                            page: 'all'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                        valor_total_venda = api.column(2, {
                            page: 'all'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    total = valor_total;
                    total_venda = valor_total_venda;

                    // Total over this page
                    valor_page = api.column(3, {
                            page: 'current'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    valor_page_venda = api.column(2, {
                            page: 'current'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    pageTotal = valor_page;
                    pageTotal_venda = valor_page_venda;

                    
                    document.getElementById('total-top').innerHTML = pageTotal.toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                    });
                    document.getElementById('total-top-venda').innerHTML = pageTotal_venda.toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                    });

                 
                },
                columns: [{
                        "class": "align-middle text-center details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        "searchable": false,
                        "render": function() {
                            return '<i class="far fa-eye" aria-hidden="true"></i>';
                        },
                        width: "15px"
                    },
                    {
                        data: 'vendedor',
                        name: 'vendedor',
                        className: 'align-middle text-center',
                    },
                    {
                        data: 'valores',
                        name: 'valores',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                          
                            data2 = parseFloat(data);
                            return data2.toLocaleString('pt-BR', {
                                style: 'currency',
                                currency: 'BRL'
                            });
                        }
                    },
                    {
                        data: 'comissao',
                        name: 'comissao',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                            
                            data2 = parseFloat(data);
                            return data2.toLocaleString('pt-BR', {
                                style: 'currency',
                                currency: 'BRL'
                            });
                        }
                    },
                    {
                        data: 'tabela',
                        name: 'tabela',
                        defaultContent: '',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                            if (data == 1)
                                data = 'Varejo';
                            if (data == 2)
                                data = 'Atacado';
                            return data;
                        }
                    },
                    {
                        data: 'dia',
                        name: 'dia',
                        defaultContent: '',
                        className: 'align-middle text-center',
                    }

                ],
                "language": {
                    "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
                    "search": "Procurar:",
                    "paginate": {
                        "first": "Primeiro",
                        "previous": "<",
                        "next": ">",
                        "last": "Último"
                    }
                },

                dom: 'Bfrtip',
                lengthMenu: [
                    [-1, 10, 25, 50],
                    ['Todas as linhas', '10 linhas', '25 linhas', '50 linhas']
                ],
                buttons: [{
                        extend: 'pageLength',
                        className: 'btn bg-light rounded'
                    },
                    // {
                    //     extend: 'pdfHtml5',
                    //     className: 'btn bg-danger text-white rounded',
                    //     exportOptions: {
                    //         columns: [1, 2, 3, 4, 5, 6, 7]
                    //     }
                    // },
                    // {
                    //     extend: 'excelHtml5',
                    //     className: 'btn bg-success text-white rounded',
                    //     exportOptions: {
                    //         columns: [1, 2, 3, 4, 5, 6, 7]
                    //     }
                    // },
                    {
                        extend: 'colvis',
                        text: 'Colunas',
                        className: 'btn bg-default text-white rounded'
                    }
                ],
                initComplete: function() {
                    this.api().columns([1]).every(function() {
                        var column = this;
                        var select = $('<select class="form-control form-control-sm filtro-vendedor w-100"><option value="">Todas</option></select>')
                            .appendTo($('#filtro-vendedor'))
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function(d, j) {
                            select.append(
                                '<option value="' + d + '">' + d + "</option>"
                            );
                        });
                    });
                },
            });
            $('#table tbody').on('click', 'td.details-control', function() {
                var tr = $(this).closest('tr');
                var tdi = tr.find("i.far");
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    tdi.first().removeClass('fa-eye-slash');
                    tdi.first().addClass('fa-eye');
                } else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                    tdi.first().removeClass('fa-eye');
                    tdi.first().addClass('fa-eye-slash');
                }
            });

            table.on("user-select", function(e, dt, type, cell, originalEvent) {
                if ($(cell.node()).hasClass("details-control")) {
                    e.preventDefault();
                }
            });
        }

        $('#filter').click(function() {
            $('.filtro-pagamento:nth-child(1)').remove();
            $('.filtro-tipo:nth-child(1)').remove();
            $('.filtro-liberar:nth-child(1)').remove();
            $('.filtro-vendedor:nth-child(1)').remove();
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
            if (from_date != '' && to_date != '') {
                $('#table').DataTable().destroy();
                load_data(from_date, to_date);
            } else {
                alert('Precisa selecionar alguma data para filtrar');
            }
        });

        $('#refresh').click(function() {
            $('#from_date').val('');
            $('#to_date').val('');
            $('#table').DataTable().destroy();
            load_data();
        });
    });

    function format(d) {
        // `d` is the original data object for the row
        return '<table class="table-sm" cellpadding="5" cellspacing="0" border="0">' +
            '<tbody class="thead-dark">' +
            '<tr>' +
            '<td>...</td>' +
            // '<th class="align-middle text-center">Quantidade Máxima:</th>' +
            // '<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_maxima_produtos + '</td>' +
            // '</tr>' +
            // '<tr>' +
            // '<th class="align-middle text-center">Quantidade Minima:</th>' +
            // '<td class="align-middle text-center text-white" colspan="2">' + d.quantidade_minima_produtos + '</td>' +
            // '</tr>' +
            // '<tr>' +
            // '<th class="align-middle text-center" >Valor Unitario:</th>' +
            // '<td class="align-middle text-center text-white" colspan="2">' + parseFloat(d.preco_produto_varejo).toLocaleString('pt-BR', {
            //     style: 'currency',
            //     currency: 'BRL'
            // }); + '</td>' +
            '</tr>' +
            '</tbody>' +
            '</table>';
    }
</script>

<!-- Datatable Produto -->
<script>
    $(document).ready(function() {
        var table = $('#table-relatorio-produto').DataTable({
                "processing": true,
                "ajax": "{{ route('produtos.data')}}",
                "deferRender": true,
                columns: [{
                        data: 'id',
                        name: 'id',
                        visible: false,
                        className: 'px-1 align-middle text-center'
                    },
                    {
                        "className": ' px-1 align-middle text-center details-control',
                        "orderable": false,
                        "data": 'imagem_produto',
                        "defaultContent": '',
                        "searchable": false,
                        "render": function(data, type, row) {
                            return "<img class='avatar avatar-md rounded' src='../" + data + "'><br>" +
                                "<div class='progress-label w-100'>" +
                                "<span>Codigo: " + row.id + "</span>" +
                                "</div>";
                        },
                        width: "15px"
                    },

                    {
                        data: 'nome_produto',
                        name: 'nome_produto',
                        className: 'px-1 align-middle text-center white-space',
                    },
                    {
                        data: 'nome_marca_produto',
                        name: 'nome_marca_produto',
                        className: 'px-1 align-middle text-center white-space',
                        "render": function(data, type, row) {
                            return data;
                        }
                    },
                    {
                        data: 'nome_familia_produto',
                        name: 'nome_familia_produto',
                        visible: false,
                        className: 'px-1 align-middle text-center white-space'
                    },
                    {
                        data: 'unidade_produto',
                        name: 'unidade_produto',
                        visible: false,
                        className: 'px-1 align-middle text-center',
                        "render": function(data, type, row) {
                            if (data == 'KT') data = '<td class= "align-middle text-center"> <i class ="fas fa-boxes text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Kit</span></td>';
                            if (data == 'PC') data = '<td class= "align-middle text-center" > <i class = "fas fa-cog text-primary fa-2x mr-1"></i><br><span class="font-weight-bold mt--1">Peça</span></td>';
                            if (data == 'CX') data = '<td class= "align-middle text-center" > <i class = "fas fa-box-open text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Caixa</span></td>';
                            if (data == 'CJ') data = '<td class= "align-middle text-center" > <i class = "fas fa-layer-group text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Conjunto</span></td>';
                            if (data == 'EB') data = '<td class= "align-middle text-center" > <i class = "fas fa-archive text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Embalagem</span></td>';
                            if (data == 'MT') data = '<td class= "align-middle text-center" > <i class = "fas fa-ruler text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Metro</span></td>';
                            if (data == 'RL') data = '<td class= "align-middle text-center" > <i class = "fas fa-tape text-primary fa-2x mr-1" ></i><br><span class="font-weight-bold mt--1">Rolo</span></td>';
                            if (data == 'UN') data = '<td class= "align-middle text-center" > <i class = "fab fa-buromobelexperte text-primary fa-2x mr-1"></i><br><span class="font-weight-bold mt--1">Unidade</span></td>';
                            return data;
                        }
                    },
                    {
                        data: 'quantidade_produtos',
                        name: 'quantidade_produtos',
                        className: 'px-1 align-middle text-center'
                       
                    },
                    {
                        data: 'preco_produto_atacado',
                        name: 'preco_produto_atacado',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                            if (row.preco_produto_oferta > 0.00) {
                                return '<del class="font-weight-bold text-danger">' + data + '</del>';
                            } else
                                return data;
                        }
                    },
                    {
                        data: 'preco_produto_varejo',
                        name: 'preco_produto_varejo',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                            if (row.preco_produto_oferta > 0.00) {
                                return '<del class="font-weight-bold text-danger">' + data + '</del>';
                            } else
                                return data;
                        }
                    },
                    {
                        data: 'preco_produto_oferta',
                        name: 'preco_produto_oferta',
                        className: 'align-middle text-center',
                        "render": function(data, type, row) {
                            if (data > 0.00) {
                                return '<strong class="text-success">' + data + '</strong>';
                            } else
                                return data;
                        }
                    },
                ],
                "language": {
                    "info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
                    "search": "Procurar:",
                    "paginate": {
                        "first": "Primeiro",
                        "previous": "<",
                        "next": ">",
                        "last": "Último"
                    }
                },
                dom: 'Brtip',
                lengthMenu: [
                    [10, 25, 50, -1],
                    ['10 linhas', '25 linhas', '50 linhas', 'Todas as linhas']
                ],
                buttons: [],

                initComplete: function() {
                    this.api().columns([3]).every(function() {
                        var column = this;
                        var select = $('<select class="form-control form-control-sm w-100"><option value="">Todas</option></select>')
                            .appendTo($('#filtro-marca'))
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });
                        column.data().unique().sort().each(function(d, j) {
                            select.append(
                                '<option value="' + d + '">' + d + "</option>"
                            );
                        });
                    });
                    this.api().columns([4]).every(function() {
                        var column = this;
                        var select = $('<select class="form-control form-control-sm w-100"><option value="">Todas</option></select>')
                            .appendTo($('#filtro-familia'))
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function(d, j) {
                            select.append(
                                '<option value="' + d + '">' + d + "</option>"
                            );
                        });
                    });
                }

            }).on('select', function(e, dt, type, indexes) {
                var rowData = table.rows(indexes).data().toArray()
                $('#row-data').html(JSON.stringify(rowData));
            })
            .on('deselect', function() {
                $('#row-data').empty();
            });

        table.columns([0]).every(function() {
            var that = this;

            $('#filtro-codigo').on('keyup change clear', function() {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

        table.columns([2]).every(function() {
            var that = this;

            $('#filtro-nome').on('keyup change clear', function() {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

        $('#table tbody').on('click', 'td.details-control', function() {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            format(row.data()).show();

        });

        table.on("user-select", function(e, dt, type, cell, originalEvent) {
            if ($(cell.node()).hasClass("details-control")) {
                e.preventDefault();
            }
        });
    });

    function format(d) {
        return swal({
            imageUrl: '../img/produtos_cadastrados/img_' + d.id + '\.jpg'
        });
    }
</script>

<!-- BarStackedChart -->
<script>
    $(document).ready(function() {
        Charts = function() {
                var e, a = $('[data-toggle="chart"]'),
                    t = "light",
                    n = {
                        base: "Open Sans"
                    },
                    i = {
                        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"
                    };

                function o(e, a) {
                    for (var t in a) "object" != typeof a[t] ? e[t] = a[t] : o(e[t], a[t])
                }

                function l(e) {
                    var a = e.data("add"),
                        t = $(e.data("target")).data("chart");
                    e.is(":checked") ? (! function e(a, t) {
                        for (var n in t) Array.isArray(t[n]) ? t[n].forEach(function(e) {
                            a[n].push(e)
                        }) : e(a[n], t[n])
                    }(t, a), t.update()) : (! function e(a, t) {
                        for (var n in t) Array.isArray(t[n]) ? t[n].forEach(function(e) {
                            a[n].pop()
                        }) : e(a[n], t[n])
                    }(t, a), t.update())
                }

                function r(e) {
                    var a = e.data("update"),
                        t = $(e.data("target")).data("chart");
                    o(t, a),
                        function(e, a) {
                            if (void 0 !== e.data("prefix") || void 0 !== e.data("prefix")) {
                                var t = e.data("prefix") ? e.data("prefix") : "",
                                    n = e.data("suffix") ? e.data("suffix") : "";
                                a.options.scales.yAxes[0].ticks.callback = function(e) {
                                    if (!(e % 10)) return t + e + n
                                }, a.options.tooltips.callbacks.label = function(e, a) {
                                    var i = a.datasets[e.datasetIndex].label || "",
                                        o = e.yLabel,
                                        l = "";
                                    return a.datasets.length > 1 && (l += i), l += t + o + n
                                }
                            }
                        }(e, t), t.update()
                }
                return window.Chart && o(Chart, (e = {
                    defaults: {
                        global: {
                            responsive: !0,
                            maintainAspectRatio: !1,
                            defaultColor: "dark" == t ? i.gray[700] : i.gray[600],
                            defaultFontColor: "dark" == t ? i.gray[700] : i.gray[600],
                            defaultFontFamily: n.base,
                            defaultFontSize: 13,
                            layout: {
                                padding: 0
                            },
                            legend: {
                                display: !1,
                                position: "bottom",
                                labels: {
                                    usePointStyle: !0,
                                    padding: 16
                                }
                            },
                            elements: {
                                point: {
                                    radius: 0,
                                    backgroundColor: i.theme.primary
                                },
                                line: {
                                    tension: .4,
                                    borderWidth: 4,
                                    borderColor: i.theme.primary,
                                    backgroundColor: i.transparent,
                                    borderCapStyle: "rounded"
                                },
                                rectangle: {
                                    backgroundColor: i.theme.warning
                                },
                                arc: {
                                    backgroundColor: i.theme.primary,
                                    borderColor: "dark" == t ? i.gray[800] : i.white,
                                    borderWidth: 4
                                }
                            },
                            tooltips: {
                                enabled: !0,
                                mode: "index",
                                intersect: !1
                            }
                        },
                        doughnut: {
                            cutoutPercentage: 83,
                            legendCallback: function(e) {
                                var a = e.data,
                                    t = "";
                                return a.labels.forEach(function(e, n) {
                                    var i = a.datasets[0].backgroundColor[n];
                                    t += '<span class="chart-legend-item">', t += '<i class="chart-legend-indicator" style="background-color: ' + i + '"></i>', t += e, t += "</span>"
                                }), t
                            }
                        }
                    }
                }, Chart.scaleService.updateScaleDefaults("linear", {
                    gridLines: {
                        borderDash: [2],
                        borderDashOffset: [2],
                        color: "dark" == t ? i.gray[900] : i.gray[300],
                        drawBorder: !1,
                        drawTicks: !1,
                        lineWidth: 0,
                        zeroLineWidth: 0,
                        zeroLineColor: "dark" == t ? i.gray[900] : i.gray[300],
                        zeroLineBorderDash: [2],
                        zeroLineBorderDashOffset: [2]
                    },
                    ticks: {
                        beginAtZero: !0,
                        padding: 10,
                        callback: function(e) {
                            if (!(e % 10)) return e
                        }
                    }
                }), Chart.scaleService.updateScaleDefaults("category", {
                    gridLines: {
                        drawBorder: !1,
                        drawOnChartArea: !1,
                        drawTicks: !1
                    },
                    ticks: {
                        padding: 20
                    },
                    maxBarThickness: 10
                }), e)), a.on({
                    change: function() {
                        var e = $(this);
                        e.is("[data-add]") && l(e)
                    },
                    click: function() {
                        var e = $(this);
                        e.is("[data-update]") && r(e)
                    }
                }), {
                    colors: i,
                    fonts: n,
                    mode: t
                }
            }(),

            BarStackedChart = function() {
                var e, a, t, n, i = $("#chart-barstacked-vendas");
                // $.ajax({
                //     url: "{{route('os.barstacked')}}",
                //     method: 'get',
                //     dataType: 'json',
                //     timeout: 5000,
                //     success: function(data) {
                data = [
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 5],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
                ]

                i.length && (e = i, a = function() {
                    return Math.round(100 * Math.random())
                }, t = {
                    labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                    datasets: [{
                        label: "Matriz",
                        backgroundColor: Charts.colors.theme.info,
                        data: [data[1][11], data[1][10], data[1][9], data[1][8], data[1][7], data[1][6], data[1][5], data[1][4], data[1][3], data[1][2], data[1][1], data[1][0]]
                    }, {
                        label: "Taubaté",
                        backgroundColor: Charts.colors.theme.success,
                        data: [data[0][11], data[0][10], data[0][9], data[0][8], data[0][7], data[0][6], data[0][5], data[0][4], data[0][3], data[0][2], data[0][1], data[0][0]]
                    }]

                }, n = new Chart(e, {
                    type: "bar",
                    data: t,
                    options: {
                        tooltips: {
                            mode: "index",
                            intersect: !1
                        },
                        responsive: !0,
                        scales: {
                            xAxes: [{
                                stacked: !0
                            }],
                            yAxes: [{
                                stacked: !0
                            }]
                        }
                    }
                }), e.data("chart", n))
                //     },
                //     error: function() {
                //         alert('Algo inesperado aconteceu');
                //     }
                // });
            }(),
            //
            // Charts
            //
            'use strict';
        //
        // Sales chart
        //

    });
</script>

<!--Meta Atingida -->
// <script>
//     meta_dia = 0;
//     total_dia = 0;
//     meta_dia = $('#meta_dia').val();
//     total_dia = $('#total_dia').val();
    
//     if (total_dia >= meta_dia) {
//         Swal.fire({
//             title: 'Meta Diaria Atingida!',
//             imageUrl: '../img/icones/celebrate3.gif',
//             imageWidth: 600,
//             imageHeight: 400,
//             imageAlt: 'Custom image',
//         })
//     }
// </script>
@endpush