@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') !!}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<style>
    .tabs-categorias{
        background: #00c88b;
        color: #fff;
        margin: 10px 0px;
    }
    .tabs-categorias:hover{
        color: #fff !important;
        border: 1px solid #fff;
    }
    .tabs-categorias.active{
        background: none !important;
        color: #00c88b !important;
        border: 1px solid #00c88b;
    }
    .daterangepicker .ranges li.active{
		background: #00c88b !important;
	}
	.daterangepicker td.in-range{
		background: #00c88c38;
	}
	.daterangepicker td.active, .daterangepicker td.active:hover{
		background: #00c88b;
	}
	.btnArrow{
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    #daterange{
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-chart-areaspline menu-icon"></i>
        </span> ventas </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">listado de ventas</h4>
                    <div class="row">
                        <div class="col-sm-7"></div>
                        <div class="col-sm-5 text-right">
                            <div class="btn-group w-100">
                                <button class="btnArrow" data-tipo="anterior"> < </button>
                                <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{ $inicio_mes.' / '.$fin_mes }}" />
                                <button class="btnArrow" data-tipo="siguiente"> > </button>
                            </div>
                            <br />
                            <br />
                            <a id="btnDescargarPDF" class="btn btn-gradient-primary_local btn-xs" href="{{ url('ventas/corte/caja/'.$inicio_mes.'/'.$fin_mes) }}">
                            <i class="mdi mdi-file-pdf-box"></i> descargar</a>
                        </div>
                    </div>
                </div>
                <div class="espacio_vertical"></div>
                @include('flash::message')
                <ul class="nav nav-pills nav-pills-custom row" id="pills-tab" role="tablist">
                    <li class="nav-item col-2 mb-4">
                        <a class="text-uppercase nav-link tabs-categorias active" id="pills-all-tab" data-toggle="pill" href="#pills-cortesias" role="tab" aria-controls="pills-cortesias" aria-selected="true"> Todas las ventas </a>
                    </li>
                    <li class="nav-item col-2 mb-4">
                        <a class="text-uppercase nav-link tabs-categorias" id="pills-servicios-tab" data-toggle="pill" href="#pills-servicios" role="tab" aria-controls="pills-servicios" aria-selected="true"> Venta de servicios </a>
                    </li>
                    <li class="nav-item col-2 mb-4">
                        <a class="text-uppercase nav-link tabs-categorias" id="pills-productos-tab" data-toggle="pill" href="#pills-productos" role="tab" aria-controls="pills-productos" aria-selected="true"> Venta de productos </a>
                    </li>
                </ul>
                <div class="table-responsive">
                    @include('ventas.table')
                    @include('ventas.table_productos')
                    @include('ventas.table_servicios')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script src="{!! asset('files_custom/bower_components/datatables.net/js/jquery.dataTables.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.print.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.html5.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>
