@extends('voyager::master')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('breadcrumbs')
    <ol class="breadcrumb hidden-xs">
        <li class="active">
            <a href="{{ route('voyager.dashboard') }}"><i class="voyager-boat"></i>
                {{ __('voyager::generic.dashboard') }}</a>
        </li>
        <li class="">
            <a href=""><i class="voyager-volume-up"></i>
                Recibos de pago ICA</a>
        </li>
    </ol>
@endsection
@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="voyager-volume-up"></i> Recibos de pago ICA
        </h1>
        <label for="empresa">Conexión: <label>
            <select class="form-control empresas">
                @foreach ($empresas as $empresa)
                <option value="{{ $empresa->codigo }}">{{ $empresa->nombre }}</option>
                @endforeach
            </select>
        @include('voyager::multilingual.language-selector')
    </div>
@stop

@section('content')
    <div class="col-md-12">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="datatableICA" name="datatableICA" class="dataTables_wrapper form-inline dt-bootstrap no-footer"
                        cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th class="text-center">Num recibo</th>
                                <th class="text-center">Fecha Limite</th>
                                <th class="text-center">Empresa</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Total a pagar</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
<script type="text/javascript" src="https://checkout.wompi.co/widget.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.empresas').select2();
            $('.empresas').select2({
            placeholder: "Seleccione Una Opción",
            allowClear: true,
            tags: false,
            width: 220,

        });
        $(".empresas").on('change', function(){
            $('#datatableICA').dataTable().fnClearTable();
            $('#datatableICA').dataTable().fnDestroy();
            $('#datatableICA').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"
					}
				},
				serverSide: true,
	            processing: true,
	            pageLength: 10,
	            lengthChange: true,
	            ajax: {
	                url: "{{ url('/v1/ica/dataTableRecibosPagos') }}",
	                type: 'GET',
	                data: function(data) {
	                    data.empresa = $(".empresas").val()
	                }
                },
	            columns: [
	                {data: 'numero_recibo',orderable: true, searchable: true, className: 'text-center'},
	                {data: 'fecha_limite_pago', orderable: true, searchable: true, className: 'text-center'},
	                {data: 'empresa_id', orderable: true, searchable: true, className: 'text-center'},
					{data: 'estado', orderable: true, searchable: true, className: 'text-center'},
	                {data: 'total_pagar', orderable: true, searchable: true, className: 'text-center'}
	            ]
	        });
	    });
    });
    </script>
@endsection