<?php include "Views/templates/header.php"; ?>

<!-- Botones de CRUD -->
<?php if ($_SESSION['permisos']['crear clientes nuevos']) { ?>
    <button class="btn btn-primary mb-2" type="button" onclick="frmCliente();"><i class="fas fa-plus" data-toggle="tooltip" data-placement="top" title="Crear Cliente"></i></button>
<?php  }  ?>
<?php if ($_SESSION['permisos']['editar datos de Cliente']) { ?>
    <button class="btn btn-primary mb-2 btn-toolbar-status" disabled type="button" onclick="btnEditarCli(active_row);"><i class="fas fa-edit" data-toggle="tooltip" data-placement="top" title="Editar datos de cliente"></i></button>
<?php  }  ?>
<?php if ($_SESSION['permisos']['ver configuracion de cliente']) { ?>
    <button class="btn btn-primary mb-2 btn-toolbar-status" disabled type="button" onclick="btnEditarCli(active_row);"><i class="fas fa-tools" data-toggle="tooltip" data-placement="top" title="Ver informacion del cliente"></i></button>
<?php  }  ?>
<?php if ($_SESSION['permisos']['eliminar cliente']) { ?>
    <button class="btn btn-danger mb-2 btn-toolbar-status btn-eliminar" disabled type="button" onclick="btnEliminarCli(active_row);"><i class="fas fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Inactivar Cliente"></i></button>
    <button class="btn btn-success mb-2 btn-toolbar-status btn-recuperar" disabled type="button" onclick="btnReingresarCli(active_row);" style="display: none;" data-toggle="tooltip" data-placement="top" title="Activar Cliente"><i class="fas fa-toggle-on"></i></button>
<?php  }  ?>

<!--<?php // if ((int)$_SESSION['tipousuario'] < 3) { ?>
<button class="btn btn-success mb-2 btn-toolbar-status btn-recuperar" disabled type="button" onclick="btnReingresarCli(active_row);" style="display: none;" data-toggle="tooltip" data-placement="top" title="Activar Cliente"><i class="fas fa-toggle-on"></i></button>
<?php //  }   ?>-->

<!-- Botones de Accion -->

<!--
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnAnotacionesCli(active_row);"><i class="fas fa-sticky-note"></i></button>
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnWhatsappCli(active_row);"><i class="fas fa-comment"></i></button>
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnUbicacionCli(active_row);"><i class="fas fa-map"></i></button>
-->
<?php if ($_SESSION['permisos']['acciones del cliente']) { ?>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary  mb-2"><i class="fas fa-hand-pointer" data-toggle="tooltip" data-placement="top" title="Acciones del Cliente"></i></button>
        <button type="button" class="btn btn-secondary  mb-2 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
        <div class="dropdown-menu">
            <?php if ($_SESSION['permisos']['agregar anotaciones cliente']) { ?>
                <a class="dropdown-item" onclick="btnAnotacionesCli(active_row);">Agregar Anotaciones</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['ver ubicacion cliente']) { ?>
                <a class="dropdown-item" onclick="btnUbicacionCli(active_row);">Ver Ubicacion</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['mandar mensaje cliente']) { ?>
                <a class="dropdown-item" onclick="btnWhatsappCli(active_row);">Mandar Mensaje</a>      
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['llamar cliente']) { ?>
                <a class="dropdown-item" onclick="btnWhatsappCli(active_row);">Llamar</a>            
            <?php  }  ?>
        </div>
    </div>
<?php  }  ?>
<!-- 
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnProgramarCliActive();"><i class="far fa-calendar-alt"></i></button> 
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnCobrarCliActive();"><i class="fas fa-dollar-sign"></i></button>
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnLlamarCliActive();"><i class="fas fa-phone-volume"></i></button>
<button class="btn btn-info mb-2 btn-toolbar-status" disabled type="button" onclick="btnVisitarCliActive();"><i class="fas fa-map-marker"></i></button> 
-->
<?php if ($_SESSION['permisos']['programaciones del cliente']) { ?>
    <div class="btn-group">
        <button type="button" class="btn btn-warning  mb-2"><i class="fas fa-calendar-day" data-toggle="tooltip" data-placement="top" title="Programaciones del cliente"></i></button>
        <button type="button" class="btn btn-warning  mb-2 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
            <?php if ($_SESSION['permisos']['programar llamada cliente']) { ?>
                <a class="dropdown-item" onclick="btnLlamarCliActive();">Programar Llamada</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['programar cobro cliente']) { ?>
                <a class="dropdown-item" onclick="btnCobrarCliActive();">Programar Cobro</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['programar visita cliente']) { ?>
                <a class="dropdown-item" onclick="btnProgramarCliActive();">Programar Visita</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['marcar visita cliente']) { ?>
                <a class="dropdown-item" onclick="btnVisitarCliActive();">Marcar Visita</a>
            <?php  }  ?>
        </div>
    </div>
<?php  }  ?>
<!-- Botones de Reporteria -->

