@extends('adminlte::page')
@section('content_header')
@section('plugins.Datatables', true)
@section('plugins.DateRangePicker', true)

<h1>Ventas</h1>
@stop

@section('content')
{{-- Setup data for datatables --}}
@php
$heads = [
    'Id',
    'Cliente',
    'Dirección',
    '¿Está Pagado?',
    'Fecha de Venta',
    'Fecha de Pago',
    'Acciones',
    'Mapa'
];

  $btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit"><i class="fa fa-lg fa-fw fa-pen"></i></button';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';
  $btnShow = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';

              $config = [
                'data' => $ventasPendientes,
    'order' => [[1, 'asc']],
    'columns' => [null, ['orderable' => true]],
];

@endphp
@if(session()->has('success'))
<div class="alert alert-success" role="alert">
  {{session()->get('success')}}
  </div>
@endif

@if(session()->has('danger'))
<div class="alert alert-danger" role="alert">
  {{session()->get('danger')}}
  </div>
@endif
<x-adminlte-card title="Ventas pendientes de entrega / pago" theme="danger" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">
<x-adminlte-datatable id="tblPendientes" :heads="$heads" head-theme="dark" theme="light" striped hoverable with-buttons beautify>
    @foreach($config['data'] as $row)
        <tr>
                <td>{{$row->venta_id}}</td>
                <td>{{$row->cliente_nombre}}</td>
                <td>{{$row->cliente_direccion}}</td>
                <td>@if ($row->venta_pagado == 1)
                    PAGADO
                @else
                    PENDIENTE
                @endif</td>
                <td>{{date("d-m-Y H:i:s A",strtotime($row->venta_created_at))}}</td>
                <td>-</td>
                <td>
                    {{-- <a href="{{route('productos.show',$row->venta_id)}}" class="btn btn-xs btn-default text-primary mx-1 shadow"><i class="fa fa-pen fa-fw"></i></a> --}}
                    {{-- <a href="{{route('productos.destroy',$row->venta_id)}}" class="btn btn-xs btn-default text-danger mx-1 shadow"><i class="fa fa-trash fa-fw"></i></a> --}}
                    {{-- <a href="javascript:void(0)" class="btn btn-xs btn-default text-success mx-1 shadow"><i class="fa fa-eye fa-fw"></i></a> --}}
                    {{-- <x-adminlte-button data-toggle="modal" data-target="#modalMin{{$row->venta_id}}" icon="fa fa-fw fa-eye" class="btn btn-xs btn-default mx-1 shadow" onclick="detalleVenta({{$row->venta_id}},'{{$row->cliente_lat}}','{{$row->cliente_long}}');mostrarMapa2('{{$row->cliente_lat}}','{{$row->cliente_long}}','{{$row->cliente_direccion}}')"/> --}}
                      <x-adminlte-button data-toggle="modal" data-target="#modalMin{{$row->venta_id}}" icon="fa fa-fw fa-eye" class="btn btn-xs btn-default mx-1 shadow" onclick="detalleVenta({{$row->venta_id}},'{{$row->cliente_lat}}','{{$row->cliente_long}}');"/>
                </td>
                <td>
                  <a href="javascript:void(0)" class="btn btn-xs btn-default mx-1 shadow" onclick="mostrarMapa('{{$row->cliente_lat}}','{{$row->cliente_long}}','{{$row->cliente_direccion}}')"><i class="fa fa-map-marker"></i></a>
                  <a href="https://maps.google.com/?q={{$row->cliente_lat}},{{$row->cliente_long}}" target="_blank" class="btn btn-xs btn-default mx-1 shadow"><i class="fa fa-map-pin"></i></a>
                </td>
        </tr>

    @endforeach
</x-adminlte-datatable>
<x-slot name="footerSlot">
  <x-adminlte-button class="d-flex ml-auto" theme="primary" label="Recorridos" type="button" icon="fas fa-sign-in" onclick="mapaMarcadores()"/>
</x-slot>
</x-adminlte-card>

@foreach ($ventasPendientes as $row)
    
