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

<!--
<button class="btn btn-primary mb-2" type="button" onclick="frmCliente();"><i class="fas fa-plus"></i></button>
<button class="btn btn-primary mb-2 btn-toolbar-status" disabled type="button" onclick="btnEditarCli(active_row);"><i class="fas fa-edit"></i></button>
<button class="btn btn-primary mb-2 btn-toolbar-status" disabled type="button" onclick="btnEditarCli(active_row);"><i class="fas fa-tools"></i></button>
<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"></i></button>
<button class="btn btn-success mb-2 btn-toolbar-status btn-recuperar" disabled type="button" onclick="btnReingresarCli(active_row);" style="display: none;"><i class="fas fa-toggle-on"></i></button>
<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>

<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>
<button class="btn btn-secondary mb-2 btn-toolbar-status" disabled type="button" onclick="btnProgramarCliActive();"><i class="far fa-calendar-alt"></i></button>
<button class="btn btn-secondary mb-2 btn-toolbar-status" disabled type="button" onclick="btnVisitarCli(active_row);"><i class="fas fa-map-marker"></i></button>
<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="btnReporteCli(active_row);"><i class="fas fa-chart-pie"></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>
-->


<div class="card shadow-lg">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped display responsive nowrap" id="t_cheq" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Cliente</th>
                        <th>Nombre</th>
                        <th>Fecha</th>
                        <th># Cheque</th>                                                
                        <th>Valor</th>                                                                        
                        <th>Banco</th>                      
                        <th>Estado</th>
                        <th>Vendedor</th>                        
                        <th>Ruta</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>

            <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="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 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_cliente_programacion" name="id">
                <input type="hidden" id="row_cliente_programacion" name="row">

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

                                    <div class="form-group">
                                        <label for="fecha_programacion">Fecha Programacion</label>
                                        <input type="date" class="form-control" id="fecha_programacion" 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:100%;"></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>

        </div>

    </div>

</div>


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