@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<div class="card">
  <div class="card-header bg-light">
      <h1 class="card-title">Panel de Control</h1>
      @can('ver-calendario')
    <div class="card-tools">
      <a href="{{ route('calendario_panel')}}" class="btn btn-block bg-gradient-info"><i class="fas fa-calendar-alt"></i>  Ver Calendario</a>
    </div>
    @endcan
  </div>
</div>
@stop

@section('content')

<div class="container-fluid">
  <form class="" action="{{ url('/informacion_modulo_pago_proveedores')}}" method="post">
    @csrf
    <input type="text" name="mes" value="">
    <input type="text" name="año" value="">
    <!--<input type="text" name="destino" value="">-->
    <input type="submit" name="enviar" value="enviar">
  </form>
   <!-- Tarjetas -->
    <div class="row">
      <div class="col-md-12">
        <!-- INICIO DE CARD DE TOURES -->
        <div class="card card-warning">
          <div class="card-header">
            <h3 class="card-title">Toures </h3>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                @can('ver-toures-pendientes')
                <div class="card">
                  <div class="card-header bg-light">
                      <h3 class="card-title">Toures pendientes</h3>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-6">
                        <!-- /input-group -->
                        <div class="input-group input-group-sm pb-3 mb-2">
                          <select class="form-control año_lista_toures_pendientes año_select_toures" name="" id="año_select_lista_toures_pendientes">
                            <option value="">Año</option>
                            @foreach($años as $año)
                              <option value="{{$año->año}}">{{$año->año}}</option>
                            @endforeach
                          </select>
                          <select class="form-control mes_lista_toures_pendientes mes_select_toures" name="mes" id="mes_select_lista_toures_pendientes">
                            <option value="">Mes</option>
                          </select>
                          <select class="form-control destino_lista_toures_pendientes" name="destino" id="destino_select_lista_toures_pendientes">
                            <option value="">Destino</option>
                            @foreach($destinos as $destino)
                              <option value="{{$destino->id_destino}}">{{$destino->nombre_destino}}</option>
                            @endforeach

                          </select>
                          <span class="input-group-append">
                            <button type="button" class="btn btn-warning btn-flat" id="filtrar_lista_toures_pendientes"><i class="fa fa-search"></i></button>
                            <button type="button" class="btn btn-info btn-flat" id="reset_lista_toures_pendientes"><i class="fas fa-redo-alt"></i></button>
                          </span>
                        </div>
                        <!-- /input-group -->
                      </div>
                      <div class="col-md-6 text-right">
                        <div class="card-tools">
                          <a href="{{ route('toures_pendientes')}}" class="btn btn-tool bg-warning">Ver todos</a>
                        </div>
                      </div>
                    </div>
                    <div class="text-center text-info btn-sm bg-warning mb-4" id="nombre_mes_lista_toures_pendientes">
                    </div>
                    <div class="d-flex">
                      <p class="ml-auto d-flex flex-column text-right">
                        <span class="text-info" id="cantidad_lista_toures_pendientes">
                        </span>
                        <span class="text-muted">Cantidad</span>
                      </p>
                    </div>
                    <!-- /.d-flex -->
                    <div class="position-relative mb-4">
                      <table id="tabla_toures_pendientes" class="table table-sm" style="width: 100%;">
                        <thead class="text-center">
                          <tr>
                            <th style="width: 10px"><span class="badge">Nº</span></th>
                            <th><span class="badge">Tour</span></th>
                            <th><span class="badge">Cliente</span></th>
                            <th><span class="badge">Fecha</span></th>
                            <th><span class="badge">Estado</span></th>
                            <th><span class="badge">Ver</span></th>
                          </tr>
                        </thead>
                        <tbody class="text-center">
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!-- /.card -->
                @endcan
              </div>
              <div class="col-md-12">
                <div class="card">
                  <div class="card-header bg-light">
                      <h3 class="card-title">Toures más vendidos</h3>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-6">
                        <!-- /input-group -->
                        <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                          <select class="form-control año_toures_vendidos año_select" name="" id="año_select_toures_vendidos">
                            <option value="">Año</option>
                            @foreach($años as $año)
                              <option value="{{$año->año}}">{{$año->año}}</option>
                            @endforeach
                          </select>
                          <select class="form-control mes_toures_vendidos mes_select" name="mes" id="mes_select_toures_vendidos">
                            <option value="">Mes</option>
                          </select>
                          <select class="form-control destino_toures_vendidos" name="destino" id="destino_select_toures_vendidos">
                            <option value="">Destino</option>
                            @foreach($destinos as $destino)
                              <option value="{{$destino->id_destino}}">{{$destino->nombre_destino}}</option>
                            @endforeach
                          </select>
                          <span class="input-group-append">
                            <button type="button" class="btn btn-warning btn-flat" id="filtrar_listado_toures_vendidos"><i class="fa fa-search"></i></button>
                            <button type="button" class="btn btn-info btn-flat" id="reset_toures_vendidos"><i class="fas fa-redo-alt"></i></button>
                          </span>
                        </div>
                        <!-- /input-group -->
                      </div>
                    </div>
                    <div class="text-center text-info btn-sm bg-warning mb-4" id="nombre_mes_toures_vendidos">
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="card">
                          <div class="card-body">
                            <div class="position-relative mb-4">
                              <table id="tabla_top_toures_vendidos" class="table table-sm" style="width:100%">
                                <thead class="text-center">
                                  <tr>
                                    <th><span class="badge">Posición</span></th>
                                    <th><span class="badge">Tour</span></th>
                                    <th><span class="badge">Cantidad</span></th>
                                  </tr>
                                </thead>
                                <tbody class="text-center">
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="card">
                          <div class="card-body" id="contenido_char">
                                <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- /.card -->
              </div>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- FIN DE CARD DE TOURES -->
      </div>
      <div class="col-md-12">
        <!-- INICIO DE CARD DE RESERVA -->
        <div class="card card-info">
          <div class="card-header">
            <h3 class="card-title">Reservas</h3>
            <div class="card-tools">
              <a href="{{ route('todosLosMeses')}}" class="btn btn-tool bg-light text-black" style="color: #17a2b8 !important;">Ver ingresos</a>
            </div>
            <div class="card-tools mx-2">
              <a href="{{ route('reservas.index')}}" class="btn btn-tool bg-light text-black" style="color: #17a2b8 !important;">Ver reservas</a>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="card p-4">
                  <!-- /input-group -->
                  <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                        <select class="form-control año_total_ingresos año_select" name="">
                          <option value="">Año</option>
                          @foreach($años as $año)
                            <option value="{{$año->año}}">{{$año->año}}</option>
                          @endforeach
                        </select>
                        <select class="form-control mes_total_ingresos mes_select" name="mes" id="mes_select_total_ingresos">
                          <option value="">Mes</option>
                        </select>
                        <select class="form-control destino_total_ingresos" name="destino" id="destino_select_total_ingresos">
                          <option value="">Destino</option>
                        </select>
                        <span class="input-group-append">
                          <button type="button" class="btn btn-info btn-flat" id="filtrar_total_destino"><i class="fa fa-search"></i></button>
                        </span>
                  </div>
                  <!-- /input-group -->
                  <div class="text-center text-info btn-sm bg-info mb-4" id="nombre_mes_cantidades_reserva">
                  </div>
                  <div class="row">
                    @can('ver-reservas')
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body">
                          <div class="position-relative mb-4">
                            <table id="tabla_listado_reserva" class="table table-sm" style="width:100%">
                              <thead class="text-center">
                                <tr>
                                  <th style="width: 10px"><span class="badge">Nº</span></th>
                                  <th><span class="badge">Cliente</span></th>
                                  <th><span class="badge">Destino</span></th>
                                  <th><span class="badge">Toures</span></th>
                                  <th><span class="badge">Fecha</span></th>
                                  <th><span class="badge">Estado</span></th>
                                  <th><span class="badge">Acciones</span></th>
                                </tr>
                              </thead>
                              <tbody class="text-center">
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                      @endcan
                    </div>
                    <div class="col-md-6">
                      <div class="card card-info">
                        <div class="card-body" id="contenido_donutChart1">
                          <canvas id="donutChart1" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                        <!-- /.card-body -->
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    @can('ver-panel-ingresos-anuales')
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body" id="contenido_myChart">
                          <canvas id="myChart"></canvas>
                        </div>
                      </div>
                    </div>
                    @endcan
                    @can('ver-reservas')
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body" id="contenido_myChart1">
                          <canvas id="myChart1"></canvas>
                        </div>
                      </div>
                    </div>
                    @endcan
                  </div>
                </div>
                <!-- FIN DE FILTRADO -->
              </div>
              @can('ver-reservas')
              <div class="col-md-6">
                <div class="card card-info">
                  <div class="card-header bg-light">
                      <h3 class="card-title">Días más vendidos</h3>
                  </div>
                  <div class="card-body">
                    <!-- /input-group -->
                    <div class="input-group input-group-sm border-bottom pb-3 mb-4">
                      <select class="form-control año_dias_vendidos_reserva año_select" name="">
                        <option value="">Año</option>
                        @foreach($años as $año)
                          <option value="{{$año->año}}">{{$año->año}}</option>
                        @endforeach
                      </select>
                      <select class="form-control mes_dias_vendidos_reserva mes_select" name="mes" id="mes_select_dias_vendidos_reserva">
                        <option value="">Mes</option>
                      </select>
                      <select class="form-control destino_dias_vendidos_reserva" name="destino" id="destino_select_dias_vendidos_reserva">
                        <option value="">Destino</option>
                      </select>
                      <span class="input-group-append">
                        <button type="button" class="btn btn-info btn-flat" id="filtrar_dias_vendidos_reserva"><i class="fa fa-search"></i></button>
                      </span>
                    </div>
                    <!-- /input-group -->
                    <div class="text-center text-info btn-sm bg-info mb-4" id="nombre_mes_dias_vendidos_reserva">
                    </div>
                    <div id="contenido_donutChart">
                      <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
              </div>
              @endcan
              @can('ver-seguimientos-pagos')
              <div class="col-md-6">
                <div class="card">
                  <div class="card-header bg-light">
                      <h3 class="card-title">Seguimientos de pago</h3>
                    <div class="card-tools">
                      <a href="{{ route('listado_seguimientos_pagos')}}" class="btn btn-tool bg-info">Ver todos</a>
                    </div>
                  </div>
                  <div class="card-body">
                    <!-- /input-group -->
                    <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                      <select class="form-control año_lista_seguimiento año_select" name="">
                        <option value="">Año</option>
                        @foreach($años as $año)
                          <option value="{{$año->año}}">{{$año->año}}</option>
                        @endforeach
                      </select>
                      <select class="form-control mes_lista_seguimiento mes_select" name="mes" id="mes_select_lista_seguimiento">
                        <option value="">Mes</option>
                      </select>
                      <select class="form-control destino_lista_seguimiento" name="destino" id="destino_select_lista_seguimiento">
                        <option value="">Destino</option>
                      </select>
                      <span class="input-group-append">
                        <button type="button" class="btn btn-info btn-flat" id="filtrar_listado_seguimiento_pagos"><i class="fa fa-search"></i></button>
                      </span>
                    </div>
                    <!-- /input-group -->
                    <div class="text-center text-info btn-sm bg-info mb-4" id="nombre_mes_listado_seguimiento_pagos">
                    </div>
                    <div class="d-flex">
                      <p class="d-flex flex-column">
                        <span class="text-info" id="cantidad_seguimiento_pagos">
                        </span>
                        <span class="text-muted">Cantidad</span>
                      </p>
                      <p class="ml-auto d-flex flex-column text-right">
                        <span class="text-danger" id="pendiente_listado_seguimiento">
                        </span>
                        <span class="text-muted">Monto pendiente</span>
                      </p>
                    </div>
                    <!-- /.d-flex -->
                    <div class="position-relative mb-4">
                      <table id="table_seguimiento_pagos" class="table table-sm" style="width:100%">
                        <thead class="text-center">
                          <tr>
                            <th><span class="badge">Nº</span></th>
                            <th><span class="badge">Cliente</span></th>
                            <th><span class="badge">Fecha</span></th>
                            <th><span class="badge">Total</span></th>
                            <th><span class="badge">Pendiente</span></th>
                            <th><span class="badge">Prox.fecha</span></th>
                          </tr>
                        </thead>
                        <tbody class="text-center">
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!-- /.card -->
              </div>
              @endcan
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- FIN DE CARD DE RESERVA -->
      </div>
      <div class="col-md-12">
        <!-- INICIO DE CARD DE PAGO DE PROVEEDORES -->
        @can('ver-pagos-proveedores')
        <div class="card card-olive">
          <div class="card-header">
            <h3 class="card-title">Proveedores</h3>
            <div class="card-tools">
              <a href="{{ route('pagosproveedores.index')}}" class="btn btn-tool bg-light text-black" style="color: #3d9970 !important;">Ver todos</a>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                <div class="card p-4">
                  <!-- /input-group -->
                  <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                        <select class="form-control año_pago_proveedores año_select" name="">
                          <option value="">Año</option>
                          @foreach($años as $año)
                            <option value="{{$año->año}}">{{$año->año}}</option>
                          @endforeach
                        </select>
                        <select class="form-control mes_pago_proveedores mes_select" name="mes" id="mes_select_pago_proveedores">
                          <option value="">Mes</option>
                        </select>
                        <select class="form-control destino_pago_proveedores" name="destino" id="destino_select_pago_proveedores">
                          <option value="">Destino</option>
                        </select>
                        <span class="input-group-append">
                          <button type="button" class="btn bg-olive btn-flat" id="filtrar_pago_proveedores"><i class="fa fa-search"></i></button>
                        </span>
                  </div>
                  <!-- /input-group -->
                  <div class="text-center text-info btn-sm bg-olive mb-4" id="nombre_mes_pago_proveedores">
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body">
                          <div class="position-relative mb-4">
                            <table id="tabla_pago_proveedores" class="table table-sm" style="width:100%">
                              <thead class="text-center">
                                <tr>
                                  <th><span class="badge">Cuenta proveedor</span></th>
                                  <th><span class="badge">Medio de pago</span></th>
                                  <th><span class="badge">Referencia</span></th>
                                  <th><span class="badge">Monto</span></th>
                                  <th><span class="badge">Fecha de pago</span></th>
                                  <th><span class="badge">Capture</span></th>
                                  <th><span class="badge">Tipo de pago</span></th>
                                </tr>
                              </thead>
                              <tbody class="text-center">
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="card">
                        <div class="card-body" id="contenido_myChart2">
                          <canvas id="myChart2"></canvas>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- FIN DE FILTRADO -->
              </div>
            </div>
          </div>
        </div>
        <!-- /.card-body -->
        @endcan
        <!-- FIN DE CARD DE PAGO DE PROVEEDORES -->
      </div>
      <div class="col-md-6">
        <!-- INICIO DE CARD DE GASTOS -->
        @can('ver-gastos')
        <div class="card card-danger">
          <div class="card-header">
            <h3 class="card-title">Gastos</h3>
            <div class="card-tools">
              <a href="{{ route('gastos.index')}}" class="btn btn-tool bg-light text-danger" style="color: #dc3545 !important;">Ver todos</a>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                  <!-- /input-group -->
                  <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                        <select class="form-control año_listado_gastos año_select" name="">
                          <option value="">Año</option>
                          @foreach($años as $año)
                            <option value="{{$año->año}}">{{$año->año}}</option>
                          @endforeach
                        </select>
                        <select class="form-control mes_listado_gastos mes_select" name="mes" id="mes_select_listado_gastos">
                          <option value="">Mes</option>
                        </select>
                        <span class="input-group-append">
                          <button type="button" class="btn bg-danger btn-flat" id="filtrar_listado_gastos"><i class="fa fa-search"></i></button>
                        </span>
                  </div>
                  <!-- /input-group -->
                  <div class="text-center text-info btn-sm bg-danger mb-4" id="nombre_mes_listado_gastos">
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="card">
                        <div class="card-body">
                          <div class="d-flex">
                            <p class="ml-auto d-flex flex-column text-right">
                              <span class="text-danger" id="monto_gastos_total">
                              </span>
                              <span class="text-muted">Monto total</span>
                            </p>
                          </div>
                          <!-- /.d-flex -->
                          <div class="position-relative mb-4">
                            <table id="tabla_listado_gastos" class="table table-sm" style="width:100%">
                              <thead class="text-center">
                                <tr>
                                  <th><span class="badge">Descripción</span></th>
                                  <th><span class="badge">Referencia</span></th>
                                  <th><span class="badge">Tipo de pago</span></th>
                                  <th><span class="badge">Monto</span></th>
                                  <th><span class="badge">Capture</span></th>
                                </tr>
                              </thead>
                              <tbody class="text-center">
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                <!-- FIN DE FILTRADO -->
              </div>
            </div>
          </div>
        </div>
        <!-- /.card-body -->
        @endcan
        <!-- FIN DE CARD DE GASTOS -->
      </div>
      <div class="col-md-6">
        <!-- INICIO DE CARD DE GASTOS -->
        @can('ver-gastos')
        <div class="card card-maroon">
          <div class="card-header">
            <h3 class="card-title">Reembolsos</h3>
            <div class="card-tools">
              <a href="#" class="btn btn-tool bg-light text-danger" style="color: #dc3545 !important;">Ver todos</a>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12">
                  <!-- /input-group -->
                  <div class="input-group input-group-sm border-bottom pb-3 mb-2">
                        <select class="form-control año_reembolsos año_select" name="">
                          <option value="">Año</option>
                          @foreach($años as $año)
                            <option value="{{$año->año}}">{{$año->año}}</option>
                          @endforeach
                        </select>
                        <select class="form-control mes_reembolsos mes_select" name="mes" id="mes_select_reembolsos">
                          <option value="">Mes</option>
                        </select>
                        <select class="form-control destino_reembolsos" name="destino" id="destino_select_reembolsos">
                          <option value="">Destino</option>
                        </select>
                        <span class="input-group-append">
                          <button type="button" class="btn bg-maroon btn-flat" id="filtrar_reembolsos"><i class="fa fa-search"></i></button>
                        </span>
                  </div>
                  <!-- /input-group -->
                  <div class="text-center text-info btn-sm bg-maroon mb-4" id="nombre_mes_reembolsos">
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="card">
                        <div class="card-body">
                          <div class="d-flex">
                            <p class="d-flex flex-column">
                              <span class="text-info" id="cantidad_reembolsos">
                              </span>
                              <span class="text-muted">Cantidad</span>
                            </p>
                            <p class="ml-auto d-flex flex-column text-right">
                              <span class="text-danger" id="monto_total_reembolsos">
                              </span>
                              <span class="text-muted">Monto total</span>
                            </p>
                          </div>
                          <!-- /.d-flex -->
                          <div class="position-relative mb-4">
                            <table id="tabla_reembolsos" class="table table-sm" style="width:100%">
                              <thead class="text-center">
                                <tr>
                                  <th><span class="badge">Nª reserva</span></th>
                                  <th><span class="badge">Tour</span></th>
                                  <th><span class="badge">Proveedor</span></th>
                                  <th><span class="badge">Nro Tour</span></th>
                                  <th><span class="badge">Estado</span></th>
                                </tr>
                              </thead>
                              <tbody class="text-center">
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                <!-- FIN DE FILTRADO -->
              </div>
            </div>
          </div>
        </div>
        <!-- /.card-body -->
        @endcan
        <!-- FIN DE CARD DE GASTOS -->
      </div>
        <div class="col-md-3 col-sm-6 col-12">
          <div class="info-box">
            <span class="info-box-icon bg-info"><i class="fas fa-dollar-sign"></i></span>
            <div class="info-box-content">
              <span class="info-box-text">Total ganancias</span>
              <span class="info-box-number">{{number_format($total_ganancia_general, 0, ',', '.')}} COP</span>
            </div>
          </div>
        </div>

    </div>
