@extends('layout.master',['activePage' => 'timbradoaccesosrios', 'menuParent' => 'Operaciones', 'titlePage' => __('Timbrado Accesorios ')])

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

@section('content')
<style>
#global {
    height: 300px;
    width: 170px;
    overflow-y: scroll;
}
#containerNotas{
    height: 400px;
    width: 100%;
     overflow-y: scroll;
}
#tableNotasClientes{
    height: 400px;
    width: 100%;
     overflow-y: scroll;
}
.color1{
    background-color: #32CD32;
}
.color2{
    background-color: #FA9C03;
}
.color3{
    background-color: #FFFFFF;
}
.numDer{
    text-align: right;
}
</style>
    <!--  Navbar Starts / Breadcrumb Area Starts -->
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('CR')}}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Clientes')}}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{__('Timbrado Accesorios')}}</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->
    <div class="col-lg-12">
                <div class="row">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow mb-4">
            <div class="widget-content widget-content-area">
                <div class="w-100">

                    <div class="row">
                        <div class="col-md-2">
                            <label>Fecha Inicial</label>
                            <input type="text" class="form-control form-control-sm fechas" id="fechaIn">
                        </div>
                        <div class="col-md-2">
                            <label>Fecha Final</label>
                            <input type="text" class="form-control form-control-sm fechas" id="fechaFin">
                        </div>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-3">
                                    <br>
                                    <button class="btn btn-default btn-sm btn-block" onclick="funcionGeneral('1')">Accesorios</button>
                                </div>
                                <div class="col-md-3">
                                    <br>
                                    <button class="btn btn-default btn-sm btn-block" onclick="funcionGeneral('2')">Seleccionar Otros</button>
                                </div>
                                <div class="col-md-3">
                                    <br>
                                    <button class="btn btn-default btn-sm btn-block" onclick="timbrar();" id="timbrarAccesosrios" style="display:none;">Timbrar</button>
                                     <button class="btn btn-info btn-sm btn-block" onclick="timbrarConceptos();" id="timbrarConceptos" style="display:none;">Timbrar</button>
                                     <div style="display:none;" id="procesandoAlert">
                                        <label>Procesando</label>
                                          <img src="{{url('assets/img/spin.gif')}}" width="20px;">
                                     </div>
                                </div>
                                <div class="col-md-3">
                                    <br>
                                    <button class="btn btn-default btn-sm btn-block">Restaurar</button>
                                </div>
                            </div>
                        </div>
                    </div><br>
                    <div class="row" id="conceptosDiv" style="display: none;">
                        <div class="col-md-4">
                                <div class="form-group row">
                                    <label class="col-4 col-form-label" for="">Concepto</label>
                                    <div class="col-8">
                                        <select id="selectConceptos" style="width:100%" multiple>
                                            @foreach ($data['conceptos'] as $c)
                                                <option value="{{ $c->id }}">{{ $c->concepto }} - {{ $c->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>    
                                </div>
                        </div>
                        <div class="col-md-3 align-self-center">
                            <div class="form-group row">
                                <div class="col-12">
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="tipoConceptos" id="inlineRadio1" value="I" onclick="buscaConceptos();" checked>
                                      <label class="form-check-label" for="inlineRadio1">Ingresos</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="tipoConceptos" id="inlineRadio2" value="E" onclick="buscaConceptos();">
                                      <label class="form-check-label" for="inlineRadio2">Egresos</label>
                                    </div>
                                </div>    
                            </div>
                        </div>
                        <div class="col-md-3 align-self-center">
                            <button class="btn btn-default" onclick="buscarMovimientos(1);">Lista previo seleccionado</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="global">
                <div class="table-responsive">
                    <table class="table table-striped" id="tableCuentas">
                        <thead>
                            <tr>
                                <th>idmov</th>
                                <th>ID</th>
                                <th>Cuenta</th>
                                <th>Documento</th>
                                <th>Fecha</th>
                                <th>Promocion</th>
                                <th>Referencia</th>
                                <th>Concepto</th>
                                <th>Importe</th>
                                <th>IVA INTERES Y COM</th>
                            </tr>
                        </thead>
                        <tbody id="tableCuentasBody">

                        </tbody>
                            <tfoot>
                                    <tr>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right">Total:</th>
                                        <th style="text-align:right"></th>
                                        <th style="text-align:right"></th>
                                    </tr>
                                    </tfoot>
                    </table>
                </div>
            </div>

        </div>




    </div>


    <div class="modal fade" id="modalCargando">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Procesando</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <br>
                    <div class="row">
                        <div class="col-md-12" align="center">
                            <h3>Procesando...</h3>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12" align="center">

                            <img src="{{url('assets/img/spin.gif')}}" width="70px;">


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

    <div class="modal fade" id="modalCargandoFactConceptos">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Facturando</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12" align="center">
                            <h3>Facturas</h3>
                            <!--<img src="{{url('assets/img/spin.gif')}}" width="20px;">-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <ul class="list-inline" id="listaFacturada">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
     {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript">
    $(document).ready(function() {
        
        $(".fechas").flatpickr({
            dateFormat: "Y-m-d",
        });

    });
    function buscaConceptos(){
        var tipo = $("input[name='tipoConceptos']:checked").val();
        $.ajax({
            url: "{{url('procesos/get_conceptos_tipo')}}",
            type: 'POST',
            dataType: 'json',
            data: {tipo: tipo},
        })
        .done(function(resp) {
            console.log("success");
            var html = '';
            $.each(resp.conceptos, function(index, val) {
                 html+='<option value="'+val.id+'">'+val.concepto+' - '+val.nombre+'</option>'
            });
            $('#selectConceptos').html(html)
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function funcionGeneral(tipo){
        if(tipo=='1'){
            buscarMovimientos(2);
            $('#conceptosDiv').hide()
            $('#timbrarAccesosrios').show()
            $('#timbrarConceptos').hide()
        }else{
            $('#conceptosDiv').show()
            $('#timbrarConceptos').show()
            $('#timbrarAccesosrios').hide()
        }
    }
    function buscarMovimientos_3(){
        var tipo = $("input[name='tipoConceptos']:checked").val();
        var concepto = $('#selectConceptos').val()
        var fechaIn = $('#fechaIn').val()
        var fechaFin = $('#fechaFin').val()
        $.ajax({
            url: "{{url('procesos/get_movimientos_conceptos')}}",
            type: 'POST',
            dataType: 'json',
            data: {
                tipo: tipo,
                concepto: concepto,
                fechaIn: fechaIn,
                fechaFin: fechaFin,
            },
        })
        .done(function(resp) {
            console.log("success");
            var html = ''

        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }
    function buscarMovimientos(origen) {
         var concepto = $('#selectConceptos').val()
        if(origen=='1'){
             var tipo = $("input[name='tipoConceptos']:checked").val();
             if(concepto==''){
                 Swal.fire({
                 title: 'Selecciona al menos un concepto',
                 type: 'error',
                 timer: 2000
             })
                $('#timbrarAccesosrios').hide()
                $('#timbrarConceptos').hide()
             return false;
             }
        }else{
             var tipo = 'A';
        }
       
       
        var fechaIn = $('#fechaIn').val()
        var fechaFin = $('#fechaFin').val()
        if(fechaIn==''){
            Swal.fire({
                 title: 'Agrega una fecha inicial',
                 type: 'error',
                 timer: 2000
             })
                $('#timbrarAccesosrios').hide()
                $('#timbrarConceptos').hide()
             return false;
        }
        if(fechaFin==''){
            Swal.fire({
                 title: 'Agrega una fecha final',
                 type: 'error',
                 timer: 2000
             })
            $('#timbrarAccesosrios').hide()
                $('#timbrarConceptos').hide()
             return false;
        }

            $('#tableCuentas').dataTable().fnDestroy();
            $('#tableCuentas').DataTable({
                lengthMenu: [10, 15, 20, 50, 100],
                processing: true,
                responsive: true,
                scrollY: '80vh',
                scrollCollapse: true,
                ajax: {
                    url: "{{url('procesos/get_movimientos_conceptos')}}",
                    type: "POST",
                    data: {
                        tipo: tipo,
                        concepto: concepto,
                        fechaIn: fechaIn,
                        fechaFin: fechaFin,
                    },
                },
                columns: [
                    {
                        data: "id_movimiento", visible: true
                    },
                    {
                        data: "id_cliente"
                    },
                    {
                        data: "clientecuenta"
                    },
                    {
                        data: "Documento"
                    },
                    {
                        data: "fecha"
                    },
                    {
                        data: "id_promocion"
                    },
                    {
                        data: "Referencia"
                    },
                    {
                        data: "Concepto"
                    },
                    {
                        data: "subtotal2",className: 'numDer'
                    },
                    {
                        data: "iva",className: 'numDer'
                    },


                ],
    footerCallback: function (row, data, start, end, display) {
        let api = this.api();
 
        // Remove the formatting to get integer data for summation
        let intVal = function (i) {
            console.log(i)
            return typeof i === 'string'
                ? i.replace(/[\$,]/g, '') * 1
                : typeof i === 'number'
                ? i
                : 0;
        };
 
        // Total over all pages
        total = api
            .column(8)
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);
 
        // Total over this page
        pageTotal = api
            .column(8, { page: 'current' })
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Total over all pages
        total2 = api
            .column(9)
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);
 
        // Total over this page
        pageTotal2 = api
            .column(9, { page: 'current' })
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);
 
        // Update footer
        api.column(7).footer().innerHTML = numfom(pageTotal) + ' ('+ numfom(total) + ')';
         api.column(8).footer().innerHTML = numfom(pageTotal2) + ' (' + numfom(total2) + ')';
    },
                order: [
                    [0, "asc"]
                ]
            });

        }
    /*function getAccesorios(){
        var tipo = $("input[name='tipoConceptos']:checked").val();
        var concepto = $('#selectConceptos').val()
        var fechaIn = $('#fechaIn').val()
        var fechaFin = $('#fechaFin').val()

            $('#tableCuentas').dataTable().fnDestroy();
            $('#tableCuentas').DataTable({
                lengthMenu: [10, 15, 20, 50, 100],
                processing: true,
                responsive: true,
                scrollY: '50vh',
                scrollCollapse: true,
                ajax: {
                    url: "{{url('procesos/get_movimientos_accesosrios')}}",
                    type: "POST",
                    data: {
                        tipo: tipo,
                        concepto: concepto,
                        fechaIn: fechaIn,
                        fechaFin: fechaFin,
                    },
                },
                columns: [
                    {
                        data: "id_cliente"
                    },
                    {
                        data: "clientecuenta"
                    },
                    {
                        data: "Documento"
                    },
                    {
                        data: "fecha"
                    },
                    {
                        data: "id_promocion"
                    },
                    {
                        data: "Referencia"
                    },
                    {
                        data: "Concepto"
                    },
                    {
                        data: "importe"
                    },
                    {
                        data: "analitico4"
                    },

                ],
                order: [
                    [0, "asc"]
                ],
                 footerCallback: function (row, data, start, end, display) {
        let api = this.api();
 
        // Remove the formatting to get integer data for summation
        let intVal = function (i) {
            return typeof i === 'string'
                ? i.replace(/[\$,]/g, '') * 1
                : typeof i === 'number'
                ? i
                : 0;
        };
 
        // Total over all pages
        total = api
            .column(6)
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);
 
        // Total over this page
        pageTotal = api
            .column(6, { page: 'current' })
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);
 
        // Update footer
        api.column(6).footer().innerHTML =
            '$' + pageTotal + ' ( $' + total + ' total)';
    }

            });
    }*/
    function numfom(monto){
    return new Intl.NumberFormat('es-MX',{style:'currency',currency:'MXN'}).format(monto);
  }
  function timbrar(origen){
          var concepto = $('#selectConceptos').val()

          origen = 2
        if(origen=='1'){
             var tipo = $("input[name='tipoConceptos']:checked").val();
             if(concepto==''){
                 Swal.fire({
                 title: 'Selecciona al menos un concepto',
                 type: 'error',
                 timer: 2000
             })

             return false;
             }
        }else{
             var tipo = 'A';
        }
       
       
        var fechaIn = $('#fechaIn').val()
        var fechaFin = $('#fechaFin').val()
        if(fechaIn==''){
            Swal.fire({
                 title: 'Agrega una fecha inicial',
                 type: 'error',
                 timer: 2000
             })

             return false;
        }
        if(fechaFin==''){
            Swal.fire({
                 title: 'Agrega una fecha final',
                 type: 'error',
                 timer: 2000
             })

             return false;
        }
        $('#modalCargando').modal('show')
    $.ajax({
        url: "{{url('procesos/facturar_movimientos')}}",
        type: 'POST',
        dataType: 'json',
        data: {
            tipo: 'A',
            concepto: concepto,
            fechaIn: fechaIn,
            fechaFin: fechaFin,
        },
    })
    .done(function(resp) {
        console.log("success");

        if(resp.estatus > 0){
            $.ajax({
                url: "{{url('procesos/guardar_factura')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    factura_id: resp.factura_id,
                    serie: resp.serie,
                    folio: resp.folio,
                    uuid: resp.uuid,
                    tipo: resp.tipo_comprobante,
                    total: resp.total,
                    cliente: resp.cliente,
                    registros: resp.registros,
                    fecha: $('#fechaIn').val()
                },
            })
            .done(function(resp) {
                $('#modalCargando').modal('hide')
                console.log("success");
                if(resp.estatus > 0){
                    Swal.fire({
                         title: 'Factura Generada con exito!',
                         type: 'success',
                         timer: 2000
                     })
                     buscarMovimientos(2);
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
  }
  function timbrarConceptos(){
    $('#timbrarConceptos').hide()
    $('#procesandoAlert').show()
    if (confirm("Estas seguro de facturar?") == true) {
        timbrarConceptos3();
    } else{
        $('#timbrarConceptos').show()
        $('#procesandoAlert').hide()
    }
    
    
  }
  function timbrarConceptos3(){
    $('#modalCargando').modal('show')
    $('#timbrarConceptos').hide()
    $('#procesandoAlert').show()
     var tipoDocu = $("input[name='tipoConceptos']:checked").val();
    
       var oTable = $('#tableCuentas').dataTable();
      var allPages = oTable.fnGetNodes();
      var contador = 0;

    var ids = [];

    console.log(allPages)
   $('input:checked', allPages).each(function(){
   
        ids.push($(this,allPages).val())
    });
     

    console.log(ids)
      

         $.ajax({
             url: "{{url('procesos/facturar_concepto')}}",
             type: 'POST',
             dataType: 'json',
             data: {
                ids: ids,
                fecha: $('#fechaIn').val(),
                tipoDocu: tipoDocu,
            },
         })
         .done(function(resp) {
             console.log(resp);
              if(resp.estatus > 0){
                $('#modalCargando').modal('hide')
                 $('#timbrarConceptos').show()
                $('#procesandoAlert').hide()
                 Swal.fire({
                         title: 'Facturas Generada con exito!',
                         type: 'success',
                     })
                 buscarMovimientos(1)
              }
         })
         .fail(function() {
             console.log("error");
         })
         .always(function() {
             console.log("complete");
         });
         //return false;


    
    
  }
  function timbrarConceptos2(){
    $('#timbrarConceptos').hide()
    $('#procesandoAlert').show()
    
       var oTable = $('#tableCuentas').dataTable();
      var allPages = oTable.fnGetNodes();
      var contador = 0;

    var ids = [];

    console.log(allPages)
   $('input:checked', allPages).each(function(){
   
        ids.push($(this,allPages).val())
    });
     

    console.log(ids)
      
    $.each(ids, function(index, val) {
         $.ajax({
             url: "{{url('procesos/facturar_concepto')}}",
             type: 'POST',
             dataType: 'json',
             async: false,
             success: function (){
                $('#procesandoAlert').show()
            },
             data: {id: val},
            beforeSend: function() {
                    $('#procesandoAlert').show()
                },
         })
         .done(function(resp) {
             console.log(resp);
              if(resp.estatus > 0){
                 guardarFacturaConcepto(resp)
              }
         })
         .fail(function() {
             console.log("error");
         })
         .always(function() {
             console.log("complete");
         });
         //return false;
    });
    $('#procesandoAlert').hide()
    $('#modalCargandoFactConceptos').modal('show')
  }
  function guardarFacturaConcepto(resp){
        $.ajax({
            url: "{{url('procesos/guardar_factura')}}",
            type: 'POST',
            dataType: 'json',
            async: false,
            data: {
                factura_id: resp.factura_id,
                serie: resp.serie,
                folio: resp.folio,
                uuid: resp.uuid,
                tipo: resp.tipo_comprobante,
                total: resp.total,
                cliente: resp.cliente,
                registros: resp.registros,
                fecha: $('#fechaIn').val()
            },
        })
        .done(function(resp2) {
          
            console.log("success");
            if(resp2.estatus > 0){

                html = '<li class="list-inline-item">'+resp.serie+'-'+resp.folio+'</li>'
                $('#listaFacturada').append(html)
                return true;
            }
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
  }
  function ajala(){
     Swal.fire({
                         title: 'Facturas Generada con exito!',
                         type: 'success',
                     })
  }
</script>
@include('comunes.busca_cuenta')

@endpush