<script>
    $("#div_padre_servicios").hide();
    $("#div_padre_productos").hide();

    $('#ventas-table').DataTable({
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "order": [[ 0, "desc" ]]
    });

    $('#ventas-productos-table').DataTable({
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "order": [[ 0, "desc" ]]
    });

    $('#ventas-servicios-table').DataTable({
        language: {
            "decimal": "",
            "emptyTable": "No hay información",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
            "infoPostFix": "",
            "thousands": ",",
            "lengthMenu": "Mostrar _MENU_ Entradas",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "Sin resultados encontrados",
            "paginate": {
                "first": "Primero",
                "last": "Ultimo",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "order": [[ 0, "desc" ]]
    });

    $("#pills-all-tab").click(function(){
        $("#div_padre_all").show();
        $("#div_padre_servicios").hide();
        $("#div_padre_productos").hide();
    });
    $("#pills-servicios-tab").click(function(){
        $("#div_padre_servicios").show();
        $("#div_padre_productos").hide();
        $("#div_padre_all").hide();
    });
    $("#pills-productos-tab").click(function(){
        $("#div_padre_servicios").hide();
        $("#div_padre_productos").show();
        $("#div_padre_all").hide();
    });
    
    var inicio = "{{ $inicio_mes}}";
    var fin = "{{ $fin_mes}}";
    $('#daterange').daterangepicker({
        "cancelButtonClasses": "btn btn-secondary",
        "applyButtonClasses" : "btn btn-primary_local",
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        "startDate": inicio,
        "endDate": fin,
        "opens": "center",
        "locale": {
            "format": "DD-MMM-YYYY",
            "separator": " / ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizado",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mie",
                "Jue",
                "Vie",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
    });
    $(".btnArrow").click(function(){
		$.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');
        
        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
			$('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);
			actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

    function actualizarDatos(){
        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);
        
        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_ventas/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);
            console.log(datos);
            
            if(datos.all.length > 0)
            {
                $('#ventas-table').DataTable().destroy();
                $("#sin_all_ventas").hide();
                $("#div_venta_all").show();
                $("#tbody-all").html('');
                datos.all.forEach(element => {
                    var compro = '';
                    element.compra.forEach(comprado => {
                        compro = compro+'<li>'+comprado+'</li>';
                    });
                    $("#tbody-all").append('<tr>'+
                        '<td>#'+element.orden+'</td>'+
                        '<td>'+element.cliente+'</td>'+
                        '<td>$'+element.total+' peso(s)</td>'+
                        '<td>'+element.tipo_pago+'</td>'+
                        '<td>'+element.tipo+'</td>'+
                        '<td>'+
                            '<ul>'+compro+'</ul>'+
                        '</td>'+
                        '<td><span class="badge '+element.badge_estatus+'">'+element.estatus+'</span></td>'+
                        '<td>'+
                            '<div class="btn-group">'+
                                '<a href="'+url_dinamica+'/ventas/recibo/'+element.orden+'" class="btn btn-dark btn-xs" id="edit_ventas"><i class="mdi mdi-view-dashboard"></i></a>'+
                                '<button type="button" class="btn btn-inverse-danger btn-xs" data-toggle="modal" data-target="#DeleteVentas'+element.orden+'"><i class="mdi mdi-delete"></i></button>'+
                            '</div>'+
                        '</td>'
                    );
                });
                iniciarPrimerTabla();
            }else{
                $("#div_venta_all").hide();
                $("#tbody-all").html('');
                $("#sin_all_ventas").show();
            }
            if(datos.citas.length > 0)
            {
                $('#ventas-servicios-table').DataTable().destroy();
                $("#sin_servicios_ventas").hide();
                $("#div_venta_servicios").show();
                $("#tbody-servicios").html('');
                datos.citas.forEach(element => {
                    var compro = '';
                    element.compra.forEach(comprado => {
                        compro = (compro+'<li>'+comprado+'</li>');
                    });
                    $("#tbody-servicios").append('<tr>'+
                        '<td>#'+element.orden+'</td>'+
                        '<td>'+element.cliente+'</td>'+
                        '<td>$'+element.total+' peso(s)</td>'+
                        '<td>'+element.tipo_pago+'</td>'+
                        '<td>'+element.tipo+'</td>'+
                        '<td>'+
                            '<ul>'+compro+'</ul>'+
                        '</td>'+
                        '<td><span class="badge '+element.badge_estatus+'">'+element.estatus+'</span></td>'+
                        '<td>'+
                            '<div class="btn-group">'+
                                '<a href="'+url_dinamica+'/ventas/recibo/'+element.orden+'" class="btn btn-dark btn-xs" id="edit_ventas"><i class="mdi mdi-view-dashboard"></i></a>'+
                                '<button type="button" class="btn btn-inverse-danger btn-xs" data-toggle="modal" data-target="#DeleteVentas'+element.orden+'"><i class="mdi mdi-delete"></i></button>'+
                            '</div>'+
                        '</td>'
                    );
                });
                iniciarServiciosTable();
            }else{
                $("#div_venta_servicios").hide();
                $("#tbody-servicios").html('');
                $("#sin_servicios_ventas").show();
            }
            if(datos.productos.length > 0)
            {
                $('#ventas-productos-table').DataTable().destroy();
                $("#sin_productos_ventas").hide();
                $("#div_venta_productos").show();
                $("#tbody-productos").html('');
                datos.productos.forEach(element => {
                    var compro = '';
                    element.compra.forEach(comprado => {
                        compro = (compro+'<li>'+comprado+'</li>');
                    });
                    $("#tbody-productos").append('<tr>'+
                        '<td>#'+element.orden+'</td>'+
                        '<td>'+element.cliente+'</td>'+
                        '<td>$'+element.total+' peso(s)</td>'+
                        '<td>'+element.tipo_pago+'</td>'+
                        '<td>'+element.tipo+'</td>'+
                        '<td>'+
                            '<ul>'+compro+'</ul>'+
                        '</td>'+
                        '<td><span class="badge '+element.badge_estatus+'">'+element.estatus+'</span></td>'+
                        '<td>'+
                            '<div class="btn-group">'+
                                '<a href="'+url_dinamica+'/ventas/recibo/'+element.orden+'" class="btn btn-dark btn-xs" id="edit_ventas"><i class="mdi mdi-view-dashboard"></i></a>'+
                                '<button type="button" class="btn btn-inverse-danger btn-xs" data-toggle="modal" data-target="#DeleteVentas'+element.orden+'"><i class="mdi mdi-delete"></i></button>'+
                            '</div>'+
                        '</td>'
                    );
                });
                iniciarProductosTable();
            }else{
                $("#div_venta_productos").hide();
                $("#tbody-productos").html('');
                $("#sin_productos_ventas").show();
            }
            $("#btnDescargarPDF").attr('href',url_dinamica+'/ventas/corte/caja/'+fecha_inicio+'/'+fecha_final);
        })
        .fail(function(error) {
            console.log('error',error);
        });
	}

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });

    function iniciarPrimerTabla()
    {
        $('#ventas-table').DataTable({
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            "order": [[ 0, "desc" ]]
        });
    }
    function iniciarProductosTable()
    {
        $('#ventas-productos-table').DataTable({
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            "order": [[ 0, "desc" ]]
        });
    }
    function iniciarServiciosTable()
    {
        $('#ventas-servicios-table').DataTable({
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Entradas",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            },
            "order": [[ 0, "desc" ]]
        });
    }
</script>
@endsection