@extends('layouts.theme_selector')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-8">
                
                <div class="card ">
                    <div class="card-header">
                        <a href="{{ Route('EmisionMenu') }}" class="text-decoration-none text-primary mr-2">
                            <i class="bi bi-caret-left"></i>
                        </a>
                        Anulaciones Efectivas
                    </div>
                    
                    <div class='card '>
                        <div class="card-body justify-content-center text-center">
                            <p>NOTA: La carga por defecto lista anulaciones de los últimos 7 días inclusive para que sea una carga rápida.</p>
                            <p>Para buscar por rango de fechas o por póliza puntual, complete y envíe:</p>
                            <form action="{{ Route('AnulacionesEfectivasCustom') }}" method="post">
                                @csrf
                                <div class="input-group mx-auto col col-md-8 mb-2">
                                    <input type="text" name="fecha_desde" autocomplete="off" class="form-control  datepicker" placeholder="Desde..." aria-label="Desde..." aria-describedby="button-addon2">
                                    <input type="text" name="fecha_hasta" autocomplete="off" class="form-control  datepicker" placeholder="Hasta..." aria-label="Hasta..." aria-describedby="button-addon2">
                                    <input type="text" name="poliza" class="form-control " placeholder="Póliza..." aria-label="Póliza..." aria-describedby="button-addon2">
                                    <button class="btn btn-outline-success" type="submit" id="button-addon2">Buscar</button>
                                </div>
                            </form>
                            <small class="text-muted">Si se completa la póliza se listan todos los registros salvo que también indique un rango de fechas.</small>

                            <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 " 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('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script type="text/javascript">
        
        $(document).ready( function () {
            // Datepickers
            flatpickr('.datepicker', { dateFormat: 'Y-m-d' });

            // 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: [
                  {
                    extend: 'excel',
                    className: 'btn btn-success' // Override button color to green
                  }
                ],
                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>> ',
                dom: '<"row my-2 justify-content-around"<"col text-left"B><"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')