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

              <div class="container-fluid">

                <br>

                <div class="row">
                  <div class="col">
                    <p>Se listan las cuotas 1 vencidas que no fueron pagadas a 72 hs de su inicio de vigencia.</p>
                    <br>
                    <p>Todas fueron debidamente notificados al email registrado en la póliza, listado a continuación.</p>
                  </div>
                </div>

                <br>

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

                <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_cuotas)
                      <table id="tablaCuotasVencidas" class="table table-sm table-responsive table-hover mx-auto">
                        <thead class="text-center table-active">
                          <tr>
                            <th>Poliza</th>
                            <th>Cuota</th>
                            <th>Fecha Venc</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>DNI</th>
                            <th>Email</th>
                            <th>Patente</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                          </tr>
                        </thead>

                        <tbody>
                                                    @foreach( $lista_cuotas as $cuota)
                            {{-- {{dd($cuota)}} --}}
                            <tr class="text-center">
                              <td> <span> {{ $cuota->poliza ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->cuota ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->fecha_vencida ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->asegurado_nombre ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->asegurado_apellido ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->asegurado_documento ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->asegurado_email ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->patente ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->marca ?? '' }} </span> </td>
                              <td> <span> {{ $cuota->modelo ?? '' }} </span> </td>
                            </tr>
                          @endforeach
                        </tbody>

                        <tfoot>
                          <tr class="text-center">
                            <th>Poliza</th>
                            <th>Cuota</th>
                            <th>Fecha Venc</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>DNI</th>
                            <th>Email</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() {
    $('#tabla_endosos').DataTable( {
      responsive: true
    });
    var dt = $('#tablaCuotasVencidas').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: [[0, '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
    $('#tablaCuotasVencidas 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