@extends('layouts.theme_selector')

@section('content')
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-12">

        @include('layouts.alerts.success')

        @include('layouts.alerts.error')

        <div class="card {{ session('theme_card') }}">

          <div class="card-header">Gestionar Solicitud de Baja</div>

          <div class='card {{ session('theme_bg_black') }} float-left'>

            <div class="card-body">

              <div class="lead text-center">
                @if ($errors->any())
                  <p>{{ $errors->first() }}</p>
                @endif
              </div>
                @if(session('message'))
                    <div class="alert alert-success" role="alert">
                        {{ session('message') }}
                    </div>
                @endif
                <form action="{{ route('update_baja') }}" method="POST">
                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="id">ID de Solicitud:</label>
                                <input type="text" class="form-control" id="id" name="registro_id" value="{{ $solicitud->id }}" readonly>
                            </div>

                            <div class="form-group">
                                <label for="poliza">Póliza:</label>
                                <input type="text" class="form-control" id="poliza" name="poliza" value="{{ $solicitud->poliza }}" readonly>
                            </div>
                            <div class="form-group">
                                <label for="fecha_baja">Fecha de Baja:</label>
                                <input type="text" class="form-control" id="fecha_baja"  value="{{ $solicitud->fecha_baja }}" readonly>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="mail">Mail:</label>
                                <input type="email" class="form-control" id="mail" name="mail" value="{{ $solicitud->mail }}" readonly>
                            </div>

                            <div class="form-group">
                                <label for="telefono">Teléfono:</label>
                                <input type="text" class="form-control" id="telefono" name="telefono" value="{{ $solicitud->telefono }}" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="motivo">Motivo:</label>
                                <input type="text" class="form-control" id="motivo" name="motivo" value="{{ $solicitud->motivo }}" readonly>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="estado">Estado:</label>
                                <select class="form-control" id="estado" name="estado">
                                    <option value="Pendiente" {{ $solicitud->estado === 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                                    <option value="Anulada" {{ $solicitud->estado === 'Anulada' ? 'selected' : '' }}>Anulada</option>
                                    <option value="Rechazada" {{ $solicitud->estado === 'Rechazada' ? 'selected' : '' }}>Rechazada</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <a target="_blank" href="https://misegurosp.com.ar/storage/{{$solicitud->frente_dni}}">Ver imagen en otra página</a><br>
                                <img width="400" class="img-dni" src="https://misegurosp.com.ar/storage/{{$solicitud->frente_dni}}" />
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <a target="_blank" href="https://misegurosp.com.ar/storage/{{$solicitud->dorso_dni}}">Ver imagen en otra página</a><br>
                                <img width="400" class="img-dni" src="https://misegurosp.com.ar/storage/{{$solicitud->dorso_dni}}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="comentarios">Comentarios:</label>
                        <textarea class="form-control" id="comentarios" name="comentarios">{{ $solicitud->comentarios }}</textarea>
                    </div>

                    <button type="submit" class="btn btn-primary">Actualizar</button>
                </form>


            </div>

          </div>

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

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

  $(document).ready( function () {
    // DataTable
    var dt = $('#tabla_pendientes').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: [[1, 'desc']],
      buttons: ['excel'],
      lengthMenu: [ [ 20 ] ],
      // 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>> ',
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
      }
    });
  });

  </script>
@endpush

@include('layouts/datatable')