<x-adminlte-modal id="modalMin{{$row->venta_id}}" class="modalMin" title="" size='xl'>

  <x-adminlte-card theme="purple" theme-mode="outline" title="MEDIO DE PAGO">
    <form class="form-horizontal"  id="frmEmpresa{{$row->venta_id}}" name="frmEmpresa" method="POST">
      <x-adminlte-input type="hidden" name="venta_id" id="venta_id"/>
      <div class="row">

      <select name="venta_medio_pago_id" id="venta_medio_pago_id" class="form-control @error('venta_medio_pago_id') is-invalid @enderror">
        <option value="">Seleccionar...</option>
    @foreach ($mediosPago as $medioPago)
        <option value="{{$medioPago->medio_pago_id}}">{{$medioPago->medio_pago_glosa}}</option>
    @endforeach
    </select>
    
      </div>
    </form>

    <x-slot name="footerSlot">
      <x-adminlte-button class="d-flex ml-auto" theme="success" label="Actualizar" type="submit" onclick="actualizarVenta({{$row->venta_id}})"
          icon="fas fa-sign-in" />
  </x-slot>
  
</x-adminlte-card>

<x-adminlte-card theme="primary" theme-mode="outline" title="Detalle Venta">
  <table class="table table-hover table-striped table-light dataTable no-footer" id="tabla_detalle_{{$row->venta_id}}">
    <thead class="thead-dark">
      <th></th>
      <th>Producto</th>
      <th>Cantidad Solicitada</th>
      <th>Total Entregado</th>
      <th>Entregado</th>
      <th>Valor</th>
      <th>Subtotal</th>
    </thead>

    <tbody id="detalle_venta{{$row->venta_id}}"></tbody>
  </table>
</x-adminlte-card>

{{-- <x-adminlte-card theme="primary" theme-mode="outline" title="Mapa">
  <div id="map2" style="height: 400px;width: 100%;"></div>
</x-adminlte-card> --}}

<x-slot name="footerSlot">
  <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal" id="btnPendientePago"/>
</x-slot>
</x-adminlte-modal>
@endforeach

@php
$heads = [
    'Id',
    'Cliente',
    'Dirección',
    '¿Está Pagado?',
    'Medio de Pago',
    'Fecha de Venta',
    'Fecha de Pago',
    'Acciones',
    'Mapa'
];

  $btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit"><i class="fa fa-lg fa-fw fa-pen"></i></button';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';
  $btnShow = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete"><i class="fa fa-lg fa-fw fa-trash"></i></button>';

              $config = [
                'data' => $ventasPagadas,
    'order' => [[1, 'asc']],
    'columns' => [null, ['orderable' => true]],
];

@endphp

{{-- SM size with single date/time config --}}
@php
$config2 = [
    "singleDatePicker" => true,
    "showDropdowns" => true,
    "startDate" => "js:moment()",
    "minYear" => 2000,
    "maxYear" => "js:parseInt(moment().format('YYYY'),10)",
    "timePicker" => false,
    "timePicker24Hour" => false,
    "timePickerSeconds" => false,
    "cancelButtonClasses" => "btn-danger",
    "locale" => ["format" => "DD-MM-YYYY"],
];
@endphp

<x-adminlte-card title="VENTAS COMPLETADAS" theme="success" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">
  <form class="form-horizontal" action="#" method="POST">
  <x-adminlte-date-range name="drSizeSm" label="Fecha a consultar" igroup-size="sm" :config="$config2">
    <x-slot name="appendSlot">
        <div class="input-group-text bg-dark">
            <i class="fas fa-calendar-day"></i>
        </div>
    </x-slot>
</x-adminlte-date-range>
<x-slot name="footerSlot">
  <x-adminlte-button label="Buscar" theme="success" icon="fas fa-key" type="button" onclick="buscarVentas()"/>
</x-slot>
@csrf

  </form>
</x-adminlte-card>