</div>

<div class="modal fade" id="ver-proveedor">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Generar PDF (Tipo proveedor) - <span id="nombre_clienteP"></span> <span id="apellido_clienteP"></span></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="card-body caja_crear">
            <div class="row g-3" style="background-color: #dee2e6;border-radius: 5px;padding: 10px; margin-bottom:5px;">
              <div class="col-md-12 distancia">
                <form method="POST" action="{{ url('view_proveedor')}}" enctype="multipart/form-data">
                      @csrf
                        <div class="row g-3">
                          <div class="row g-3">
                            <div class="col-md-12 distancia">
                              <label for="id_pago" class="form-label validationServer03">Seleccione proveedor<span style="color: red;">*</span></label>
                            </div>
                            <input type="hidden" name="id_reserva" id="id_reservaP" value="">
                              <div class="col-md-12 distancia">
                                <select name="ver_proveedor" id="id_select_ver_proveedor" class="form-control m-input" required>

                                </select>
                              </div>
                              <div class="col-md-6 distancia">
                                    <button class="btn btn-success" title="Save" type="submit">Generar PDF proveedor</button>
                               </div>
                            </div>
                          </div>
                      </form>
                   </div>


            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.modal-dialog -->

  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Capture de pago</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="align-self: center;">
          <div class="texto_modal_color mt-4" id="imagen"></div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->


  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Capture de pago</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="align-self: center;">
          <div class="texto_modal_color mt-4" id="imagen_modal"></div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="{{ asset('vendor/toastr/toastr.min.css') }}">
