@extends('layouts.app', ['activePage' => 'clientes'])

@section('content')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row justify-content-between">
              <div class="col-md-3">
                <div class="form-group">
                  <label>Clientes</label>
                  <select id="filClientes" class="form-control" onchange="loadGrid();">
                    <option value="0">Todos</option>
                    @foreach($clientes as $p)
                    <option value="{{ $p->Id }}">{{ $p->Nombre }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-9 row justify-content-end">
                <div class="col-2" align="right">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Monto Inicial
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelNumsMonto">$100.00</div>
                </div>
                <div class="col-2" align="right">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Monto Pagado
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelNumsPagado">$80.00</div>
                </div>
                <div class="col-2" align="right">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                    Saldo Actual
                  </div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800" id="labelNumsSaldo">$20.00</div>
                </div>
              </div>
            </div>
            <div class="row tablesss">
              <div class="col-12 table-responsive">
                <table class="table table-bordered table-hover" id="gridCategos">
                  <thead>
                    <tr>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Proveedor</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Monto Inicial</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Monto Pagado</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Saldo Actual</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                      <th class="text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>..CLIENTE MOSTRADOR</td>
                      <td>$100.00</td>
                      <td>$80.00</td>
                      <td>$20.00</td>
                      <td>
                        <div align="center">
                          <span class="badge badge-success">Al Corriente</span>
                        </div>
                      </td>
                      <td>
                        <div align="center">
                          <a href="{{url('operaciones/cxc/1')}}" class="btn btn-primary btn-sm">Ver</a>
                          <a class="btn btn-secondary btn-sm" target="_blank" href="{{url('operaciones/cxc/imprimir')}}"><i class="fa fa-file-pdf" aria-hidden="true"></i></a>
                          <button class="btn btn-secondary btn-sm" onclick="enviarModal();"><i class="fa fa-envelope" aria-hidden="true"></i></button>

                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="envioCorreo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Enviar pedido por correo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group" style="display: none;">
            <label for="">Tipo de documento</label>
            <select id="tipoDoc" class="form-control col-6">
              <option value="0" selected>Copia</option>
              <option value="1">Original</option>
            </select>
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Para:</label>
            <input type="text" class="form-control" id="destino">
            <input type="hidden" class="form-control" id="idClienteHidden" disabled>
            <input type="hidden" class="form-control" id="idCxc" disabled>
          </div>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Asunto:</label>
            <input type="text" class="form-control" id="asunto">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Cuerpo de correo:</label>
            <textarea class="form-control" id="cuerpo"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="enviarCorreo();">Enviar correo</button>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    // $('.select2').select2({
    //   width: '100%'
    // })
    new Choices($('#filClientes')[0]);

    loadGrid();
  });

  function loadGrid() {

    //$('#').DataTable();
    $('#gridCategos').dataTable().fnDestroy();
    $('#gridCategos').DataTable({
      processing: true,
      responsive: true,
      dom: 'Bfrtip',
      scrollY: '37vh',
      scrollCollapse: true,
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ]
    });
    // getSaldos();
  }

  function getSaldos() {

    $.ajax({
        url: 'get_cxc_saldos',
        type: 'POST',
        dataType: 'json',
        data: {
          id_cliente: $('#filClientes').val()
        },
      })
      .done(function(resp) {
        console.log("success");
        $('#labelNumsMonto').html(resp.monto)
        $('#labelNumsPagado').html(resp.pagado)
        $('#labelNumsSaldo').html(resp.saldo)
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function enviarModal(id) {
    $('#envioCorreo').modal()
    $.ajax({
        url: "{{url('admin/cxc/enviarModal')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
        }
      })
      .done(function(resp) {
        $('#destino').val(resp.data.correo);
        $('#idClienteHidden').val(id);
        $('#idCxc').val(id);
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }

  function enviarCorreo() {
    var correodestino = $('#destino').val();
    //var tipoDoc = $('#tipoDoc option:selected').val();
    var asunto = $('#asunto').val();
    var cuerpo = $('#cuerpo').val();
    var id = $('#idCxc').val();
    var id_cliente = $('#idClienteHidden').val();
    $('#cargandoModal').modal();
    $('#envioCorreo').modal('hide');

    $.ajax({
        url: "{{url('admin/cxc/enviarCorreo')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          id_cliente: id_cliente,
          correodestino: correodestino,
          asunto: asunto,
          cuerpo: cuerpo,
          //tipoDoc: tipoDoc
        }
      })
      .done(function(resp) {
        $('#cargandoModal').modal('hide');
        $('#envioCorreo').modal('hide');
        alert('El correo se ha enviado con exito!');

      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }
</script>
@endsection