<x-adminlte-datatable id="tblPagadas" :heads="$heads" head-theme="dark" theme="light" striped hoverable with-buttons>
  @foreach($config['data'] as $row)
      <tr>
              <td>{{$row->venta_id}}</td>
              <td>{{$row->cliente_nombre}}</td>
              <td>{{$row->cliente_direccion}}</td>
              <td>@if ($row->venta_pagado == 1)
                  PAGADO
              @else
                  PENDIENTE
              @endif</td>
              <td>{{$row->medio_pago_glosa}}</td>
              <td>{{date("d-m-Y H:i:s A",strtotime($row->venta_created_at))}}</td>
              <td>{{date("d-m-Y H:i:s A",strtotime($row->venta_updated_at))}}</td>
              <td>
                  {{-- <a href="{{route('productos.show',$row->venta_id)}}" class="btn btn-xs btn-default text-primary mx-1 shadow"><i class="fa fa-pen fa-fw"></i></a> --}}
                  {{-- <a href="{{route('productos.destroy',$row->venta_id)}}" class="btn btn-xs btn-default text-danger mx-1 shadow"><i class="fa fa-trash fa-fw"></i></a> --}}
                  {{-- <a href="javascript:void(0)" class="btn btn-xs btn-default text-success mx-1 shadow"><i class="fa fa-eye fa-fw"></i></a> --}}
                  <x-adminlte-button data-toggle="modal" data-target="#modalMinPagadas{{$row->venta_id}}" icon="fa fa-fw fa-eye" class="btn btn-xs btn-default mx-1 shadow" onclick="detalleVentaPagado({{$row->venta_id}},'{{$row->cliente_lat}}','{{$row->cliente_long}}','{{$row->cliente_nombre}}')"/>                    
              </td>
              <td>
                <a href="javascript:void(0)" class="btn btn-xs btn-default mx-1 shadow" onclick="mostrarMapa('{{$row->cliente_lat}}','{{$row->cliente_long}}','{{$row->cliente_direccion}}')"><i class="fa fa-map-marker"></i></a>
              </td>
      </tr>
  @endforeach
</x-adminlte-datatable>


{{-- Minimal --}}
<x-adminlte-modal id="mostrarMapa" title="" size="lg">
  {{-- Example button to open modal --}}
  <div id="map" style="height: 400px;width: 100%;"></div>
  </x-adminlte-modal>

  @foreach($ventasPagadas as $row)
  <x-adminlte-modal id="modalMinPagadas{{$row->venta_id}}" class="modalMinPagadas" title="" size='xl'>
  
  <x-adminlte-card theme="primary" theme-mode="outline" title="Detalle Venta" id="cardTblDetalle">
    <table class="table table-hover table-striped table-light dataTable no-footer" id="tabla_detalle_pagado_{{$row->venta_id}}">
      <thead class="thead-dark">
        <th></th>
        <th>Producto</th>
        <th>Cantidad Solicitada</th>
        <th>Total Entregado</th>
        <th>Valor</th>
        <th>Subtotal</th>
      </thead>
  
      <tbody id="detalle_venta_pagado{{$row->venta_id}}"></tbody>
    </table>
  </x-adminlte-card>
  
  {{-- <x-adminlte-card theme="primary" theme-mode="outline" title="Mapa" id="Mapa">
    <div id="map2" style="height: 400px;width: 100%;"></div>
  </x-adminlte-card> --}}
  <x-slot name="footerSlot">
    <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal" id="btnPagadas"/>
  </x-slot>
  </x-adminlte-modal>
  @endforeach

  <x-adminlte-modal id="mostrarMapaMarcadores" title="" size="lg" title="Hoja de Ruta">
    {{-- Example button to open modal --}}
    <div id="mapMarcadores" style="height: 400px;width: 100%;"></div>
    <x-slot name="footerSlot">
      <x-adminlte-button theme="danger" label="Cerrar" data-dismiss="modal"/>
    </x-slot>
    </x-adminlte-modal>
@stop

@section('js')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl3ynABIEYXM9QC8icGka6BDhSDEvd1ho&libraries=places,drawing,geometry,visualization" async></script>