@stop

@section('js')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('vendor/toastr/toastr.min.js') }}"></script>
<script src="{{ asset('vendor/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.2/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- SCRIPR DE GRAFICAS -->
<script src="{{ asset('vendor/chart.js/Chart.min.js') }}"></script>

<script type="text/javascript">

  $(document).ready(function () {

    var Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });


    //CARGA DE DATOS TOTAL Y INGRESOS DE VENTAS
    filtrar_total_ingresos();
    function filtrar_total_ingresos (mes = '', año = '', destino = ''){

      var tabla_listado_reserva = $("#tabla_listado_reserva").DataTable({
        searching: false,
        bLengthChange: false,
        paging: false,
        ordering: false,
        info: false,
        scrollX: true,
        ajax: {
          url : "{{ url('/data_listado_reservas_panel')}}",
          data : {mes: mes, año: año, destino: destino},
        },
        columns: [
          {data : 'id',
              "render" : function ( data, type, row, meta )
              {
                  return '<span class=\"badge\">'+data+'</span>';
              }
          },
          {data : 'nombre_cliente',
              "render" : function ( data, type, row, meta )
              {
                  return '<span class=\"badge\">'+row.nombre_clientes+' '+row.apellido_clientes+'</span>';
              }
          },
          {data : 'nombre_destino',
              "render" : function ( data, type, row, meta )
              {
                  return '<span class=\"badge\">'+data+'</span>';
              }
          },
          {data : 'nombre_toures',
              "render" : function ( data, type, row, meta )
              {
                  return '<span class=\"badge\">'+data+'</span>';
              }
          },
          {data : 'fecha_compra',
              "render" : function ( data, type, row, meta )
              {
                  return '<span class=\"badge\">'+data+'</span>';
              }
          },
          {data : 'estado',
              "render" : function ( data, type, row, meta )
              {
                if(row.estado !== 4) {
                  if (row.tipo_reserva == 1) {
                    var estado = '<span class="badge bg-success">Pago Completo</span>';
                  }
                  if (row.tipo_reserva == 2) {
                    var estado = '<span class="badge bg-warning">Pago Parcial</span>';
                  }
                }else{
                  var estado = '<span class="badge bg-danger">Anulada</span>';
                }
                  return estado;
              }
          },
          {data : 'id',
              "render" : function ( data, type, row, meta )
              {

                let ruta1 = "{{ url('/verReserva', 'url1')}}";
                let url1 = ruta1.replace('url1', data);

                var ruta3 = "{{ url('/infoReservaPendiente', 'url3') }}";
                var url3 = ruta3.replace('url3', data);

                var ruta2 = "{{ url('/anularReserva', 'url2') }}";
                var url2 = ruta2.replace('url2', data);


                html = '';
                html += '  <div class="btn-group">';
                html += '    <button type="button" class="btn btn-info btn-xs">Action</button>';
                html += '    <button type="button" class="btn btn-info btn-xs dropdown-toggle dropdown-icon" data-toggle="dropdown">';
                html += '      <span class="sr-only">Toggle Dropdown</span>';
                html += '    </button>';
                html += '    <div class="dropdown-menu" role="menu">';
                html += '      <a class="dropdown-item" href="'+url1+'">Ver reserva</a>';
                html += '      <a class="dropdown-item" href="" id="ver_proveedor" data-idreservaa="'+data+'" data-nombree="'+row.nombre_clientes+'" data-apellidoo="'+row.apellido_clientes+'" data-toggle="modal" data-target="#ver-proveedor">Reserva proveedor</a>';
                html += '      <a class="dropdown-item" href="'+url3+'">Detalle reserva</a>';
                html += '      <a class="dropdown-item" href="'+url2+'">Anular reserva</a>';
                html += '    </div>';
                html += '  </div>';

                return html;
              }
          },
        ],
      });



    const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    fetch("{{ url('/total_ingresos')}}",{
               method : 'POST',
               body: JSON.stringify({mes:mes, año:año, destino:destino}),
               headers:{
                   'Content-Type': 'application/json',
                   "X-CSRF-Token": csrfToken
               }
           }).then(response =>{
               return response.json()
           }).then( data =>{
               var total_ingresos = data.tota_ingresos;
               var monto_total_venta = data.monto_total_venta;
               var nombre_mes = data.nombre_mes;
               var nombre_año = data.nombre_año;
               var nombre_completo = nombre_mes+' - '+nombre_año;

               var ingresos_format = total_ingresos.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
               var monto_total_format = monto_total_venta.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

               var reservas_cantidad = data.reservas_cantidad;
               var cantidad_servicio = data.cantidad_servicio;
               var cantidad_personas = data.cantidad_personas;
               document.getElementById("nombre_mes_cantidades_reserva").innerHTML = nombre_mes+' - '+nombre_año;

               //-------------
               //- BAR CHART -
               //-------------

               var xValues = [nombre_completo];
               new Chart("myChart", {
                 type: "bar",
                 data: {
                   labels: xValues,
                   datasets: [{
                     label: 'Total Ventas: '+monto_total_format+' COP',
                     data: [monto_total_venta,10],
                     borderColor: "red",
                     backgroundColor: "#17a2b8",
                     fill: false
                   }, {
                     label: 'Ingresos : '+ingresos_format+' COP',
                     data: [total_ingresos,10],
                     borderColor: "green",
                     backgroundColor: "#c2c7d0",
                     fill: false
                   }]
                 },
                 options: {
                   legend: {display: true},
                   title: {
                        display: true,
                        text: 'Titulo de la section'
                    },
                    tooltips: {enabled: false},
                    hover: {mode: null},
                 }
               });

               var xValues1 = [nombre_completo];
               new Chart("myChart1", {
                 type: "bar",
                 data: {
                   labels: xValues1,
                   datasets: [{
                     label: 'Reservas: '+reservas_cantidad,
                     data: [reservas_cantidad,10],
                     borderColor: "red",
                     backgroundColor: "#17a2b8",
                     fill: false
                   }, {
                     label: 'Personas: '+cantidad_personas,
                     data: [cantidad_personas,10],
                     borderColor: "green",
                     backgroundColor: "#c2c7d0",
                     fill: false
                   }, {
                     label: 'Servicios: '+cantidad_servicio,
                     data: [cantidad_servicio,10],
                     borderColor: "green",
                     backgroundColor: "#3d9970",
                     fill: false
                   }]
                 },
                 options: {
                   legend: {
                     display: true
                   },
                   title: {
                        display: true,
                        text: 'Titulo de la section'
                    },
                   tooltips: {enabled: false},
                   hover: {mode: null},
                 }
               });

               var dias_array = [];
               var cantidad_array = [];
               for(let i in data.paises){
                 dias_array.push(data.paises[i].pais+': '+data.paises[i].cantidad);
                 cantidad_array.push(data.paises[i].cantidad);
               }


               //------------------- CIRCULO DE DATOS DE VISITANTES
               var donutChartCanvas = $('#donutChart1').get(0).getContext('2d')
               var donutData        = {
                 labels: dias_array,
                 datasets: [
                   {
                     data: cantidad_array,
                     backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', 'danger'],
                   }
                 ]
               };
               var donutOptions     = {
                 maintainAspectRatio : false,
                 responsive : true,
                 legend: {
                   position: 'right'
                 },
                 title: {
                    display: true,
                    text: 'Origen de clientes',
                    margin: 500
                },
                tooltips: {enabled: false},
                hover: {mode: null},
               };
               //Create pie or douhnut chart
               // You can switch between pie and douhnut using the method below.
               new Chart(donutChartCanvas, {
                 type: 'doughnut',
                 data: donutData,
                 options: donutOptions,
               });

           }).catch(error =>console.error(error));


      }

      $('#filtrar_total_destino').click(function(){
          var mes = $('.mes_total_ingresos').val();
          var año = $('.año_total_ingresos').val();
          var destino = $('.destino_total_ingresos').val();
          if((mes != '') && (destino != '') && (año != '')){
            document.getElementById("donutChart1").remove();
            var canvas = document.createElement("canvas");
            canvas.id = "donutChart1";
            canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
            document.getElementById("contenido_donutChart1").appendChild(canvas);

            document.getElementById("myChart").remove();
            var canvas = document.createElement("canvas");
            canvas.id = "myChart";
            document.getElementById("contenido_myChart").appendChild(canvas);

            document.getElementById("myChart1").remove();
            var canvas = document.createElement("canvas");
            canvas.id = "myChart1";
            document.getElementById("contenido_myChart1").appendChild(canvas);

            $("#tabla_listado_reserva").DataTable().destroy();
            filtrar_total_ingresos(mes, año, destino);
          }else{
            alert('Seleccione todas las opciones');
          }
          tabla_listado_reserva.draw();
      });
      //FIN CARGA DE DATOS

        //CARGA DE DATOS DIAS MAS VENDIDOS RESERVA
        filtrar_dias_vendidos_reserva();
        function filtrar_dias_vendidos_reserva(mes = '', año = '', destino = ''){
        const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
        fetch("{{ url('/dias_vendidos_reserva')}}",{
                   method : 'POST',
                   body: JSON.stringify({mes:mes, año:año, destino:destino}),
                   headers:{
                       'Content-Type': 'application/json',
                       "X-CSRF-Token": csrfToken
                   }
               }).then(response =>{
                   return response.json()
               }).then( data =>{
                   var dias_vendidos_reserva = data.dias_vendidos_reserva;
                   var nombre_año = data.nombre_año;
                   var nombre_mes = data.nombre_mes;

                   var dias_array = [];
                   var cantidad_array = [];
                   for(let i in data.dias_vendidos_reserva){
                     dias_array.push(data.dias_vendidos_reserva[i].dia+': '+data.dias_vendidos_reserva[i].cantidad);
                     cantidad_array.push(data.dias_vendidos_reserva[i].cantidad);
                   }

                   var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
                   var donutData        = {
                     labels: dias_array,
                     datasets: [
                       {
                         data: cantidad_array,
                         backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', 'danger'],
                       }
                     ]
                   };
                   var donutOptions     = {
                     maintainAspectRatio : false,
                     responsive : true,
                     legend: {
                       position: 'right'
                     },
                     title: {
                        display: true,
                        text: 'Días que más se vendieron'
                    },
                     tooltips: {enabled: false},
                     hover: {mode: null},
                   };
                   //Create pie or douhnut chart
                   // You can switch between pie and douhnut using the method below.
                   new Chart(donutChartCanvas, {
                     type: 'doughnut',
                     data: donutData,
                     options: donutOptions
                   });


                   document.getElementById("nombre_mes_dias_vendidos_reserva").innerHTML = nombre_mes+' - '+nombre_año;

               }).catch(error =>console.error(error));


          }

          $('#filtrar_dias_vendidos_reserva').click(function(){
              var mes = $('.mes_dias_vendidos_reserva').val();
              var año = $('.año_dias_vendidos_reserva').val();
              var destino = $('.destino_dias_vendidos_reserva').val();
              if((mes != '') && (destino != '') && (año != '')){
                document.getElementById("donutChart").remove();
                var canvas = document.createElement("canvas");
                canvas.id = "donutChart";
                canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                document.getElementById("contenido_donutChart").appendChild(canvas);

                filtrar_dias_vendidos_reserva(mes, año, destino);
              }else{
                alert('Seleccione todas las opciones');
              }
          });
          //FIN CARGA DE DATOS DIAS MAS VENDIDOS RESERVA


          //CARGA DE DATOS LISTADO DE SEGUIMIENTOS DE PAGOS
          filtrar_listado_seguimiento_pagos();
          function filtrar_listado_seguimiento_pagos(mes = '', año = '', destino = ''){

              var table_seguimiento_pagos = $("#table_seguimiento_pagos").DataTable({
                searching: false,
                bLengthChange: false,
                paging: false,
                ordering: false,
                info: false,
                scrollX: true,
                ajax: {
                  url : "{{ url('/data_listado_seguimiento_pagos')}}",
                  data : {mes: mes, año: año, destino: destino},
                },

                columns: [
                  {data : 'id_reservas',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+data+'</span>';
                      }
                  },
                  {data : 'nombre_cliente',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+row.nombre_cliente+' '+row.apellido_cliente+'</span>';
                      }
                  },
                  {data : 'fecha_compra',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+data+'</span>';
                      }
                  },
                  {data : 'monto_venta',
                      "render" : function ( data, type, row, meta )
                      {
                          var monto_venta_format = data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                          return '<span class=\"badge bg-success\">'+monto_venta_format+'</span>';
                      }
                  },
                  {data : 'monto_total',
                      "render" : function ( data, type, row, meta )
                      {
                          var pendiente_pago = row.monto_venta - row.monto_total;
                          var pendiente_pago_format = pendiente_pago.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                          return '<span class=\"badge bg-warning\">'+pendiente_pago_format+'</span>';
                      }
                  },
                  {data : 'prox_fecha',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+data+'</span>';
                      }
                  },
                ],
              });


          const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
          fetch("{{ url('/informacion_modulo_seguimiento_pagos')}}",{
                     method : 'POST',
                     body: JSON.stringify({mes:mes, año:año, destino:destino}),
                     headers:{
                         'Content-Type': 'application/json',
                         "X-CSRF-Token": csrfToken
                     }
                 }).then(response =>{
                     return response.json()
                 }).then( data =>{

                     var nombre_año = data.nombre_año;
                     var nombre_mes = data.nombre_mes;
                     var saldo_pendiente = data.saldo_pendiente;
                     var cantidad_seguimiento_pagos = data.cantidad_seguimiento_pagos;
                     var pendiente = saldo_pendiente.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

                     document.getElementById("nombre_mes_listado_seguimiento_pagos").innerHTML = nombre_mes+' - '+nombre_año;
                     document.getElementById("pendiente_listado_seguimiento").innerHTML = pendiente+' COP';
                     document.getElementById("cantidad_seguimiento_pagos").innerHTML = '<i class="fas fa-calendar-alt"></i> '+cantidad_seguimiento_pagos;

                 }).catch(error =>console.error(error));
            }

            $('#filtrar_listado_seguimiento_pagos').click(function(){
                var mes = $('.mes_lista_seguimiento').val();
                var año = $('.año_lista_seguimiento').val();
                var destino = $('.destino_lista_seguimiento').val();
                if((mes != '') && (destino != '') && (año != '')){
                  $("#table_seguimiento_pagos").DataTable().destroy();
                  filtrar_listado_seguimiento_pagos(mes, año, destino);
                }else{
                  alert('Seleccione todas las opciones');
                }

                table_seguimiento_pagos.draw();
            });
            //FIN CARGA DE DATOS DIAS MAS VENDIDOS RESERVA


            //CARGA DE DATOS LISTADO TOURES MAS VENDIDOS
            filtrar_listado_toures_vendidos();
            function filtrar_listado_toures_vendidos(mes = '', año = '', destino = ''){

              var tabla_top_toures_vendidos = $("#tabla_top_toures_vendidos").DataTable({
                searching: false,
                bLengthChange: false,
                paging: false,
                ordering: false,
                info: false,
                scrollX: true,
                ajax: {
                  url : "{{ url('/data_listado_toures_vendidos')}}",
                  data : {mes: mes, año: año, destino: destino},
                },
                columns: [
                  {data : 'posicion',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+data+'</span>';
                      }
                  },
                  {data : 'nombre_tour',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge\">'+data+'</span>';
                      }
                  },
                  {data : 'cantidad',
                      "render" : function ( data, type, row, meta )
                      {
                          return '<span class=\"badge bg-info\">'+data+'</span>';
                      }
                  },
                ],
              });


            const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
            fetch("{{ url('/informacion_modulo_toures_vendidos')}}",{
                       method : 'POST',
                       body: JSON.stringify({mes:mes, año:año, destino:destino}),
                       headers:{
                           'Content-Type': 'application/json',
                           "X-CSRF-Token": csrfToken
                       }
                   }).then(response =>{
                       return response.json()
                   }).then( data =>{
                       var nombre_barra = data.nombre_barra;

                       var array_toures = [];
                       var array_cantidad = [];
                       for(let i in data.top_toures){
                          array_toures.push(data.top_toures[i].nombre_tour+': '+data.top_toures[i].cantidad);
                          array_cantidad.push(data.top_toures[i].cantidad);
                       }
                       document.getElementById("nombre_mes_toures_vendidos").innerHTML = nombre_barra;

                       //-------------
                       //- PIE CHART -
                       //-------------
                       // Get context with jQuery - using jQuery's .get() method.

                       var donutData= {
                         labels: array_toures,
                         datasets: [
                           {
                             data: array_cantidad,
                             backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
                           }
                         ]
                       }
                       var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
                       var pieData        = donutData;
                       var pieOptions     = {
                         maintainAspectRatio : false,
                         responsive : true,
                         legend: {
                           position: 'right'
                         },
                         title: {
                              display: true,
                              text: 'Toures más vendidos'
                         },
                         tooltips: {enabled: false},
                         hover: {mode: null},
                       }
                       //Create pie or douhnut chart
                       // You can switch between pie and douhnut using the method below.
                       var NombreChart1 = new Chart(pieChartCanvas, {
                         type: 'pie',
                         data: pieData,
                         options: pieOptions

                       })

                   }).catch(error =>console.error(error));


              }

              $('#filtrar_listado_toures_vendidos').click(function(){
                  var mes = $('.mes_toures_vendidos').val();
                  var año = $('.año_toures_vendidos').val();
                  var destino = $('.destino_toures_vendidos').val();

                  if((mes != '') && (destino != '') && (año != '')){
                    document.getElementById("pieChart").remove();

                    var canvas = document.createElement("canvas");
                    canvas.id = "pieChart";
                    canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                    document.getElementById("contenido_char").appendChild(canvas);


                    $("#tabla_top_toures_vendidos").DataTable().destroy();
                    filtrar_listado_toures_vendidos(mes, año, destino);
                    }

                    if((mes != '') && (destino == '') && (año != '')){
                      document.getElementById("pieChart").remove();

                      var canvas = document.createElement("canvas");
                      canvas.id = "pieChart";
                      canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                      document.getElementById("contenido_char").appendChild(canvas);


                      $("#tabla_top_toures_vendidos").DataTable().destroy();
                      filtrar_listado_toures_vendidos(mes, año, destino);
                    }
                    if((mes == '') && (destino != '') && (año == '')){
                      document.getElementById("pieChart").remove();

                      var canvas = document.createElement("canvas");
                      canvas.id = "pieChart";
                      canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                      document.getElementById("contenido_char").appendChild(canvas);


                      $("#tabla_top_toures_vendidos").DataTable().destroy();
                      filtrar_listado_toures_vendidos(mes, año, destino);
                    }
                    if((mes == '') && (destino != '') && (año != '')){
                      document.getElementById("pieChart").remove();

                      var canvas = document.createElement("canvas");
                      canvas.id = "pieChart";
                      canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                      document.getElementById("contenido_char").appendChild(canvas);


                      $("#tabla_top_toures_vendidos").DataTable().destroy();
                      filtrar_listado_toures_vendidos(mes, año, destino);
                    }
                    if((mes == '') && (destino == '') && (año != '')){
                      document.getElementById("pieChart").remove();

                      var canvas = document.createElement("canvas");
                      canvas.id = "pieChart";
                      canvas.style = "min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;";
                      document.getElementById("contenido_char").appendChild(canvas);


                      $("#tabla_top_toures_vendidos").DataTable().destroy();
                      filtrar_listado_toures_vendidos(mes, año, destino);
                    }
                    if((mes == '') && (destino == '') && (año == '')){
                      Toast.fire({
                        icon: 'warning',
                        title: 'Debes seleccionar un campo para filtrar.'
                      });
                    }
                  tabla_top_toures_vendidos.draw();
              });

              $('#reset_toures_vendidos').click(function(){

                  var html = '';
                  html += '<option value="">Año</option>';
                  html += '@foreach($años as $año) <option value="{{$año->año}}">{{$año->año}}</option>@endforeach';

                  var html1 = '';
                  html1 += '<option value="">Destino</option>';
                  html1 += '@foreach($destinos as $destino) <option value="{{$destino->id_destino}}">{{$destino->nombre_destino}}</option>@endforeach';

                  var html2 = '';
                  html2 += '<option value="">Mes</option>';

                  document.getElementById('año_select_toures_vendidos').innerHTML = html;
                  document.getElementById('destino_select_toures_vendidos').innerHTML = html1;
                  document.getElementById('mes_select_toures_vendidos').innerHTML = html2;
                  $('#tabla_top_toures_vendidos').DataTable().destroy();
                  filtrar_listado_toures_vendidos();
              });
              //FIN CARGA DE DATOS LISTADO TOURES MAS VENDIDOS

              //CARGA DE DATOS LISTADO TOURES MAS VENDIDOS
              filtrar_lista_toures_pendientes();
              function filtrar_lista_toures_pendientes(mes = '', año = '', destino = ''){

                var tabla_toures_pendientes = $("#tabla_toures_pendientes").DataTable({
                  searching: false,
                  bLengthChange: false,
                  paging: false,
                  ordering: false,
                  info: false,
                  scrollX: true,
                  ajax: {
                    url : "{{ url('/data_lista_toures_pendientes')}}",
                    data : {mes: mes, año: año, destino: destino},
                  },
                  columns: [
                    {data : 'id_reservas',
                        "render" : function ( data, type, row, meta )
                        {
                            return '<span class=\"badge\">'+data+'</span>';
                        }
                    },
                    {data : 'nombre_tour',
                        "render" : function ( data, type, row, meta )
                        {
                            return '<span class=\"badge\">'+data+'</span>';
                        }
                    },
                    {data : 'nombre_cliente',
                        "render" : function ( data, type, row, meta )
                        {
                            return '<span class=\"badge\">'+row.nombre_cliente+' '+row.apellido_cliente+'</span>';
                        }
                    },
                    {data : 'fecha_inicio',
                        "render" : function ( data, type, row, meta )
                        {
                            return '<span class=\"badge\">'+data+'</span>';
                        }
                    },
                    {data : 'estado_resertou',
                        "render" : function ( data, type, row, meta )
                        {
                            if (data == 1) {
                              var estado = '<span class="badge bg-warning">Pendiente</span>';
                            }
                            if (data == 4) {
                              var estado = '<span class="badge bg-primary">Reprogramado</span>';
                            }
                            if (data == 5) {
                              var estado = '<span class="badge bg-secondary">Reprogramación pendiente</span>';
                            }
                            return estado;
                        }
                    },
                    {data : 'id_reservas',
                        "render" : function ( data, type, row, meta )
                        {
                            var url = "{{ url('/infoReservaPendiente', 'hola') }}";
                            var hola = url.replace('hola', data);

                            return '<span class="badge bg-info"><a title="Editar toures de reserva" href="'+hola+'" class="p-1"><i class="fas fa-eye"></i></a></span>';
                        }
                    },
                  ],
                });



              const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
              fetch("{{ url('/informacion_modulo_toures_pendientes')}}",{
                         method : 'POST',
                         body: JSON.stringify({mes:mes, año:año, destino:destino}),
                         headers:{
                             'Content-Type': 'application/json',
                             "X-CSRF-Token": csrfToken
                         }
                     }).then(response =>{
                         return response.json()
                     }).then( data =>{
                         var nombre_barra = data.nombre_barra;
                         var cantidad_toures_pendientes = data.cantidad_toures_pendientes;

                         document.getElementById("nombre_mes_lista_toures_pendientes").innerHTML = nombre_barra;
                         document.getElementById("cantidad_lista_toures_pendientes").innerHTML = '<i class="fas fa-ship"></i> '+cantidad_toures_pendientes;

                     }).catch(error =>console.error(error));


                }

                $('#filtrar_lista_toures_pendientes').click(function(){
                    var mes = $('.mes_lista_toures_pendientes').val();
                    var año = $('.año_lista_toures_pendientes').val();
                    var destino = $('.destino_lista_toures_pendientes').val();

                    if((mes != '') && (destino != '') && (año != '')){
                      $("#tabla_toures_pendientes").DataTable().destroy();
                      filtrar_lista_toures_pendientes(mes, año, destino);
                    }

                    if((mes != '') && (destino == '') && (año != '')){
                      $("#tabla_toures_pendientes").DataTable().destroy();
                      filtrar_lista_toures_pendientes(mes, año, destino);
                    }
                    if((mes == '') && (destino != '') && (año == '')){
                      $("#tabla_toures_pendientes").DataTable().destroy();
                      filtrar_lista_toures_pendientes(mes, año, destino);
                    }
                    if((mes == '') && (destino == '') && (año != '')){
                      $("#tabla_toures_pendientes").DataTable().destroy();
                      filtrar_lista_toures_pendientes(mes, año, destino);
                    }
                    if((mes == '') && (destino != '') && (año != '')){
                      $("#tabla_toures_pendientes").DataTable().destroy();
                      filtrar_lista_toures_pendientes(mes, año, destino);
                    }
                    if((mes == '') && (destino == '') && (año == '')){
                      Toast.fire({
                        icon: 'warning',
                        title: 'Debes seleccionar un campo para filtrar.'
                      });
                    }
                  //  tabla_toures_pendientes.draw();
                });

                $('#reset_lista_toures_pendientes').click(function(){

                    var html = '';
                    html += '<option value="">Año</option>';
                    html += '@foreach($años as $año) <option value="{{$año->año}}">{{$año->año}}</option>@endforeach';

                    var html1 = '';
                    html1 += '<option value="">Destino</option>';
                    html1 += '@foreach($destinos as $destino) <option value="{{$destino->id_destino}}">{{$destino->nombre_destino}}</option>@endforeach';

                    var html2 = '';
                    html2 += '<option value="">Mes</option>';

                    document.getElementById('año_select_lista_toures_pendientes').innerHTML = html;
                    document.getElementById('destino_select_lista_toures_pendientes').innerHTML = html1;
                    document.getElementById('mes_select_lista_toures_pendientes').innerHTML = html2;
                    $('#tabla_toures_pendientes').DataTable().destroy();
                    filtrar_lista_toures_pendientes();
                });
                //FIN CARGA DE DATOS LISTADO TOURES MAS VENDIDOS


                //CARGA DE DATOS LISTADO PAGO DE PROVEEDORES
                filtrar_lista_pago_proveedores();
                function filtrar_lista_pago_proveedores(mes = '', año = '', destino = ''){

                  var tabla_pago_proveedores = $("#tabla_pago_proveedores").DataTable({
                    searching: false,
                    bLengthChange: false,
                    paging: false,
                    ordering: false,
                    info: false,
                    scrollX: true,
                    ajax: {
                      url : "{{ url('/data_lista_pago_proveedores')}}",
                      data : {mes: mes, año: año, destino: destino},
                    },
                    columns: [
                      {data : 'nombre_banco',
                          "render" : function ( data, type, row, meta )
                          {
                              return '<span class=\"badge\">'+row.nombre_banco+' - '+row.nombre_proveedor+' '+row.apellido_proveedor+'</span>';
                          }
                      },
                      {data : 'tipo_pago',
                          "render" : function ( data, type, row, meta )
                          {
                              return '<span class=\"badge\">'+row.tipo_pago+'</span>';
                          }
                      },
                      {data : 'referencia',
                          "render" : function ( data, type, row, meta )
                          {
                              return '<span class=\"badge\">'+data+'</span>';
                          }
                      },
                      {data : 'monto',
                          "render" : function ( data, type, row, meta )
                          {
                              return '<span class="badge bg-success">'+data+' COP</span>';
                          }
                      },
                      {data : 'fecha_pago',
                          "render" : function ( data, type, row, meta )
                          {
                              return '<span class=\"badge\">'+data+'</span>';
                          }
                      },
                      {data : 'foto_pago',
                          "render" : function ( data, type, row, meta )
                          {
                            var url = "ver('hola');";
                            var hola = url.replace('hola', data);
                            if (data === null) {
                              return "<button type=\"button\" onclick=\""+hola+"\" data-imagen=\""+data+"\" class=\"btn btn-block btn-warning btn-xs\" data-toggle=\"modal\" data-target=\"#staticBackdrop1\" disabled><i class=\"fas fa-image\"></i></button>";
                            }else {
                              return "<button type=\"button\" onclick=\""+hola+"\" data-imagen=\""+data+"\" class=\"btn btn-block btn-warning btn-xs\" data-toggle=\"modal\" data-target=\"#staticBackdrop1\"><i class=\"fas fa-image\"></i></button>";
                            }
                          }
                      },
                      {data : 'estado',
                          "render" : function ( data, type, row, meta )
                          {
                            if (data == 1) {
                              return "<span class=\"badge bg-success\">Pago proveedor</span>";
                            }
                            if (data == 2) {
                              return "<span class=\"badge bg-danger\">Pago reembolso</span>";
                            }
                          }
                      },

                    ],
                  });



                const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
                fetch("{{ url('/informacion_modulo_pago_proveedores')}}",{
                           method : 'POST',
                           body: JSON.stringify({mes:mes, año:año, destino:destino}),
                           headers:{
                               'Content-Type': 'application/json',
                               "X-CSRF-Token": csrfToken
                           }
                       }).then(response =>{
                           return response.json()
                       }).then( data =>{
                           var nombre_año = data.nombre_año;
                           var nombre_mes = data.nombre_mes;
                           var nombre_completo = nombre_mes+' - '+nombre_año;
                           var valor_pendiente_inicial = parseInt(data.total_pago_proveedor_pendiente);

                           var resta = 0;
                           for (let i in data.ciclo_total_pago_proveedor_pendiente) {
                              for (let t in data.ciclo_total_pago_proveedor){
                                      var id_1 = parseInt(data.ciclo_total_pago_proveedor[t].id_resertour)
                                      var id_2 = parseInt(data.ciclo_total_pago_proveedor_pendiente[i].id_resertour);
                                      var valor_1 = parseInt(data.ciclo_total_pago_proveedor[t].monto);
                                if (id_2 == id_1) {
                                   resta += valor_1;
                                }
                                }
                           }
                           var valor_pendiente_total = valor_pendiente_inicial - resta;

                           var pago_total_format = data.total_pago_proveedor.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                           var pago_pendiente_format = valor_pendiente_total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");


                           var xValues = [nombre_completo];
                           new Chart("myChart2", {
                             type: "bar",
                             data: {
                               labels: xValues,
                               datasets: [{
                                 label: 'Total pagos: '+pago_total_format+' COP',
                                 data: [data.total_pago_proveedor,10],
                                 borderColor: "red",
                                 backgroundColor: "#3d9970",
                                 fill: false
                               }, {
                                 label: 'Pagos pendientes: '+pago_pendiente_format+' COP',
                                 data: [data.total_pago_proveedor_pendiente,10],
                                 borderColor: "green",
                                 backgroundColor: "#c2c7d0",
                                 fill: false
                               }]
                             },
                             options: {
                               legend: {display: true},
                               title: {
                                    display: true,
                                    text: 'Titulo de la section'
                                },
                               tooltips: {enabled: false},
                               hover: {mode: null},
                             }
                           });

                           document.getElementById("nombre_mes_pago_proveedores").innerHTML = nombre_mes+' - '+nombre_año;

                       }).catch(error =>console.error(error));


                  }

                  $('#filtrar_pago_proveedores').click(function(){
                      var mes = $('.mes_pago_proveedores').val();
                      var año = $('.año_pago_proveedores').val();
                      var destino = $('.destino_pago_proveedores').val();
                      if((mes != '') && (destino != '') && (año != '')){
                        document.getElementById("myChart2").remove();
                        var canvas = document.createElement("canvas");
                        canvas.id = "myChart2";
                        document.getElementById("contenido_myChart2").appendChild(canvas);

                        $("#tabla_pago_proveedores").DataTable().destroy();
                        filtrar_lista_pago_proveedores(mes, año, destino);
                      }else{
                        alert('Seleccione todas las opciones');
                      }
                      tabla_pago_proveedores.draw();
                  });
                  //FIN CARGA DE DATOS LISTADO PAGO DE PROVEEDORES


                  //CARGA DE DATOS LISTADO GASTOS
                  filtrar_listado_gastos();
                  function filtrar_listado_gastos(mes = '', año = '', destino = ''){

                    var tabla_listado_gastos = $("#tabla_listado_gastos").DataTable({
                      searching: false,
                      bLengthChange: false,
                      paging: false,
                      ordering: false,
                      info: false,
                      scrollX: true,
                      ajax: {
                        url : "{{ url('/data_lista_gastos')}}",
                        data : {mes: mes, año: año, destino: destino},
                      },
                      columns: [
                        {data : 'descripcion',
                            "render" : function ( data, type, row, meta )
                            {
                                return '<span class=\"badge\">'+data+'</span>';
                            }
                        },
                        {data : 'referencia',
                            "render" : function ( data, type, row, meta )
                            {
                                return '<span class=\"badge\">'+data+'</span>';
                            }
                        },
                        {data : 'tipo_pago',
                            "render" : function ( data, type, row, meta )
                            {
                                return '<span class=\"badge\">'+data+'</span>';
                            }
                        },
                        {data : 'monto_total',
                            "render" : function ( data, type, row, meta )
                            {
                                var pago_total_format = data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                                return '<span class=\"badge bg-danger\">'+pago_total_format+' COP</span>';
                            }
                        },
                        {data : 'foto_pago',
                            "render" : function ( data, type, row, meta )
                            {
                              var url = "ver_gasto('hola');";
                              var hola = url.replace('hola', data);
                              if (data === null) {
                                return "<button type=\"button\" onclick=\""+hola+"\" data-imagen=\""+data+"\" class=\"btn btn-block btn-warning btn-xs\" data-toggle=\"modal\" data-target=\"#staticBackdrop1\" disabled><i class=\"fas fa-image\"></i></button>";
                              }else {
                                return "<button type=\"button\" onclick=\""+hola+"\" data-imagen=\""+data+"\" class=\"btn btn-block btn-warning btn-xs\" data-toggle=\"modal\" data-target=\"#staticBackdrop1\"><i class=\"fas fa-image\"></i></button>";
                              }
                            }
                        },
                      ],
                    });



                  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
                  fetch("{{ url('/informacion_modulo_listado_gastos')}}",{
                             method : 'POST',
                             body: JSON.stringify({mes:mes, año:año}),
                             headers:{
                                 'Content-Type': 'application/json',
                                 "X-CSRF-Token": csrfToken
                             }
                         }).then(response =>{
                             return response.json()
                         }).then( data =>{
                             var nombre_año = data.nombre_año;
                             var nombre_mes = data.nombre_mes;

                             var monto_gastos = data.monto_gastos.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

                             document.getElementById("nombre_mes_listado_gastos").innerHTML = nombre_mes+' - '+nombre_año;
                             document.getElementById("monto_gastos_total").innerHTML = monto_gastos+' COP';

                         }).catch(error =>console.error(error));


                    }

                    $('#filtrar_listado_gastos').click(function(){
                        var mes = $('.mes_listado_gastos').val();
                        var año = $('.año_listado_gastos').val();
                        if((mes != '') && (año != '')){
                          $("#tabla_listado_gastos").DataTable().destroy();
                          filtrar_listado_gastos(mes, año);
                        }else{
                          alert('Seleccione todas las opciones');
                        }
                        tabla_listado_gastos.draw();
                    });
                    //FIN CARGA DE DATOS LISTADO GASTOS


                    //CARGA DE DATOS LISTADO GASTOS
                    filtrar_listado_reembolsos();
                    function filtrar_listado_reembolsos(mes = '', año = '', destino = ''){
                      var tabla_reembolsos = $("#tabla_reembolsos").DataTable({
                        searching: false,
                        bLengthChange: false,
                        paging: false,
                        ordering: false,
                        info: false,
                        scrollX: true,
                        ajax: {
                          url : "{{ url('/data_lista_reembolsos')}}",
                          data : {mes: mes, año: año, destino: destino},
                        },
                        columns: [
                          {data : 'id_reserva',
                              "render" : function ( data, type, row, meta )
                              {
                                  return '<span class=\"badge\">'+data+'</span>';
                              }
                          },
                          {data : 'nombre_tour',
                              "render" : function ( data, type, row, meta )
                              {
                                  return '<span class=\"badge\">'+data+'</span>';
                              }
                          },
                          {data : 'nombre_proveedor',
                              "render" : function ( data, type, row, meta )
                              {
                                  return '<span class=\"badge\">'+row.nombre_proveedor+' '+row.apellido_proveedor+'</span>';
                              }
                          },
                          {data : 'nro_tour',
                              "render" : function ( data, type, row, meta )
                              {
                                  return '<span class=\"badge bg-info\">'+data+'</span>';
                              }
                          },
                          {data : 'id_reserva',
                              "render" : function ( data, type, row, meta )
                              {
                                  return '<span class=\"badge bg-danger\">Reembolsado</span>';
                              }
                          },
                        ],
                      });



                    const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
                    fetch("{{ url('/informacion_modulo_listado_reembolsos')}}",{
                               method : 'POST',
                               body: JSON.stringify({mes:mes, año:año, destino:destino}),
                               headers:{
                                   'Content-Type': 'application/json',
                                   "X-CSRF-Token": csrfToken
                               }
                           }).then(response =>{
                               return response.json()
                           }).then( data =>{
                               var nombre_año = data.nombre_año;
                               var nombre_mes = data.nombre_mes;
                               var cantidad_reembolsos = data.cantidad_reembolsos;
                               var monto_total_reembolsos = data.monto_total_reembolsos.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

                               document.getElementById("nombre_mes_reembolsos").innerHTML = nombre_mes+' - '+nombre_año;
                               document.getElementById("monto_total_reembolsos").innerHTML = monto_total_reembolsos+' COP';
                               document.getElementById("cantidad_reembolsos").innerHTML = cantidad_reembolsos;
                           }).catch(error =>console.error(error));


                      }

                      $('#filtrar_reembolsos').click(function(){
                          var mes = $('.mes_reembolsos').val();
                          var año = $('.año_reembolsos').val();
                          var destino = $('.destino_reembolsos').val();
                          if((mes != '') && (año != '') && (destino != '')){
                            $("#tabla_reembolsos").DataTable().destroy();
                            filtrar_listado_reembolsos(mes, año, destino);
                          }else{
                            alert('Seleccione todas las opciones');
                          }
                          tabla_reembolsos.draw();
                      });
                      //FIN CARGA DE DATOS LISTADO GASTOS
  });
