@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
  <!-- DataTables -->
  <link href="/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-autofill/css/autoFill.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-colreorder/css/colReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-datetime/css/dataTables.dateTime.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedheader/css/fixedHeader.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowgroup/css/rowGroup.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-scroller/css/scroller.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchbuilder/css/searchBuilder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchpanes/css/searchPanes.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-select/css/select.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-staterestore/css/stateRestore.bootstrap4.min.css" rel="stylesheet">  
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-receipt fa-xs"></i> {{ __('Convenios') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Convenios</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="card">
                  
                    <div class="card-header">
                      {{-- <h3 class="card-title">{{ __('convenios.lista.titulo') }}</h3> --}}
                      <a href="{{ route('convenios.create') }}" class="btn bg-primary">Nuevo Convenio</a>                                            
                      <div class="card-tools">
                        <div class="input-group input-group-sm" style="width: 183px;">
                          <button type="button" class="btn btn-default btn-block" data-toggle="collapse" data-target="#searchFilters" aria-expanded="false" aria-controls="searchFilters">Búsqueda avanzada &nbsp;<i class="fa fa-search"></i></button>
                        </div>
                      </div>
                    </div>
                    <!-- /.card-header -->

                    <div class="card-body table-responsive p-0">

                      <!-- search filters -->
                      <form action="{{ route('convenios.search') }}" method="POST" novalidate="novalidate">
                        @csrf
                        <div class="collapse @if (isset($someFilter) && $someFilter === true) show @endif" id="searchFilters">
                          <div class="card card-body">
                            <div class="row">

                              <div class="col-sm-12">
                                <h3 class="m-0"><i class="nav-icon fas fa-filter fa-xs"></i> Filtros de búsqueda</h3><br>
                              </div>                          

                              <div class="col-md-3">
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" title="Indique el Destino"><i class="fas fa-users"></i></span>
                                  </div>
                                  <select class="select2bs4" data-placeholder="Indique el Destino" name="destino_id">
                                    <option value="0" selected>Todos</option>
                                    @foreach(App\Enums\ConvenioDestinoEnum::cases() as $destino)
                                      <option value="{{ $destino->value }}" {{ (isset($destino_id) && $destino_id == $destino->value) ? 'selected' : '' }}>{{ $destino->label() }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>

                              <div class="col-md-3">
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" title="Indique el Tipo"><i class="fas fa-cog"></i></span>
                                  </div>
                                  <select class="select2bs4" data-placeholder="Indique el Tipo" name="tipo_id">
                                    <option value="0" selected>Todos</option>
                                    @foreach(App\Enums\ConvenioTipoEnum::cases() as $tipo)
                                      <option value="{{ $tipo->value }}" {{ (isset($tipo_id) && $tipo_id == $tipo->value) ? 'selected' : '' }}>{{ $tipo->label() }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>

                              <div class="col-md-3">
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" title="Indique el estado"><i class="fas fa-receipt"></i></span>
                                  </div>
                                  <select class="select2bs4" data-placeholder="Indique el Estado" name="estado_id">
                                    <option value="-1">Todos</option>
                                    @foreach(App\Enums\ConvenioEstadoEnum::cases() as $estado)
                                      <option value="{{ $estado->value }}" {{ (isset($estado_id) && $estado_id == $estado->value) ? 'selected' : '' }}>{{ $estado->label() }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>

                              <div class="col-sm-12 text-right">
                                <a href="{{ route('convenios.index') }}" class="btn btn-default"><i class="fa fa-sync"></i>&nbsp;Limpiar</a>
                                <button type="submit" class="btn btn-warning">Buscar &nbsp;<i class="fa fa-search"></i></button>
                              </div>

                            </div>
                          </div>
                        </div>
                      </form>
                      <!-- /search filters -->
                      
                    </div>
                    <!-- /.card-body -->
                    
                </div>
                <!-- /.card -->
                
                <div class="card">
                  
                  <div class="card-header">
                    @if(!@empty(session('message')))
                    <hr class="hr hr-blurry" />
                        @switch(session('type'))
                            @case('OK')
                              <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-check"></i> Listo!</h5>
                                {{ session('message') }}
                              </div>
                                @break
                            @default
                              <div class="alert alert-warning alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                                {{ session('message') }}
                              </div>
                        @endswitch
                    @endif
                  </div>
                  <!-- /.card-header -->
                  
                  <div class="card-body">
                    <table id="conveniosTable" class="table table-bordered table-striped">
                        <thead>
                          <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Fecha</th>
                            <th class="text-center">Destino</th>
                            <th class="text-center">Tipo</th>
                            <th class="text-center">Titular/es</th>
                            <th class="text-center">Descripción</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">Cuota</th>
                            <th class="text-center">Cuotas</th>
                            <th class="text-center">Excepciones</th>
                            <th class="text-center">Estado</th>
                            <th class="text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>
                          {{-- @if (empty($convenios) || count($convenios) == 0)
                                <tr>
                                  <td colspan="8" class="text-center">No existen convenios registrados.</td>
                                </tr>
                            @endif --}}
                            @foreach($convenios as $convenio)
                            <tr>
                              <td class="text-center align-middle">{{ $convenio->id }}</td>
                              <td class="text-center align-middle">{{ $convenio->created_at->format('d/m/Y') }}</td>
                                <td class="text-center align-middle">{{ $convenio->destino_id->label() }}</td>
                                <td class="text-center align-middle">{!! $convenio->tipo_id->icon() !!}</td>
                                @if($convenio->socio_id)
                                <td class="text-center align-middle">{{ $convenio->socio->nombres }} {{ $convenio->socio->apellidos }}</td>
                                @elseif($convenio->inquilino_id)
                                <td class="text-center align-middle">{{ $convenio->inquilino->nombres }} {{ $convenio->inquilino->apellidos }}</td>
                                @else
                                <td class="text-center align-middle"><span class="text-muted">Todos</span></td>
                                @endif
                                <td class="text-center align-middle">{{ $convenio->descripcion }}</td>
                                <td class="text-center align-middle">{{ $convenio->moneda->simbolo }} {{ number_format($convenio->total, 2) }}</td>
                                <td class="text-center align-middle">{{ $convenio->moneda->simbolo }} {{ number_format($convenio->total / $convenio->cuotas_total, 2) }}</td>
                                <td class="text-center align-middle">{{ $convenio->cuotas_restantes }}/{{ $convenio->cuotas_total }}</td>
                                <td class="text-center align-middle">
                                  @if($convenio->excepciones)
                                    @if($convenio->excepciones->count() > 0)
                                      <span class="badge bg-danger">{{ $convenio->excepciones->count() }}</span>
                                    @else
                                      <span class="text-muted">0</span>
                                    @endif
                                  @endif
                                </td>
                                <td class="text-center align-middle"> 
                                    <span class="badge bg-information">{{ $convenio->estado_id->label() }}</span>
                                </td>                                
                                <td class="text-center align-middle">
                                  <a class="btn btn-info btn-sm" href="{{ route('convenios.show', $convenio->id) }}">
                                    <i class="fas fa-eye"></i> Ver
                                  </a>
                                  {{-- <a href="{{ route('convenios.print', $convenio->id) }}" rel="noopener" target="_blank" class="btn btn-default btn-sm">
                                    <i class="fas fa-print"></i>  Imprimir
                                  </a> --}}
                                  <button class="btn btn-default btn-sm" onclick="printContentFromIframe( {{ $convenio->id }} )"><i class="fas fa-print"></i>  Imprimir</button>
                                </td>
                            </tr>                          
                            @endforeach
                        </tbody>
                        <tfoot>                          
                        </tfoot>
                      </table>
                    </div>
                    <!-- /.card-body -->

                  </div>
                  <!-- /.card -->

            </div>
        </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-form" action="" method="POST">
          @csrf
          @method('DELETE')
        <div class="modal-header">
          <h4 class="modal-title">Eliminar</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿Confirmas eliminar el Convenio?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Eliminar</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-link" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="overlay">
          <i class="fas fa-2x fa-sync fa-spin"></i>
        </div>
        <div class="modal-header">
          <h4 class="modal-title">Vincular Socio</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Socios</h3>
                  <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 150px;">
                      <input type="text" name="table_search" class="form-control float-right" placeholder="Buscar">  
                      <div class="input-group-append">
                        <button type="submit" class="btn btn-default">
                          <i class="fas fa-search"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                  <table class="table table-sm table-hover text-nowrap" id="socio-table-list">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Nombres</th>
                        <th>Apellidos</th>
                        <th>Documento</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">Vincular</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-printed" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Confirma</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿El convenio se imprimió correctamente?</p>
          <input type="hidden" name="convenio_id" id="convenio_id" value="">
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-error" data-dismiss="modal">No</button>
          <button type="button" class="btn btn-success" data-dismiss="modal" id="modal-printed-yes">Si</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

@endsection

@section('custom-scripts')
@section('custom-scripts')
  <!-- Select2 -->
  <script src="/plugins/select2/js/select2.full.min.js"></script>

  <!-- DataTables  & Plugins -->
  <script src="/plugins/jszip/jszip.min.js"></script>
  <script src="/plugins/pdfmake/pdfmake.min.js"></script>
  <script src="/plugins/pdfmake/vfs_fonts.js"></script>
  <script src="/plugins/datatables/dataTables.min.js"></script>
  <script src="/plugins/datatables/dataTables.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-autofill/js/dataTables.autoFill.min.js"></script>
  <script src="/plugins/datatables-autofill/js/autoFill.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="/plugins/datatables-colreorder/js/dataTables.colReorder.min.js"></script>
  <script src="/plugins/datatables-datetime/js/dataTables.dateTime.min.js"></script>
  <script src="/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
  <script src="/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
  <script src="/plugins/datatables-keytable/js/dataTables.keyTable.min.js"></script>
  <script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="/plugins/datatables-responsive/js/responsive.bootstrap4.js"></script>
  <script src="/plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
  <script src="/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
  <script src="/plugins/datatables-scroller/js/dataTables.scroller.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/searchBuilder.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/dataTables.searchPanes.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/searchPanes.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-select/js/dataTables.select.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/dataTables.stateRestore.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/stateRestore.bootstrap4.min.js"></script>

  <script>

    $(function () {

      //Initialize Select2 Elements
      $('.select2').select2()

      //Initialize Select2 Elements
      $('.select2bs4').select2({
        theme: 'bootstrap4'
      })

      let exportFormatter = {
        columns: [0,1,2,3,4,5,6,7,8,9,10],
        // stripHtml: true,
        format: {
            body: function (data, row, column, node) {
                // Strip $ from salary column to make it numeric
                // return column === 3 ? data.replace(/[$,]/g, '') : data;
                
                if(column === 3 && data === '<i class="fas fa-user" title="Individual"></i>'){
                  data = 'Individual';
                }else if(column === 3 && data === '<i class="fas fa-users" title="Colectivo"></i>'){
                  data = 'Colectivo';
                }

                if(column === 4 && data === '<span class="text-muted">Todos</span>'){
                  data = 'Todos';
                }

                if(column === 9 && data.includes('badge bg-danger')){
                  data = data.replace(/<[^>]+>/g, '').trim();
                }else if(column === 9 && data.includes('text-muted')){
                  data = '0';
                }

                if(column === 10 && data.includes('badge bg-information')){
                  data = data.replace(/<[^>]+>/g, '').trim();
                }

                return data;
            }              
        }
      };

      $("#conveniosTable").DataTable({
        responsive: true, 
        lengthChange: false, 
        autoWidth: false,        
        layout: {
            topStart: {
                buttons: [
                  "copy", 
                  "excel", 
                  {
                      extend: 'pdf',
                      title: 'Listado de Convenios - COVISUNCA 456',
                      // messageTop: 'Sistema de gestión.',
                      // messageBottom: 'Generado el ' + new Date().toLocaleDateString(),
                      orientation: 'landscape',
                      pageSize: 'A4',
                      exportOptions: exportFormatter,
                      customize: function (doc) {
                          // Define a footer function that runs for every page
                          doc['footer'] = function(page, pages) {
                              return {
                                  columns: [
                                      'Generado el ' + new Date().toLocaleDateString(),
                                      {
                                          // Right alignment for page numbers
                                          alignment: 'right',
                                          text: [
                                              { text: page.toString(), italics: true },
                                              ' de ',
                                              { text: pages.toString(), italics: true }
                                          ]
                                      }
                                  ],
                                  margin: [30, 0] // [left, top, right, bottom]
                              };
                          };
                      }
                  },
                  "print"
                ] //"csv","colvis"
            },
            // bottomStart: {
            //   info: {
            //       empty: 'Ningún dato disponible en esta tabla.'
            //   }
            // }
        },
        language: {
            url: '/plugins/datatables-i18n/es-ES.json',
        }
      }); //.buttons().container().appendTo('#unidadesTable_wrapper .col-md-6:eq(0)');            

    });

    $('#modal-delete').on('show.bs.modal', function (event) {
    
      var button = $(event.relatedTarget);
      $('#delete-form').attr('action', button.data('form-action'));
    
    });

    $('#modal-link').on('show.bs.modal', function (event) {
    
      // var button = $(event.relatedTarget);
      // $('#delete-form').attr('action', button.data('form-action'));
      socioSearch('marcenaro');
    
    });

    $('#modal-printed').on('show.bs.modal', function (event) {
    
      var button = $(event.relatedTarget) // Button that triggered the modal      
    
    });
    
    $("#modal-printed-yes").on("click", function(){
      console.log("yes clicked");
      window.location.href = "/convenios/after-print/" + $('#convenio_id').val();
    });

    function socioSearch($apellidos)
    {
      var parameters = {apellidos:$apellidos};

      $('.overlay').css("display", "flex");

      $.ajax({
          url:'/socios/search',
          type: 'GET',
          headers:{"content-type" : "application/json"},
          data: JSON.stringify(parameters),
          success: function(response) {
            populateSocioTable(response);
            $('.overlay').css("display", "none");
          },
          error: function(error) {
            $('.overlay').css("display", "none");
            console.error('Error fetching data:', error);
          }
      });

    }
    
    function populateSocioTable(data) 
    {
      
      $('#socio-table-list tbody').empty();

      if(data.length > 0){

        $.each(data, function(index, item) {
            var row = '<tr>';
            row += '<td>' + item.id + '</td>';
            row += '<td>' + item.nombres + '</td>';
            row += '<td>' + item.apellidos + '</td>';
            row += '<td>' + item.documento_identidad + '</td>';
            row += '<td><i class="fas fa-handshake text-primary"></i></td>';
            row += '</tr>';
            $('#socio-table-list tbody').append(row);
        });

      }else{
        
        var row = '<tr><td colspan="5">No hay socios registrados con ese criterio</td></tr>';
        $('#socio-table-list tbody').append(row);

      }    

    }

    function closePrint (convenioId) {
      const myModal = new bootstrap.Modal(document.getElementById('modal-printed'));
      myModal.show();
    }

    function setPrint (convenioId) {
      this.contentWindow.__container__ = this;
      this.contentWindow.onbeforeunload = closePrint(convenioId);
      this.contentWindow.onafterprint = closePrint(convenioId);
      this.contentWindow.focus(); // Required for IE
      this.contentWindow.print();
    }

    //Print Report
    function printContentFromIframe(convenioId) {      

      $('#convenio_id').val(convenioId);

      var iFrame = document.createElement("iframe");

      iFrame.id = 'hidden-frame';
      iFrame.onload = setPrint;
      iFrame.style.position = "fixed";
      iFrame.style.right = '100%'; // Move off-screen
      iFrame.style.bottom = '100%'; // Move off-screen
      iFrame.style.width = "0";
      iFrame.style.height = "0";
      iFrame.style.border = "0";
      iFrame.src = "/convenios/print/" + convenioId;

      document.body.appendChild(iFrame);
      
    }

  </script>
@endsection