<script type="text/javascript">
function buscarVentas()
{  
  let fecha = $("#drSizeSm").val();
  let _token = $("input[name=_token]").val();
  let data = ({fecha:fecha,_token:_token});
  $.ajax({
    type:'POST',
    url:'{{route('ventas.getDetalleVentaFecha')}}',
    data:data,
    dataType:'JSON',
    success : function (response)
    {
        let tabla = "";

        if(response.length > 0)
        {
          
          $.each(response,function(i,v){
            let fecha_creado = moment(v.venta_created_at);
            let fecha_actualizado = moment(v.venta_updated_at);
            tabla+='<tr>';
            tabla+='<td>'+v.venta_id+'</td>';
            tabla+='<td>'+v.cliente_nombre+'</td>';
            tabla+='<td>'+v.cliente_direccion+'</td>';
            tabla+='<td>PAGADO</td>';
            tabla+='<td>'+fecha_creado.format("DD-MM-YYYY")+'</td>';
            tabla+='<td>'+fecha_actualizado.format("DD-MM-YYYY")+'</td>';
            tabla+='<td><button type="button" class="btn btn-default btn btn-xs btn-default mx-1 shadow" data-toggle="modal" data-target="#modalMinPagadas'+v.venta_id+'" onclick="detalleVentaPagado('+v.venta_id+',\''+v.cliente_lat+'\',\''+v.cliente_long+'\',\''+v.cliente_nombre+'\');mostrarMapa2(\''+v.cliente_lat+'\',\''+v.cliente_long+'\',\''+v.cliente_direccion+'\')"><i class="fa fa-fw fa-eye"></i></button></td>';
            tabla+='<td><a href="javascript:void(0)" class="btn btn-xs btn-default mx-1 shadow" onclick="mostrarMapa(\''+v.cliente_lat+'\',\''+v.cliente_long+'\',\''+v.cliente_direccion+'\')"><i class="fa fa-map-marker"></i></a></td>';
            tabla+='</tr>';
        });
          $("#tblPagadas tbody").html(tabla);
          $("#tblPagadas").dataTable();
        }else{
          $("#tblPagadas").DataTable().clear().draw();
        }
        
    }
  })
}

function mostrarMapa(latitud,longitud,dir)
{
  $("#mostrarMapa").modal('toggle');
  $("#mostrarMapa .modal-title").html(dir);
		var myLatLng = {
			lat: parseFloat(latitud),
			lng: parseFloat(longitud)
		};
		var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 18,
			center: myLatLng,
		});
		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			title: dir
		});
}

function mostrarMapa2(latitud,longitud,dir)
{
		var myLatLng = {
			lat: parseFloat(latitud),
			lng: parseFloat(longitud)
		};
		var map = new google.maps.Map(document.getElementById('map2'), {
			zoom: 18,
			center: myLatLng,
		});

		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			title: '2'+dir
		});
}

function detalleVentaPagado(id,lat,long,cliente)
{
  if($.fn.DataTable.isDataTable("#tabla_detalle_pagado_"+id))
  {
    $("#tabla_detalle_pagado_"+id).DataTable().clear().destroy();
  }

  $("#modalMin"+id+" .modal-title").html(cliente);
  $("#cardTblDetalle .card-title").html("Detalle Venta #"+id);
  $("#modalMinPagadas"+id+" .modal-title").html("Venta N° "+id+" : "+cliente);
  let _token = $("input[name='_token']").val();
  let data = ({_token:_token,venta_id:id});
  table = new DataTable('#tabla_detalle_pagado_'+id, {
    responsive:true,
    destroy:true,
    ajax: {
      url:'{{route('ventas.getDetalleVenta')}}',
      data:data,
      type:'POST',
      dataType:'JSON',
      cache:false,
      dataSrc : 'detalleVenta',
    },
    columns: [
      {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
      },
        { data: 'producto_glosa' },
        { data: 'detalle_cantidad' },
        { data: 'detalle_cantidad_entregado' },
        { data: '',
          render : function(data,type,row)
          {
            return '$'+row.detalle_valor;
          }
         },
        { 
          data: '',
          render : function(data,type,row)
          {
            return '$'+parseInt(row.detalle_valor * row.detalle_cantidad_entregado);
          }
        }
    ],
    order: [[1, 'asc']]
});

let tableState = {}; // Use an object to track each row's state
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
    let rowId = tr.dataset.rowId; // Ensure each row has a unique identifier

    if (tableState[rowId]) {
        tableState[rowId] = false;
        row.child.hide();
    } else {
        tableState[rowId] = true;
        row.child(format(row.data())).show();
    }
});
}

