@extends('layouts.theme_selector')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            
            <div class="card {{ session('theme_card') }}">
                <div class="card-header">
                    <a href="{{ url()->previous() }}" class="text-decoration-none text-primary mr-2">
                        <i class="bi bi-caret-left"></i>
                    </a>
                    Anulaciones Efectivas
                </div>
                
                <div class='card {{ session('theme_bg_black') }} float-left'>
                    <div class="card-body">
                        <p>NOTA: Por defecto se listan anulaciones de los últimos 7 días incusive para que sea una carga rápida.</p>
                        <p>Para elegir la cantidad manualmente, complete aquí: 
                            <form action="{{ Route('AnulacionesEfectivasCustom') }}" method="post">
                                @csrf
                                <div class="input-group">
                                    <input type="text" name="dias" class="form-control col-1 {{ session('theme_bg_black') }}" placeholder="Días..." aria-label="Días..." aria-describedby="button-addon2">
                                    <button class="btn btn-outline-success" type="submit" id="button-addon2">Cargar</button>
                                </div>
                            </form>
                        </p>
                        

                        <div class="lead text-center">
                            @if ($errors->any())
                            <p>{{ $errors->first() }}</p>
                            @endif
                        </div>
                        
                        @if (isset($anulaciones))
                        <table id="tabla_anulaciones_efectivas" class="table table-sm table-hover table-bordered {{ session('theme_table') }}" id="anulaciones_efectivas_table">
                            <caption>Lista de Anulaciones Globales</caption>
                            <thead class="bg-secondary text-white text-center">
                                <tr>
                                    <th scope="col-1">#</th>
                                    <th scope="col-1">Póliza</th>
                                    <th scope="col-1">Codigo Largo</th>
                                    <th scope="col-1">Medio de Pago</th>
                                    <th scope="col-4">Cobertura</th>
                                    <th scope="col-4">Fecha</th>
                                    <th scope="col">Tipo de ...</th>
                                    <th scope="col-2">Motivo de ...</th>
                                    <th scope="col-2">Usuario</th>
                                </tr>
                            </thead>
                            <tbody>
                                                                @foreach($anulaciones as $anulacion)
                                <tr> 
                                    <td>{{ ++$i }}</td>
                                    <td class="text-center">{{ $anulacion->poliza }}</td>
                                    <td class="text-center">{{ $anulacion->codigo_productor }}</td>
                                    <td class="text-center">{{ $anulacion->medio_pago }}</td>
                                    <td class="text-center">{{ $anulacion->cobertura }}</td>
                                    <td class="text-center">{{ $anulacion->fecha }}</td>
                                    <td class="text-center">{{ $anulacion->tipo }}</td>
                                    <td class="text-center">{{ $anulacion->motivo }}</td>
                                    <td class="text-center">{{ $anulacion->usuario }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @endif
                        
                    </div>
                </div>
            </div>
        </div>            
    </div>            
</div>            
@endsection

@push('scripts')
<script type="text/javascript">
    
    $(document).ready( function () {
        // DataTable
        var dt = $('#tabla_anulaciones_efectivas').DataTable({
            initComplete: function () {
                // Apply the search
                this.api().columns().every( function () {
                    var that = this;
                    
                    $( 'input', this.header() ).on( 'keyup change clear', function () {
                        if ( that.search() !== this.value ) {
                            that
                            .search( this.value )
                            .draw();
                        }
                    });
                });
            },
            order: [[5, 'desc']],
            buttons: ['excel'],
            lengthMenu: [ [ 10 ] ],
            // search panes: <"row"<"col"P>>
            // listing <"col my-2"l>
            dom: '<"row my-3 text-center"<"col"B>> <"row my-2 text-center"<"col mx-auto tableFinder"f>> t <"row mt-3"<"col-md-5 mx-auto"p>> ',
            language: {
                url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
            }
        });
    });
    
</script>
@endpush


@include('layouts/datatable')