@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">Renovaciones</div>

              <div class="container-fluid">

                <br>
                <div class="row">
                  <div class="col">
                    <p>Agregamos los datos "Inicio de Vigencia" y "Forma de Pago" a la tabla</p>
                    <br>
                    <p>Los registros ingresados previos a esta modificación tienen los datos en blanco.</p>
                  </div>
                </div>

                <br>

                <hr class="mx-auto col-6">

                <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_renovaciones)
                      <table id="tablaRenovaciones" class="table table-sm table-responsive table-hover mx-auto">
                        <thead class="text-center table-active">
                          <tr>
                            <th>Poliza Original</th>
                            <th>Poliza Nueva</th>
                            <th>Patente</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Email</th>
                            <th>Telefono</th>
                            <th>Cobertura</th>
                            <th>Ini. Vigencia</th>
                            <th>Forma Pago</th>
                          </tr>
                        </thead>

                        <tbody>
                                                    @foreach( $lista_renovaciones as $renovacion)
                            {{-- {{dd($renovacion)}} --}}
                            <tr class="text-center">
                              <td> <span> {{ $renovacion->poliza_original ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->poliza_nueva ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->patente ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->nombre ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->apellido ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->email ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->telefono ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->cobertura ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->vigencia_desde ?? '' }} </span> </td>
                              <td> <span> {{ $renovacion->forma_pago ?? '' }} </span> </td>
                            </tr>
                          @endforeach
                        </tbody>

                        <tfoot>
                          <tr class="text-center">
                            <th>Pza original</th>
                            <th>Pza nueva</th>
                            <th>Patente</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Email</th>
                            <th>Tel</th>
                            <th>Cobertura</th>
                            <th>Ini. Vig.</th>
                            <th>Forma Pago</th>
                          </tr>
                        </tfoot>

                      </table>
                    @endif

                </div>

                <br>

              </div>

            </div>
          </div>

        </div>

    </section>
  <main>
@endsection

@push('scripts')
  <script>
  $(document).ready(function() {
    $('#tabla_endosos').DataTable( {
      responsive: true
    });
    var dt = $('#tablaRenovaciones').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: [[1, '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
    $('#tablaRenovaciones 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