function actualizaDetalleCantidad(detalle_id,venta_id)
{
  let cantidad  = parseInt($("#total_entregado_"+detalle_id).val());
  let _token = $("input[name='_token']").val();
  let data = ({detalle_id:detalle_id,detalle_cantidad:cantidad,_token:_token});

  $.ajax({
    type:'POST',
    url:'{{route('ventas.actualizarVentaCantidad')}}',
    data:data,
    dataType:'JSON',
    success : function (response)
    {
      Swal.fire({
                    icon: "success",
                    title: "Exito",
                    text: "Registro actualizado con éxito",
                });
    },
    complete : function()
    {
      getDetalleVentaActualizado(venta_id,detalle_id)
    }
  })

}

function format(d) {
  let _token = $("input[name='_token']").val();
  let data = ({detalle_id:d.detalle_id,_token:_token});
  let rr = $.ajax({
    type:'POST',
    url:'{{route('ventas.getDetalleLogVenta')}}',
    data:data,
    dataType:'JSON',
    async:false,
    success : function (response)
    {
      
    }
  });
    let dd = "<table class='table table-hover table-condensed table-responsive' id='tblChildRow'>";
      dd+='<thead>';
      dd+='<th>Cantidad Entregada</th>';
      dd+='<th>Valor</th>';
      dd+='<th>Fecha de Registro</th>';
      dd+='</thead>';
      dd+='<tbody>';
    $.each(rr.responseJSON,function(i,v){
        let fecha_creado = moment(v.log_updated_at);
        dd+='<tr>';
        dd+='<td>'+v.log_recibido+'</td>';
        dd+='<td>$'+v.log_valor+'</td>';
        dd+='<td>'+fecha_creado.format("DD/MM/YYYY HH:mm:ss A")+'</td>';
        dd+='</tr>';
    });
    dd+='</tbody></table>';
    return dd;
}

function detalleVenta(id,lat,long)
{
  if($.fn.DataTable.isDataTable("#tabla_detalle_"+id))
  {
    $("#tabla_detalle_"+id).DataTable().clear().destroy();
  }

  $("#modelMin"+id+" .modal-title").html("Detalle de venta #"+id);
  $("#frmEmpresa"+id+" #venta_id").val(id);
  let _token = $("input[name='_token']").val();
  let data = ({_token:_token,venta_id:id});

  table = new DataTable('#tabla_detalle_'+id, {
    responsive:true,
    destroy:true,
    ajax: {
      url:'{{route('ventas.getDetalleVenta')}}',
      data:data,
      type:'POST',
      dataType:'JSON',
      cache:false,
      dataSrc : 'detalleVenta',
    },
    columns: [
      {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
      },
        { data: 'producto_glosa' },
        { data: 'detalle_cantidad' },
        { data: 'detalle_cantidad_entregado' },
        { data: '',
          render : function(data,type,row)
          {
            return '<input type="number" min="0" max="100" value="'+row.detalle_cantidad+'" name="total_entregado[]" id="total_entregado_'+row.detalle_id+'"></input> <i class="fa fa-sync fa-lg" onclick="actualizaDetalleCantidad('+row.detalle_id+','+row.detalle_venta_id+')"></i><input type="hidden" name="detalle_ids[]" value="'+row.detalle_id+'"></input>';
          }
         },
        { data: '',
          render : function(data,type,row)
          {
            return '$'+row.detalle_valor;
          }
         },
        { 
          data: '',
          render : function(data,type,row)
          {
            return '$'+parseInt(row.detalle_valor * row.detalle_cantidad_entregado);
          }
        }
    ],
    order: [[1, 'asc']]
});

let tableState = {}; // Use an object to track each row's state
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
    let rowId = tr.dataset.rowId; // Ensure each row has a unique identifier

    if (tableState[rowId]) {
        tableState[rowId] = false;
        row.child.hide();
    } else {
        tableState[rowId] = true;
        row.child(format(row.data())).show();
    }
});
}