<!--
<button class="btn btn-success mb-2 btn-toolbar-status" title='Reporte - Estado de Cuenta' disabled type="button" onclick="btnReporteEstadoCuenta(active_row);"><i class="fas fa-cash-register"></i></button>
<button class="btn btn-success mb-2 btn-toolbar-status2" title='Reporte - Antigüedad de Saldos' type="button" onclick="btnReporteAntiguedadSaldos(active_row);"><i class="fas fa-scale-unbalanced"></i></button>
<button class="btn btn-success mb-2 btn-toolbar-status2" title='Reporte - Cuentas por Cobrar' type="button" onclick="btnReporteCuentasxCobrar(active_row);"><i class="fas fa-file-invoice-dollar"></i></button>
-->
<?php if ($_SESSION['permisos']['Reporte de saldo clientes']) { ?>
    <div class="btn-group">
        <button type="button" class="btn btn-info mb-2"><i class="fas fa-file-invoice-dollar" data-toggle="tooltip" data-placement="top" title="Reportes de Saldo"></i></button>
        <button type="button" class="btn btn-info mb-2 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
            <?php if ($_SESSION['permisos']['estado de cuenta cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteEstadoCuenta(active_row);">Estado de Cuenta</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['antiguedad de saldos cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteAntiguedadSaldos(active_row);">Antiguedad de Saldos</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['cuentas por cobrar cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteCuentasxCobrar(active_row);">Cuentas por Cobrar</a>      
            <?php  }  ?>
        </div>
    </div>
<?php  }  ?>
<?php if ($_SESSION['permisos']['acciones de ventas clientes']) { ?>
    <div class="btn-group">
        <button type="button" class="btn btn-success mb-2"><i class="fas fa-cash-register" data-toggle="tooltip" data-placement="top" title="Acciones de Ventas"></i></button>
        <button type="button" class="btn btn-success mb-2 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        </button>
        <div class="dropdown-menu">
            <?php if ($_SESSION['permisos']['nuevo pedido cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteEstadoCuenta(active_row);">Nuevo Pedido</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['nueva factura cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteAntiguedadSaldos(active_row);">Nueva Factura</a>
            <?php  }  ?>
            <?php if ($_SESSION['permisos']['nuevo recibo cliente']) { ?>
                <a class="dropdown-item" onclick="btnReporteCuentasxCobrar(active_row);">Nuevo Recibo</a>      
            <?php  }  ?>
        </div>
    </div>  
<?php  }  ?>


<!-- Botones de Estadisticas -->
<?php if ((int)$_SESSION['tipousuario'] < 0) { ?>
    <button class="btn btn-warning mb-2 btn-toolbar-status" disabled type="button" onclick="btnHistorialvisitasCli(active_row);"><i class="fas fa-route"></i></button>
    <button class="btn btn-warning mb-2 btn-toolbar-status" disabled type="button" onclick="btnVentasCli(active_row);"><i class="fas fa-chart-bar"></i></button>
<?php } ?>
<?php if ($_SESSION['permisos']['crm del cliente']) { ?>
    <button class="btn btn-warning mb-2 btn-toolbar-status" disabled type="button" onclick="btnReporteCli(active_row);" data-toggle="tooltip" data-placement="top" title="CRM - Cliente"><i class="fas fa-chart-pie"></i></button>    
<?php } ?>
<button class="btn btn-warning mb-2" type="button" onclick="show_advanced_search();"><i class="fas fa-filter" data-toggle="tooltip" data-placement="top" title="Filtro avanzado"></i></button>

<div class="card shadow-lg">
    <div class="card-body">

        <div class="row d-none" id='advanced_search'>
            <div class="col-md-3">
                <label for="">Vendedor</label>
               
                <select class="form-control form-control-sm" name="vendedor" id="vendedor" onchange="search_cliente()">
                    <option value=''>No filtrar</option>
                    <?php foreach ($data['vendedores'] as $vendedor) { ?>
                        <option value="<?=$vendedor['codigo']?>"><?=$vendedor['codigo']?>-<?=$vendedor['vendedor']?></option>
                    <?php } ?>
                </select>                
            </div>

            <div class="col-md-2">
                <label for="">Ruta</label>
                <input class="form-control form-control-sm" id="ruta" type="text" name="ruta" placeholder="Ruta" onchange="search_cliente()" onkeyup="search_cliente()">
            </div>            
            <div class="col-md-2">
                <label for="filtro_fecha">Fechas</label>
                <select id="filtro_fecha" class="form-control form-control-sm" name="filtro_fecha" onchange="t_cli.draw();">
                    <option value=''>No filtrar</option>
                    <option value=0>Última Venta</option>
                    <option value=1>Último Pago</option>
                    <option value=2>Programación</option>
                    <option value=3>Última Visita</option>
                </select>
            </div>

            <div class="col-md-2">
                <label for="">Desde</label>
                <input class="form-control form-control-sm" id="fecha_desde" type="date" name="fecha_desde" placeholder="Selecciona Fecha Inicio" onchange="t_cli.draw();">
            </div>

            <div class="col-md-2">
                <label for="">Hasta</label>
                <input class="form-control form-control-sm" id="fecha_hasta" type="date" name="fecha_hasta" placeholder="Selecciona Fecha Fin" onchange="t_cli.draw();">
            </div>            
            <div class="col-md-1">
                <div class="form-group">
                    <label>&nbsp;</label><br>
                    <button class="btn btn-primary btn-sm btn-block" type="button" onclick="clean_search()"><i class="fa-solid fa-trash-can"></i></button>
                </div>
            </div>
        </div>
   
        <div class="table-responsive">
            <table  class="table table-bordered table-striped display responsive nowrap" id="t_cli" style="width: 100%;">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>Id</th>
                        <th>Nombre</th>
                        <th>Estado</th>
                        <th title='Vendedor'>Vend</th>
                        <th>Ruta</th>                                                
                        <th>Saldo</th>                                                                        
                        <th>Última Venta</th>                      
                        <th>Última Pago</th>
                        <th>Programacion</th>                        
                        <th>Ultima Visita</th>                        
                        <th>Dirección</th>
                        <th>Departamento</th>                        
                        <th>Teléfono</th>
                        <th>Descuento %</th>
                        <th>Dias Credito</th>                                                
                        <th>Limite de Credito</th>                        
                        <!-- <th></th>
                        <th></th> -->
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div id="nuevo_cliente" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Nuevo Cliente</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="formulario" class="needs-validation" novalidate autocomplete="off">
                <input type="hidden" id="id" name="id">
                <div class="modal-body" style='height:75vh;overflow-y:auto;'>

                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="generales-tab" data-toggle="tab" href="#generales" role="tab" aria-controls="generales" aria-selected="true"><i class="fas fa-user-cog"></i> <span class='d-none d-lg-inline-block'>Generales</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tdireccion-tab" data-toggle="tab" href="#tdireccion" role="tab" aria-controls="tdireccion" aria-selected="true"><i class="fas fa-map-marker-alt"></i> <span class='d-none d-lg-inline-block'>Dirección</span></a>
                            </li>                            
                            <li class="nav-item">
                                <a class="nav-link" id="parametros-tab" data-toggle="tab" href="#parametros" role="tab" aria-controls="parametros" aria-selected="false"><i class="fas fa-cogs"></i> <span class='d-none d-lg-inline-block'>Parametros</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="tcontacto-tab" data-toggle="tab" href="#tcontacto" role="tab" aria-controls="tcontacto" aria-selected="false"><i class="fas fa-id-card"></i> <span class='d-none d-lg-inline-block'>Contacto</span></a>
                            </li>
                        </ul>
                        
                        <!-- CAMPOS GENERAL -->
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active pt-2" id="generales" role="tabpanel" aria-labelledby="generales-tab">
                                    <div class="form-group">
                                        <label for="nombre">Nombre *</label>
                                        <input id="nombre" class="form-control" type="text" name="nombre" placeholder="Nombre del cliente" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El nombre es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="telefono">Telefono *</label>
                                        <input id="telefono" class="form-control" type="text" name="telefono" placeholder="Teléfono del cliente" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El teléfono es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="mensajeria">Mensajería</label>
                                        <input id="mensajeria" class="form-control" type="text" name="mensajeria" placeholder="Teléfono de mensajeria">
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            La mensajeria es requerido
                                        </div>
                                    </div>


                                        <div class="form-group">
                                            <label for="tipoid">Tipo de Identificacion</label>
                                            <select id="tipoid" name="tipoid" class="form-control">
                                                <option value="1">Nit</option>
                                                <option value="2">Dpi</option>
                                                <option value="3">Pasaporte</option>
                                            </select>
                                        </div>


                                    <div class="form-group">
                                        <label for="nit">Numero de Identificacion *</label>
                                        <input id="nit" class="form-control" type="text" name="nit" placeholder="Nit, Dpi, Passaporte"  required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El nit es requerido
                                        </div>
                                    </div>
                            </div>

                            <!-- CAMPOS DIRECCIÓN -->
                            <div class="tab-pane fade pt-2" id="tdireccion" role="tabpanel" aria-labelledby="tdireccion-tab">

                                    <div class="form-group">
                                        <label for="direccion">Dirección *</label>
                                        <input id="direccion" class="form-control" type="text" name="direccion" placeholder="Dirección" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            La direccion es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="municipio">Municipio *</label>
                                        <input id="municipio" class="form-control" type="text" name="municipio" placeholder="Municipio" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El municipio es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="departamento">Departamento *</label>
                                        <input id="departamento" class="form-control" type="text" name="departamento" placeholder="Departamento" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El departamento es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="pais">País *</label>
                                        <select class="form-control" required name="pais" id="pais"></select>

                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El país es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="coordenadas">Coordenadas</label>
                                        <input id="coordenadas" class="form-control" type="text" name="coordenadas" placeholder="Coordenadas">
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            Las coordenadas es requerido
                                        </div>
                                    </div>

                            </div>

                            <!-- CAMPOS PAREMETROS -->
                            <div class="tab-pane fade pt-2" id="parametros" role="tabpanel" aria-labelledby="parametros-tab">

                                    <div class="form-group">
                                        <label for="pais">Estado</label>
                                        <br>
                                        <div id='estado-1' class="btn btn-outline-success disabled p-1 pl-2 pr-2 mb-0 d-none" role="alert">ACTIVO</div>
                                        <div id='estado-0' class="btn btn-outline-danger disabled p-1 pl-2 pr-2 mb-0 d-none" role="alert">INACTIVO</div>
                                    </div>

                                    <div class="form-group">
                                        <label for="limite_credito">Limite de crédito *</label>
                                        <input id="limite_credito" class="form-control" type="number" step="any" min=0 name="limite_credito" placeholder="Límite de crédito" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El límite de crédito es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="dias_credito">Días de crédito *</label>
                                        <input id="dias_credito" class="form-control" type="number" step="any" min=0 name="dias_credito" placeholder="Días de crédito" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El días de crédito es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="pais">Vendedor *</label>
                                        <select class="form-control" required name="id_vendedor1" id="id_vendedor1">
                                        </select>

                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El país es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="tipocliente">Tipo de cliente *</label>
                                        <input id="tipocliente" class="form-control" type="text" name="tipocliente" placeholder="Tipo de Cliente" required>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El tipo de cliente es requerido
                                        </div>
                                    </div>
                            </div>

                            <!-- CAMPOS CONTACTO -->
                            <div class="tab-pane fade pt-2" id="tcontacto" role="tabpanel" aria-labelledby="tcontacto-tab">

                                    <div class="form-group">
                                        <label for="Contacto">Contacto</label>
                                        <input id="contacto" class="form-control" type="text" name="contacto" placeholder="Nombre del contacto">
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El contacto es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for=telcontacto">Telefono Contacto</label>
                                        <input id="telcontacto" class="form-control" type="text" name="telcontacto" placeholder="Teléfono del contacto">
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            El teléfono es requerido
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="observaciones">Observaciones</label>
                                        <textarea id="observaciones" class="form-control" name="observaciones" placeholder="Observaciones" rows="5"></textarea>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            Las observaciones es requeridas
                                        </div>
                                    </div>

                            </div>
                        </div>

                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                        <p class="text-info">Todo los campos con * son requeridos.</p>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccion">Registrar</button>
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

<div id="reporte_cliente" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Reportes Cliente <strong id='nombre_reporte_modal'></strong></h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="formulario" class="needs-validation" novalidate autocomplete="off">
                
                <div class="modal-body" style='height:75vh;overflow-y:auto;'>

                        
                        <!-- REPORTE VENTAS -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card card-default">
                                    <div class="card-header border-default fw-bold ">

                                        <div class="form-inline">
                                        <i class="fas fa-chart-pie"></i> <span class='ml-1 mr-3'>Ventas</span>
                                            <select id="yearVentas" class="form-control form-control-sm align-middle">
                                                <?php
                                                $fecha = date('Y');
                                                for ($i = 2021; $i <= $fecha; $i++) { ?>
                                                <option value="<?php echo $i; ?>" <?php echo ($i == $fecha) ? 'selected' : ''; ?>><?php echo $i; ?></option>
                                                <?php } ?>
                                            </select>
                                            <button class='btn btn-success btn-sm ml-2' onclick="actualizarGraficoVentasMesCliente()"><i class="fas fa-sync-alt"></i> Actualizar</button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-12 col-lg-6">
                                                <div class="chart">
                                                    <!-- Sales Chart Canvas -->
                                                    <canvas id="comparacionVentas" height="180" style="height: 250px;"></canvas>
                                                </div>
                                            </div>
                                            <div class="col-12 col-lg-6">
                                                <table class='table table-sm table-striped'>
                                                    <thead>
                                                        <tr><th scope="col" class='text-warning'>MES</th><th scope="col" class='text-right text-warning'>TOTAL</th></tr>
                                                    </thead>
                                                    <tbody id='reporteventastable'></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- REPORTE PAGOS -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card card-default">
                                    <div class="card-header border-default fw-bold ">

                                        <div class="form-inline">
                                        <i class="fas fa-chart-pie"></i> <span class='ml-1 mr-3'>Pagos</span>
                                            <select id="yearPagos" class="form-control form-control-sm align-middle">
                                                <?php
                                                $fecha = date('Y');
                                                for ($i = 2021; $i <= $fecha; $i++) { ?>
                                                <option value="<?php echo $i; ?>" <?php echo ($i == $fecha) ? 'selected' : ''; ?>><?php echo $i; ?></option>
                                                <?php } ?>
                                            </select>
                                            <button class='btn btn-success btn-sm ml-2' onclick="actualizarGraficoPagosMesCliente()"><i class="fas fa-sync-alt"></i> Actualizar</button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-12 col-lg-6">
                                                <div class="chart">
                                                    <!-- Sales Chart Canvas -->
                                                    <canvas id="comparacionPagos" height="180" style="height: 250px;"></canvas>
                                                </div>
                                            </div>
                                            <div class="col-12 col-lg-6">
                                                <table class='table table-sm table-striped'>
                                                    <thead>
                                                        <tr><th scope="col" class='text-warning'>MES</th><th scope="col" class='text-right text-warning'>TOTAL</th></tr>
                                                    </thead>
                                                    <tbody id='reportepagostable'></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- MODAL ANOTACIONES -->

<div id="modal_anotaciones" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Anotaciones</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- SECCION PARA RECONOCIMIENTO DE VOZ -->
            <section>
                <div>
                    <!--<button id="botonInicioREC" alt="Iniciar grabaci�n" width="50" height="50"><i class="fa-solid fa-microphone"></i>Grabar</button>-->
                    <button id="botonInicioREC" class="btn btn-success mb-2 btn-toolbar-status" type="button" ><i class="fas fa-microphone"></i></button>
                    <button id="botonStopREC" class="btn btn-danger mb-2 btn-toolbar-status" type="button" ><i class="fas fa-microphone-slash"></i></button>                    
                </div>
            </section>

            <form id="formularioAnotaciones" class="needs-validation" novalidate autocomplete="off">
                
                <input type="hidden" id="id_cliente_anotaciones" name="id">

                <div class="modal-body" style='height:75vh;overflow-y:auto;'>

                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tcontacto-tab" data-toggle="tab" href="#tcontacto" role="tab" aria-controls="tcontacto" aria-selected="false"><i class="fas fa-id-card"></i> <span class='d-none d-lg-inline-block'>Contacto</span></a>
                            </li>
                        </ul>
                        
                        <!-- CAMPOS CONTACTO -->
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane pt-2 active" id="tcontacto" role="tabpanel" aria-labelledby="tcontacto-tab">

                                    <div class="form-group">
                                        <label for="observaciones">Observaciones</label>
                                        <textarea id="salida"                    class="form-control" name="salidaaudio" placeholder="Observaciones" rows="5"></textarea>
                                        <textarea id="observaciones_anotaciones" class="form-control" name="observaciones" placeholder="Observaciones" rows="5"></textarea>
                                        <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            Las observaciones es requeridas
                                        </div>
                                    </div>

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

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                        <p class="text-info">Todo los campos con * son requeridos.</p>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccionAnotaciones">Modificar</button>
                        <button class="btn btn-outline-danger"  type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

<!-- MODAL ANOTACIONES VISITA-->

<div id="modal_anotacionesVisita" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Anotaciones</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- SECCION PARA RECONOCIMIENTO DE VOZ -->
            <div class="container">
                <div class='row'>
                    <div class="col-12">
                    <!--<button id="botonInicioREC" alt="Iniciar grabaci�n" width="50" height="50"><i class="fa-solid fa-microphone"></i>Grabar</button>-->

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

            <form id="formularioAnotacionesVisita" class="needs-validation" novalidate autocomplete="off">
                
                <input type="hidden" id="id_cliente_anotacionesVisita" name="id">

                <div class="modal-body" style='height:75vh;overflow-y:auto;'>

                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="tcontacto-tab" data-toggle="tab" href="#tcontacto" role="tab" aria-controls="tcontacto" aria-selected="false"><i class="fas fa-id-card"></i> <span class='d-none d-lg-inline-block'>Contacto</span>

                                    <button id="botonInicioRECVisita" disabled class="btn btn-success btn-sm ml-3" type="button" ><i class="fas fa-microphone"></i></button>
                                </a>

                            </li>
                        </ul>
                        
                        <!-- CAMPOS CONTACTO -->
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane pt-2 active" id="tcontacto" role="tabpanel" aria-labelledby="tcontacto-tab">

                                    <div class="form-group">
                                        <label for="observaciones">Observaciones</label>
                                        <textarea id="salidaVisita" class="form-control" name="salidaaudio" placeholder="Observaciones" rows="5"></textarea>
                                    </div>
                            </div>
                        </div>
                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccionAnotacionesVisita">Modificar</button>
                        <button class="btn btn-outline-danger"  type="button" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- MODAL PROGRAMACION -->

<div id="modal_programacion" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xsm modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Programación</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="formularioProgramacion" novalidate autocomplete="off">
                
                <input type="hidden" id="id_programacion" name="id">
                <input type="hidden" id="codigo_cliente_programacion" name="codigo">
                <input type="hidden" id="nombre_cliente_programacion" name="nombre">
                <input type="hidden" id="vendedor_cliente_programacion" name="vendedor">
                <input type="hidden" id="row_programacion" name="row">

                <div class="modal-body" style='height:25vh;overflow-y:auto;'>

                                    <div class="form-group">
                                        <label for="fecha_programacion">Fecha Programacion Visita</label>
                                        <input type="date" class="form-control mb-2" id="fecha_programacion" name='fecha'>

                                        <label for="orden_programacion">Orden Programacion Visita</label>
                                        <select class="form-control" id="orden_programacion" name="orden">
                                                <option value="1" selected>1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option>
                                        </select>
                                    </div>
                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                        <p class="text-info">Todos los campos con * son requeridos.</p>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccionAnotaciones">Modificar</button>
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- MODAL COBRO -->
<div id="modal_cobro" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xsm modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Programación de Cobro</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="formularioCobro" novalidate autocomplete="off">
                
                <input type="hidden" id="id_cobro" name="id">
                <input type="hidden" id="codigo_cliente_cobro" name="codigo">
                <input type="hidden" id="nombre_cliente_cobro" name="nombre">
                <input type="hidden" id="vendedor_cliente_cobro" name="vendedor">
                <input type="hidden" id="row_cobro" name="row">

                <div class="modal-body" style='height:25vh;overflow-y:auto;'>

                                    <div class="form-group">
                                        <label for="fecha_cobro">Fecha Programacion de Cobro</label>
                                        <input type="date" class="form-control" id="fecha_cobro" name='fecha'>
                                        <!-- <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            La fecha es requerida
                                        </div> -->
                                    </div>
                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                        <p class="text-info">Todos los campos con * son requeridos.</p>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccionAnotaciones">Modificar</button>
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- MODAL LLAMADA -->

<div id="modal_llamada" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xsm modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Llamada</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="formularioLlamada" novalidate autocomplete="off">
                
                <input type="hidden" id="id_llamada" name="id">
                <input type="hidden" id="codigo_cliente_llamada" name="codigo">
                <input type="hidden" id="nombre_cliente_llamada" name="nombre">
                <input type="hidden" id="vendedor_cliente_llamada" name="vendedor">
                <input type="hidden" id="row_llamada" name="row">

                <div class="modal-body" style='height:25vh;overflow-y:auto;'>

                                    <div class="form-group">
                                        <label for="fecha_llamada">Fecha Programacion Visita</label>
                                        <input type="date" class="form-control" id="fecha_llamada" name='fecha'>
                                        <!-- <div class="valid-feedback">
                                            Correcto
                                        </div>
                                        <div class="invalid-feedback">
                                            La fecha es requerida
                                        </div> -->
                                    </div>
                </div>

                <div class="modal-footer justify-content-between">

                    <div class="text-left">
                        <p class="text-info">Todos los campos con * son requeridos.</p>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-outline-primary" type="submit" id="btnAccionAnotaciones">Modificar</button>
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- MODAL MAP -->

<div id="modal_map" class="modal faade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="title">Ubicación</h5>
                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

                <div class="modal-body" style='height:75vh;overflow-y:auto;'>
                    <div id="googleMap" style="width:100%;height:80%;"></div>

                    <p class="mt-3">
                        <strong>Datos Cliente:</strong> <span id="coordenadas_cliente"></span><br>
                        <strong>Ultima Visita Entrada:</strong> <span id="coordenadas_ultima_visita_entrada"></span><br>
                        <strong>Ultima Visita Salida:</strong> <span id="coordenadas_ultima_visita_salida"></span><br>
                        <strong>Observaciones:</strong> <span id="observaciones_visita"></span>
                    </p>
                </div>

                <div class="modal-footer justify-content-between">
                    <div class="text-left"></div>
                    <div class="text-right">
                        <button class="btn btn-outline-danger" type="button" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>

        </div>

    </div>s

</div>

<script>
    let vendedores_nombres={
        <?php foreach ($data['vendedores'] as $vendedor) { ?>
            '<?=$vendedor['codigo']?>':'<?=$vendedor['vendedor']?>',
        <?php } ?>
    }
</script>

<?php include "Views/templates/footer.php"; ?>