@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row py-md-2">
        
        <div class="col-md-6">
        <a href="{{ route('combos.create') }}" class="btn btn-success">Nuevo Combo</a>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered" id="tbl_combos">
                <thead>
                    <tr>
                        <td>Id</td>
                        <td>Nombre</td>
                        <td>Descripcion</td>
                        <td>Estatus</td>
                        <td>Accion</td>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@stop
@push('scripts')
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> defer</script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
var tblProducts;
$( document ).ready(function() {
   
    tblProducts =  $('#tbl_combos').DataTable({
        processing: true,
        serverSide: false,
        dom: 'lBfrtip',
        ajax: {
          url: '{!! route('combosdata') !!}',
        },
        language: {
              "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
              },
              dom: 'Bfrtip',
        buttons: [
            { extend:'pdf',
              exportOptions: {
                modifier: {
                  page: 'all',
                  search: 'none'   
                }
              },
              customize: function (doc) {
            var tblBody = doc.content[1].table.body;
                for(var i=0;i<tblBody[0].length;i++){
                  tblBody[0][i].fillColor = '#FFFFFF';
                  tblBody[0][i].color = 'black';
                }
           
 
                        var objLayout = {};
                        objLayout['hLineWidth'] = function(i) { return .5; };
                        objLayout['vLineWidth'] = function(i) { return .5; };
                        objLayout['hLineColor'] = function(i) { return '#aaa'; };
                        objLayout['vLineColor'] = function(i) { return '#aaa'; };
                        objLayout['paddingLeft'] = function(i) { return 4; };
                        objLayout['paddingRight'] = function(i) { return 4; };
                        doc.content[1].layout = objLayout;
                        var obj = {};
                        obj['hLineWidth'] =  function(i) { return .5; };
                        obj['hLineColor'] = function(i) { return '#aaa'; };
                     //   doc.content[1].margin = [ 150, 0, 150, 0 ];
            }
            }
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'description', name: 'description' },
            { data: 'status', name: 'status' },
            { data: 'id', name: 'id' }
        ],
        aoColumnDefs: [
            {
                "targets":[3],
                "mRender": function (data,type, row) {
                    var status = 'Activa';
                    if(data == '0') {
                        status = 'No Activa';
                    }
                    return status;
                }
            },
            {
                "targets":[4],
                "mRender": function (data,type, row) {
                    return "<a href='#' class='btn btn-success btnEdit' data-id='"+row.id+"' >Editar</a>";
                }
            }
        ]
    });

    $(document).on('click','.btnEdit', function() {
        
        var urlr = "{{ route('combos.show','id') }}";
        var url = urlr.replace('id',$(this).data('id'));

        window.location.replace( url );
    })
    
});

</script>
@endpush