@extends('layouts.app')

@section('content')
  <main id="idContenedor">

    <section id="secPortalSanpa" class="paddingtop contGenerico">
      <div class="container containerBootstrap">
        <div class="row justify-content-center">
          <div class="col-md-10">
            <div class="card card-contentBootstrap">

              <div class="card-header">Anulaciones</div>

              <div class="container-fluid">

                <br>

                <p class="mx-2">Pólizas anuladas por falta de pago</p>

                <br>

                <div class="row text-center">

                  <div class="col-12">

                    <br>

                    @if ($errors->any())
                      <div class="col-6 mx-auto alert alert-info alert-dismissible fade show" role="alert">
                        {{ $errors->first() }}
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                      </div>
                    @endif


                    @if ($lista_anulaciones)
                      {{-- {{dd($lista_anulaciones)}} --}}
                      <table id="tablaAnulaciones" class="table table-sm table-responsive table-hover mx-auto">
                        <thead class="text-center table-active">
                          <tr>
                            <th>#</th>
                            <th>Poliza</th>
                            <th>Fecha Anulacion</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Email</th>
                            <th>Telefono</th>
                            <th>Patente</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                          </tr>
                        </thead>

                        <tbody>
                                                    @foreach ($lista_anulaciones as $anulacion)
                            {{-- {{dd($anulacion)}} --}}
                            <tr class="text-center">
                              <td> <span> {{ $index++ }} </span> </td>
                              <td> <span> {{ $anulacion->poliza_numero ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->fecha_anulacion ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->asegurado_nombre ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->asegurado_apellido ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->asegurado_email ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->asegurado_telefono ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->patente ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->marca ?? '' }} </span> </td>
                              <td> <span> {{ $anulacion->modelo ?? '' }} </span> </td>
                            </tr>
                          @endforeach
                        </tbody>

                        <tfoot>
                          <tr class="text-center">
                            <th>FILTROS:</th>
                            <th>Poliza</th>
                            <th>Fecha Anulacion</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Email</th>
                            <th>Tel</th>
                            <th>Patente</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                          </tr>
                        </tfoot>

                      </table>
                    @endif

                </div>

                <br>

              </div>

            </div>
          </div>

        </div>

    </section>
  <main>
@endsection

@push('scripts')
  <script>
  $(document).ready(function() {
    var dt = $('#tablaAnulaciones').DataTable({
      initComplete: function () {
        // Apply the search
        this.api().columns().every( function () {
          var that = this;

          $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
              that
              .search( this.value )
              .draw();
            }
          } );
        } );
      },
      searchPanes: {
        i18n: {
          emptyMessage: "<i><b>Vacio</b></i>"
        },
        cascadePanes: true,
        layout: 'columns-3',
        columns: [2, 5, 7],
      },
      buttons: ['excel'],
      order: [[2, 'desc']],
      responsive: true,
      // search panes: <"row"<"col"P>>     global search: <"row"<"col"f>>
      dom: '<"row"<"col"t>> <"row"<"col my-2"l><"col my-2"p>> <"row my-3 text-center"<"col"B>> <r> ',
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
      }
    });

    // Search filter footer
    $('#tablaAnulaciones tfoot th').each( function () {
      var title = $(this).text();
      if (title === '' || title === 'FILTROS:') return;
      $(this).html( '<input type="text" class="col col-md-9 " placeholder="'+title+'" />' );
    });
  });
  </script>
@endpush