@extends('layouts.app', ['activePage' => 'listaInstancias', 'menuParent' => 'consultas', 'titlePage' => __('Instancias')])

@section('content')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-primary card-header-icon">
            <div class="card-icon ">
              <i class="material-icons">list</i>
            </div>
            <h4 class="card-title">Instancias</h4>

          </div>
          <div class="card-body">
            <input type="hidden" id="nomEmpresa" value="{{ $data['empresa']->nombreorganizacion }}">

            <div class="row" align="right">






            
               <div class="col-12" align="right">
                <button class="btn btn-success btn-sm" onclick="nuevaInstanciaModal();">Nueva Instancia</button>
              </div>
            </div>

            <div class="material-datatables">
              <table class="table table-striped table-bordered table-sm table-hover display nowrap" cellspacing="0" width="100%" style="width:100%" id="gridFacturas">
                <thead>
                  <tr>
                    <th class="text-center" colspan="21" id="consultaText"></th>
                  </tr>
                  <tr>

                    <th width="5%">ID</th>
                    <th>Cliente</th>
                    <th>Base Datos</th>
                    <th>URL</th>
                    <!--<th>Acciones</th>-->
                  </tr>

                </thead>

                <tbody>

                </tbody>
                <tfoot>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
       
                </tfoot>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalNuevaInstancia">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Nueva Instancias</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
               <div class="form-group filled bmd-form-group">
                  <label>Nombre Cliente</label>
                  <input type="text" class="form-control form-control-sm" id="cliente">
                </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
               <div class="form-group filled bmd-form-group">
                  <label>Nombre Instacias</label>
                  <input type="text" class="form-control form-control-sm" id="instancia">
                </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" id="btnCrear">Crear Instancia</button>
      </div>
    </div>
  </div>
</div>




<style>
 
 
  #gridFacturas {
    display: block;
    overflow: scroll;
  }

  #gridFacturasPendientes {
    display: block;
    height: 400px;
    overflow: scroll;
  }

  #tableDeposito {
    display: block;
    height: 200px;
    overflow: scroll;
  }

  #swal2-content {
    color: red;
  }
</style>

@endsection

@push('js')
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    loadGrid();
  });
 

    // loadGrid();
    let clicando = false
$('#btnCrear').click(function(){
  if(clicando==false){
        clicando =  true
        var cliente = $('#cliente').val();
        var instancia = $('#instancia').val()
        if(cliente==''){
          Swal.fire({
              title: 'Agrega el nombre del cliente.',
              type: 'warning',
              timer: 1000
          })
          clicando = false
          return false;
        }
        if(instancia==''){
          Swal.fire({
              title: 'Agrega el nombre de la instancia.',
              type: 'warning',
              timer: 1000
          })
          clicando = false
          return false;
        }
        $('#loadingSave').modal('show')
        $.ajax({
          url: '{{ url('configuracion/crea_instancia') }}',
          type: 'POST',
          dataType: 'json',
          data: { cliente: cliente, instancia: instancia },
        })
        .done(function(resp) {
          console.log(resp);
          setTimeout(() => {
                $('#loadingSave').modal('hide')
            }, 1000);
          if(resp.estatus > 1){
            $('#cliente').val('')
            $('#instancia').val('')
            $('#modalNuevaInstancia').modal('hide')
            Swal.fire({
                title: 'Generado Correctamente.',
                type: 'success',
                timer: 5000
            })
            loadGrid();

            clicando = false
            return false;
          }else{
            Swal.fire({
                title: resp.msj,
                type: 'warning',
                timer: 1000
            })
            clicando = false
            return false;
          }
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          console.log("complete");
        });
        
  }else{

  }
});


  function loadGrid() {

    $('#gridFacturas').dataTable().fnDestroy();
    var table = $('#gridFacturas').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true,
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('configuracion/get_instancias')}}",
        type: "POST",
        data: {
          tipo : '',
        },
      },
      columns: [{
          data: "id"
        },
        {
          data: "cliente"
        },
        {
          data: "base_datos"
        },
        {
          data: "estatus",render: function ( data, type, row ) {
               
                  return '<div class="text-center"><a href="https://facturacion.ghp.com.mx/'+row.nombre+'/public/login"><i class="fa-solid fa-globe"></i></a><br>'+row.nombre+'</div>'
              
            }
        },
        /*{
          data: "estatus",render: function ( data, type, row ) {
               
                  return '<div align="center"><span class="badge badge-success">Pagado</span></div>'
              
            }
        },*/

      ],
      order: [
        [0, "desc"]
      ],

      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ],

    });

  }
  function nuevaInstanciaModal(){
    $('#modalNuevaInstancia').modal('show')
  }
</script>
@endpush