</script>
<script type="text/javascript">
$('.año_select').on("change", function(e){
  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    fetch("{{ url('/selectReporte1')}}",{
        method : 'POST',
        body: JSON.stringify({texto : e.target.value}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var opciones ="";
            opciones+= '<option value="">Mes</option>';
        for (let i in data.lista) {
          opciones+= '<option value="'+data.lista[i].numero+'">'+data.lista[i].mes+'</option>';
        }
      document.getElementById("mes_select_total_ingresos").innerHTML = opciones;
      document.getElementById("mes_select_dias_vendidos_reserva").innerHTML = opciones;
      document.getElementById("mes_select_lista_seguimiento").innerHTML = opciones;
      document.getElementById("mes_select_toures_vendidos").innerHTML = opciones;
      document.getElementById("mes_select_pago_proveedores").innerHTML = opciones;
      document.getElementById("mes_select_listado_gastos").innerHTML = opciones;
      document.getElementById("mes_select_reembolsos").innerHTML = opciones;

    }).catch(error =>console.error(error));
});

$('.mes_select').on("change", function(e){
  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    fetch("{{ url('/selectReporte2')}}",{
        method : 'POST',
        body: JSON.stringify({texto : e.target.value}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var opciones ="";
            opciones += '<option value="">Destino</option>';
        var id = 0;
        for (let i in data.lista) {
          if (id != data.lista[i].id_destino) {
            id = data.lista[i].id_destino;
            opciones+= '<option value="'+data.lista[i].id_destino+'">'+data.lista[i].nombre_destino+'</option>';
          }

        }
        document.getElementById("destino_select_total_ingresos").innerHTML = opciones;
        document.getElementById("destino_select_dias_vendidos_reserva").innerHTML = opciones;
        document.getElementById("destino_select_lista_seguimiento").innerHTML = opciones;
        document.getElementById("destino_select_toures_vendidos").innerHTML = opciones;
        document.getElementById("destino_select_lista_toures_pendientes").innerHTML = opciones;
        document.getElementById("destino_select_pago_proveedores").innerHTML = opciones;
        document.getElementById("destino_select_reembolsos").innerHTML = opciones;

    }).catch(error =>console.error(error));
});
</script>
<script type="text/javascript">
$('.año_select_toures').on("change", function(e){
  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    fetch("{{ url('/selectReporte1Toures')}}",{
        method : 'POST',
        body: JSON.stringify({texto : e.target.value}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var opciones ="";
            opciones+= '<option value="">Mes</option>';
        for (let i in data.lista) {
          opciones+= '<option value="'+data.lista[i].numero+'">'+data.lista[i].mes+'</option>';
        }
      document.getElementById("mes_select_lista_toures_pendientes").innerHTML = opciones;
    }).catch(error =>console.error(error));
});

$('.mes_select_toures').on("change", function(e){
  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    fetch("{{ url('/selectReporte2Toures')}}",{
        method : 'POST',
        body: JSON.stringify({texto : e.target.value}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var opciones ="";
            opciones += '<option value="">Destino</option>';
        var id = 0;
        for (let i in data.lista) {
          if (id != data.lista[i].id_destino) {
            id = data.lista[i].id_destino;
            opciones+= '<option value="'+data.lista[i].id_destino+'">'+data.lista[i].nombre_destino+'</option>';
          }

        }
        document.getElementById("destino_select_lista_toures_pendientes").innerHTML = opciones;

    }).catch(error =>console.error(error));
});
</script>
<script>
$(document).on('click', "#ver_proveedor", function(){

  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
   var nombre_clienteP = $(this).data('nombree');
   var apellido_clienteP = $(this).data('apellidoo');

   var id_reservaP = $(this).data('idreservaa');

   fetch(" {{ url('/ver_proveedor')}}",{
        method : 'POST',
        body: JSON.stringify({texto : id_reservaP}),
        headers:{
            'Content-Type': 'application/json',
            "X-CSRF-Token": csrfToken
        }
    }).then(response =>{
        return response.json()
    }).then( data =>{
        var opciones ="";
        for (let i in data.lista) {
           opciones+= '<option value="'+data.lista[i].id_proveedor+'">'+data.lista[i].nombre_proveedor+' '+data.lista[i].apellido_proveedor+'</option>';
        }

          document.getElementById("id_select_ver_proveedor").innerHTML = opciones;
    }).catch(error =>console.error(error));

   $('#nombre_clienteP').html(nombre_clienteP);
   $('#apellido_clienteP').html(apellido_clienteP);
   $('#id_reservaP').val(id_reservaP);

});

function ver(imagen2){
  var imagen = imagen2;
  document.getElementById("imagen").innerHTML = '<img src="../public/img/pago_proveedores/'+imagen+'" alt="">';
}

function ver_gasto(imagen3){
  var imagen3 = imagen3;
  document.getElementById("imagen_modal").innerHTML = '<img src="../public/img/foto_gastos/'+imagen3+'" alt="">';
}
</script>
@stop