function getDetalleVentaActualizado(venta_id,detalle_id)
{
  let _token = $("input[name='_token']").val();
  let data = ({_token:_token,venta_id:venta_id,detalle_id:detalle_id});
  table = new DataTable('#tabla_detalle_'+venta_id, {
    responsive:true,
    destroy:true,
    searchable:true,
    orderable:true,
    ajax: {
      url:'{{route('ventas.getDetalleVenta')}}',
      data:data,
      type:'POST',
      dataType:'JSON',
      cache:false,
      dataSrc : 'detalleVenta',
    },
    columns: [
      {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
      },
        { data: 'producto_glosa' },
        { data: 'detalle_cantidad' },
        { data: 'detalle_cantidad_entregado' },
        { data: '',
          render : function(data,type,row)
          {
            return '<input type="number" min="0" max="100" value="1" name="total_entregado[]" id="total_entregado_'+row.detalle_id+'"></input> <i class="fa fa-sync fa-lg" onclick="actualizaDetalleCantidad('+row.detalle_id+','+row.detalle_venta_id+')"></i><input type="hidden" name="detalle_ids[]" value="'+row.detalle_id+'"></input>';
          }
         },
        { data: '',
          render : function(data,type,row)
          {
            return '$'+row.detalle_valor;
          }
         },
        { 
          data: '',
          render : function(data,type,row)
          {
            return '$'+parseInt(row.detalle_valor * row.detalle_cantidad_entregado);
          }
        }
    ],
    order: [[1, 'asc']]
});


}

function actualizarVenta(id)
{
  /*
  $("#frmEmpresa").validate({
    debug: true,
            errorClass: "is-invalid",
            validClass: "is-valid",
            errorElement: "label",
    rules : {
      venta_medio_pago_id : {required:true}
    },
    submitHandler: function(form) {
      var data = $(form).serializeArray();
      console.log(data);
    },
    errorElement: 'label',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            error.insertAfter(element);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
  });
  */
  let venta_id = $("#frmEmpresa"+id+" #venta_id").val();
  let venta_medio_pago_id = $("#frmEmpresa"+id+" #venta_medio_pago_id").val();
  if(venta_medio_pago_id == "")
{
  alert("Debe escoger un medio de pago");
  $("#frmEmpresa"+id+" #venta_medio_pago_id").focus();
  return false;
}
  let _token = $("input[name='_token']").val();
  let ids = $("input[name='detalle_ids']").val();
  let data = ({_token:_token,venta_id:venta_id,venta_medio_pago_id:venta_medio_pago_id});
  $.ajax({
    type:'POST',
    url:'{{route('ventas.actualizarVenta')}}',
    data:data,
    dataType:'JSON',
    beforeSend : function()
    {

    },
    success : function (response)
    {
      if(response.Respuesta)
      {
        window.location.href='{{route('ventas.index')}}';
      }
    }

  })
}

function mapaMarcadores()
{
  $("#mostrarMapaMarcadores").modal("toggle");
  let _token = $("input[name='_token']").val();
  let marcadores = $.ajax({
      type:'POST',
      url:'{{route('ventas.obtenerMarcadores')}}',
      data:({_token:_token}),
      dataType:'JSON',
      async:false,
      success : function(response)
      {
        return response;
      }
  });

  let marks = [];
  var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    $.each(marcadores.responseJSON.Mensaje,function(i,v){
      marks.push([v.cliente_nombre,parseFloat(v.cliente_lat),parseFloat(v.cliente_long)]);
    });

    var map = new google.maps.Map(document.getElementById('mapMarcadores'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.45390983586423, -70.65628938559512),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    for (i = 0; i < marks.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(marks[i][1], marks[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(marks[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}
</script>
@stop