@extends('layouts.theme_selector')

@section('content')
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <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>
            Buzon de Salida
          </div>

          <div class="card-body {{ session('theme_bg_black') }}">

            <p>Debido a la enorme cantidad de registros en el buzon, es necesario acotar los rangos de búsqueda y/o especificar lo que se desea ver para evitar largos períodos de espera.</p>
            <p>Puede dejar en blanco el filtro que no desea aplicar.</p>
            <p>Puede reenviarse el mismo mail que fue enviado pero a su propio mail para ver cómo fue recibido. El reenvío no es instantáneo, va a la cola de envíos del Buzón.</p>

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

            {{-- CUSTOM SEARCH PANES --}}
            <form class="form" action="{{route('FiltrarBuzon')}}" method="post">
              @csrf

              <div class="row  mx-auto justify-content-center text-center">

                <div class="col-md border border-secondary rounded pb-1 m-2 col-sm-auto">
                  <p class="lead my-0 py-2 align-middle">Estado:</p>
                  <select class="form-control custom-select {{session('theme_bg_black')}} col-md my-2" name="estado">
                    <option value="" selected>Vacío</option>
                    <option value="nuevo" {{ old('estado') == 'nuevo' ? 'selected' : '' }}>Nuevo</option>
                    <option value="enviado" {{ old('estado') == 'enviado' ? 'selected' : '' }}>Enviado</option>
                    <option value="error" {{ old('estado') == 'error' ? 'selected' : '' }}>Error</option>
                  </select>
                </div>

                <div class="col-md-2 border border-secondary rounded pb-1 m-2 col-sm-auto">
                  <p class="lead my-0 py-2 align-middle">Destinatario:</p>
                  <input class="{{session('theme_bg_black')}} form-control col-md my-2" type="text" name="destinatario" placeholder="Email o Cel" value="{{old('destinatario') ?? ''}}">
                </div>

                <div class="col-md border border-secondary rounded pb-1 m-2 col-sm-auto">
                  <p class="lead my-0 py-2 align-middle">Poliza:</p>
                  <input class="{{session('theme_bg_black')}} form-control col-md my-2" type="text" name="poliza" placeholder="Número" value="{{old('poliza') ?? ''}}">
                </div>

                <div class="col-md border border-secondary rounded m-2 col-sm-auto">
                  <p class="lead">Proceso:</p>
                  <select class="form-control custom-select {{session('theme_bg_black')}} col-md my-2" name="proceso_id">
                    <option value="" selected>Vacío</option>
                    @foreach ($lista_procesos as $proceso)
                      <option value="{{$proceso->id}}" {{old('proceso_id') == $proceso->id ? 'selected' : '' }} >{{$proceso->descripcion}}</option>
                    @endforeach
                  </select>
                </div>

                <div class="col-md border border-secondary rounded pb-1 m-2 col-sm-auto">
                  <p class="lead my-0 py-2 align-middle">Entidad:</p>
                  <select class="form-control custom-select {{session('theme_bg_black')}} col-md my-2" name="entidad">
                    <option value="" selected>Vacío</option>
                    <option value="AMEX" {{old('entidad') == 'AMEX' ? 'selected' : ''}}>AMEX</option>
                    <option value="CABAL" {{old('entidad') == 'CABAL' ? 'selected' : ''}}>CABAL</option>
                    <option value="CBU" {{old('entidad') == 'CBU' ? 'selected' : ''}}>CBU</option>
                    <option value="MASTERCARD" {{old('entidad') == 'MASTERCARD' ? 'selected' : ''}}>MASTERCARD</option>
                    <option value="NARANJA" {{old('entidad') == 'NARANJA' ? 'selected' : ''}}>NARANJA</option>
                    <option value="VISA" {{old('entidad') == 'VISA' ? 'selected' : ''}}>VISA</option>
                  </select>
                </div>

                <div class="col-md border border-secondary rounded py-2 m-2 col-sm-auto">
                  <p class="lead">Fecha:</p>
                  <div class="form-group">
                    <input class="col form-control {{session('theme_bg_black')}}" name="fecha_desde" type='date' value="{{old('fecha_desde') ?? ''}}" />
                  </div>
                  <p>hasta</p>
                  <div class="form-group">
                    <input name="fecha_hasta" type='date' class="form-control {{session('theme_bg_black')}}" value="{{old('fecha_hasta') == '' ? date('Y-m-d') : old('fecha_hasta')}}"/>
                  </div>
                </div>

              </div>

              <div class="row my-3 text-center">
                <div class="col-sm mt-3">
                  <button class="btn btn-outline-success mx-auto" type="submit">Aplicar</button>
                </div>
              </div>

            </form>
            {{-- END SEARCH FORM --}}

            <br>

            @if (session('mensajes'))
              <hr class="col-6 mx-auto">
              <br>

              <table id="tabla_mensajes" class="table table-sm table-hover table-bordered {{ session('theme_table') }}">
                <caption>Lista de Mensajes</caption>
                <thead class="bg-secondary text-center text-white">
                  <th>Canal</th>
                  <th>Proceso</th>
                  <th>Template</th>
                  <th>Propuesta</th>
                  <th>Poliza</th>
                  <th>Fecha</th>
                  <th>Log</th>
                  <th>Estado</th>
                  <th>Intentos</th>
                  <th>Mensaje</th>
                  <th>Destinatario</th>
                  <th>Acciones</th>
                </thead>
                <tbody>
                  @foreach (session('mensajes') as $mensaje)
                    <tr class="text-center">
                      <th class="align-middle">{{ $mensaje->destino_id == 1 ? 'Email' : 'Sms' }} </th>
                      <th class="align-middle">{{ $mensaje->Descripcion ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->template_id ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->PropuestaID ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->NumeroPoliza ?? '-' }} </th>
                      <th class="align-middle">{{ substr($mensaje->auxFecha, '0', '16') ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->auxString ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->estado ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->intentos ?? '-' }} </th>
                      <th class="align-middle">{{ $mensaje->mensaje ?? '' }}</th>
                      <th class="align-middle">{{ $mensaje->destinatario ?? '-' }} </th>
                      <th class="align-middle">
                        <a class="btn btn-outline-primary" onclick="window.open(this.href, this.target, 'width=450,height=200'); return false;" href="{{route('MockBuzon', ['id' => $mensaje->id])}}" target="_blank">Reenviarme</a>
                      </th>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            @endif

          </div>

        </div>

        <br>
        @include('layouts.alerts.success')

        @include('layouts.alerts.error')

      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">

  $(document).ready( function () {
    // DataTable
    var dt = $('#tabla_mensajes').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']],
      lengthMenu: [ [ 20 ] ],
      buttons: ['excel'],
      // search panes: <"row"<"col"P>>
      // listing <"col my-2"l>
      dom: '<"row text-white justify-content-center"<"col col-md-2 py-0 my-2"B><"col col-md-2 my-2 py-0 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')