<!DOCTYPE html>

<html lang="es">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ventas</title>

    <!-- Bootstrap 5 CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- DataTables CSS -->

    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">

</head>


<style>       .modal-body {
    background-color: #fff7f7;
  
}
        body {
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 8px;
        }
        .legend-circle {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        .legend-box {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px;
        }
        .table-container {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>



<style>

    .preview-container {

        margin: 20px 0;

    }



    .preview-container img {

        max-width: 50%;

        height: 200px;

        display: block;

    }
    #ventasTable {
  font-size: 12.5px;
}

#vali {
    font-size: 12px; /* Tamaño del texto */
  padding: 4px 10px; /* Espaciado interno para que no se recorte */
  height: auto; /* Permite que el botón ajuste su tamaño */
  line-height: normal; /* Asegura que el texto no se desplace */
  display: inline-block; /* Evita comportamientos extraños en algunos navegadores */
  text-align: center; /* Centra el texto */
  vertical-align: middle; /* Asegura alineación vertical */
}
</style>



<body>



    <div class="container-fluid">

        <h1>Ventas</h1>
        <div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="m-0">📋 Listado de Registros</h4>
        <button id="toggleFilters" class="btn btn-secondary btn-sm">
            🔍 Mostrar / Ocultar Filtros
        </button>
    </div>

    <div class="row">
        <!-- Panel de Filtros -->
        <div class="col-md-3" id="filterPanel">
        <form id="filtroForm">
        <div class="sidebar">

<h5 class="mb-3">Filtros</h5>

<!-- Operador -->
<div class="mb-3">
    <label class="form-label">Operador</label>
    <select name="operador" class="form-select">
        <option value="">Todos</option>
        <option value="WIN">WIN</option>
        <option value="PERUFIBRA">PERUFIBRA</option>
    </select>
</div>

<!-- Tipo de rango -->
<div class="mb-3">
    <label class="form-label fw-bold">Filtrar por fecha</label>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="tipo_rango" value="registro" checked>
        <label class="form-check-label">Por Registro</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="tipo_rango" value="programacion">
        <label class="form-check-label">Por Programación</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="tipo_rango" value="instalacion">
        <label class="form-check-label">Por Instalación</label>
    </div>
</div>

<!-- Rango Registro -->
<div id="rango-registro" class="rango-fechas">
    <label class="form-label">Rango por Registro</label>
    <div class="row">
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_inicio" id="fecha_inicio"  class="form-control">
        </div>
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_fin" id="fecha_fin"  class="form-control">
        </div>
    </div>
</div>

<!-- Rango Programación -->
<div id="rango-programacion" class="rango-fechas">
    <label class="form-label">Rango por Programación</label>
    <div class="row">
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_inicio" class="form-control" disabled>
        </div>
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_fin" class="form-control" disabled>
        </div>
    </div>
</div>

<!-- Rango Instalación -->
<div id="rango-instalacion" class="rango-fechas">
    <label class="form-label">Rango por Instalación</label>
    <div class="row">
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_inicio" class="form-control" disabled>
        </div>
        <div class="col-md-6 mb-3">
            <input type="date" name="fecha_fin" class="form-control" disabled>
        </div>
    </div>
</div>

<!-- Estado -->
<div class="mb-3">
    <label class="form-label">Estado</label>
    <select name="estado" id="estado" class="form-select">
        <option value="">Todos</option>
        <option value="0">REGISTRADO</option>
        <option value="1">PENDIENTE</option>
        <option value="2">OBSERVADO</option>
        <option value="3">VALIDADO</option>
        <option value="4">CANCELADO</option>
        <option value="5">INSTALADO</option>
        <option value="6">PROGRAMADO</option>
        <option value="7">REPROGRAMADO</option>
    </select>
</div>

<!-- DNI -->
<div class="mb-3">
    <label class="form-label">DNI</label>
    <input type="text" name="dni" class="form-control">
</div>

<button type="submit" class="btn btn-primary w-100">
    Aplicar
</button>

</div>

            </form>
        </div>

        <!-- Contenido principal -->
        <div class="col-md-9" id="mainContent">
            <!-- Leyenda -->
            <div class="legend-box mb-3">
                <span class="legend-circle" style="background-color: red;"></span> Cancelado
                <span class="legend-circle" style="background-color: orange; margin-left: 15px;"></span> Observado
                <span class="legend-circle" style="background-color: green; margin-left: 15px;"></span> Instalado
            </div>

            <!-- Tabla -->
            <div class="table-container table-responsive">
            <table id="ventasTable" class="table  table-striped table-bordered table-sm " style="width:100%">

<thead class="text-center small">

    <tr>

        <!-- Aquí todas las columnas -->

        <th>ID</th>
        <th>F.Registro</th>
        <th>Operador</th>
        <th>Estado</th>
        <th>Obs.</th>
        <th>Plan</th>
        <th>F.Programada</th>
        <th>Tramo</th>
        <th>F.Instalacion</th>
       
        <th>Detalle</th>
        
      <!--   <th>Imagen Score</th>
-->             
        <th>T.Doc Cliente</th>
        <th>DNI Cliente</th>
        
        <th>CLiente</th>

        <th>Celular</th>
        <th>Validar</th>
        <th>DNI Asessor</th>
       


 <!--        <th>Imagen Delantera Documento</th>

        <th>Imagen Trasera Documento</th>

        -->







    </tr>

</thead>

<tbody class="text-center small">

    <?php $__currentLoopData = $ventas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $venta): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

        <tr>

            <td><?php echo e($venta->id); ?></td>
            <td><?php echo e($venta->fecharegistro); ?></td>
            <td><?php echo e($venta->operadorventa); ?></td>
            <td> <?php

                $estado = $venta->estado;

            ?>



                <?php switch($estado):

                    case (0): ?>

                        <span class="badge bg-secondary">GESTIONANDO</span>
                        <!-- <span class="legend-circle bg-secondary" ></span>  -->

                    <?php break; ?>



                    <?php case (1): ?>

                        <span class="badge bg-light text-dark">PENDIENTE</span>

                    <?php break; ?>



                    <?php case (2): ?>

                        <span class="badge bg-warning text-dark">OBSERVADO</span>

                    <?php break; ?>



                    <?php case (3): ?>

                        <span class="badge bg-primary">GRABACION</span>

                    <?php break; ?>



                    <?php case (4): ?>

                        <span class="badge bg-danger">CANCELADO</span>

                    <?php break; ?>



                    <?php case (5): ?>

                        <SPAN class="badge text-bg-success">INSTALADO</span>
                            
                    <?php break; ?>



                    <?php case (6): ?>

                        <span class="badge bg-dark">PROGRAMADO</span>

                    <?php break; ?>


                    <?php case (7): ?>

                        <span class="badge bg-dark">REPROGRAMADO</span>

                    <?php break; ?>

                    <?php default: ?>

                        <span class="badge bg-secondary">UNKNOWN</span>

                <?php endswitch; ?>

            </td>
     
            <td> <?php echo e($venta->notascalidad); ?>   </td>
            <td>
    <?php echo e($venta->oferta); ?> <?php echo e($venta->velocidad_mbps); ?>

    <?php if(!empty($venta->tv)): ?>
        + <?php echo e($venta->tv); ?>

    <?php endif; ?>
    <?php if($venta->dispofijo == 1): ?>
        + FIJO
    <?php endif; ?>
</td>
            <td> <?php echo e($venta->fechaprogramdawin); ?>   </td>
           
            <td> <?php echo e($venta->tramo); ?>   </td>
            <td> <?php echo e($venta->fechainstalacion); ?>   </td>

            <td>

                <a href="#" onclick="verDetalles(<?php echo e($venta->id); ?>)">

                    <i class="bi bi-search"></i>

                </a>

            </td>
         



            <td><?php echo e($venta->tipoDocumentoTitular); ?></td>
            <td><?php echo e($venta->documento); ?></td>
            <td><?php echo e($venta->nombres); ?> <?php echo e($venta->apellidos); ?></td>


           

          <td><?php echo e($venta->celular); ?></td>



<td>
<button class="btn btn-primary btn-thin" id="vali"onclick="actualizar_progra(<?php echo e($venta->id); ?>)">Validar</button>

</td>
            <td><?php echo e($venta->dnivendedor); ?></td>

           



   

        </tr>

    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

</tbody>

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

     

    </div>



    <!-- Modal Structure -->

    <div class="modal fade" id="ventaModal" tabindex="-1" aria-labelledby="ventaModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-fullscreen">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="ventaModalLabel">Detalles de la Venta</h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabTitular">
                    🧑 Datos del Contrante
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabDireccion">
                    📍 Dirección
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPlan">
                    📦 Plan
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabResumen">
                    ✅ Observación
                </button>
            </li>
        </ul>

                    <form id="formulario" enctype="multipart/form-data">

                <!-- ================== CONTENIDO ================== -->
                <div class="tab-content bg-white border rounded p-4">

                <!-- ================== TAB TITULAR ================== -->
                <div class="tab-pane fade show active" id="tabTitular">

                <div class="card-body">

<div class="row mb-3">

    

    <div class="col-md-4">

        <label for="dnivendedor">DNI Vendedor</label>

        <input disabled type="text" class="form-control solo-numeros" maxlength="8"

            id="dnivendedor" name="dnivendedor" placeholder="Ingrese DNI">

    </div>

</div>

<div class="row mb-3">

    <div class="col-md-3">

        <label for="nombres">Nombres</label>

        <input disabled type="text" class="form-control" id="nombres"

            name="nombres" placeholder="Ingrese sus nombres">

    </div>

    <div class="col-md-3">

        <label for="apellidos">Apellidos</label>

        <input disabled type="text" class="form-control" id="apellidos"

            name="apellidos" placeholder="Ingrese sus apellidos">

    </div>

    <div class="col-md-3">

        <label for="tipoDocumento">Tipo de Documento</label>

        <select disabled class="form-control" id="tipoDocumento" name="tipoDocumento">



            <option value="DNI">DNI</option>

            <option value="PASAPARTE">PASAPARTE</option>

            <option value="CARNET DE EXTRANJERIA">CARNET DE EXTRANJERIA</option>

            <option value="RUC">RUC</option>



        </select>

    </div>

    <div class="col-md-3">

        <label for="documento">Documento</label>

        <input disabled type="text" class="form-control solo-numeros" maxlength="8"

            id="documento" name="documento" placeholder="Ingrese su documento">

    </div>

</div>

<div class="row mb-3">

    <div class="col-md-6">

        <label for="imagenDelanteraDocumento">Imagen Delantera Documento

            Identidad</label>



        <div class="preview-container">

            <img id="previewDelantera" src=""

                alt="Vista previa de la Imagen Delantera del Documento"

                style="display: none;">

        </div>

    </div>

    <div class="col-md-6">

        <label for="imagenTraseraDocumento">Imagen Trasera Documento Identidad</label>





        <div class="preview-container">

            <img id="previewTrasera" src=""

                alt="Vista previa de la Imagen Trasera del Documento"

                style="display: none;">

        </div>

    </div>

</div>

<div class="row mb-3">

    <div class="col-md-4">

        <label for="celular">Celular Contacto</label>

        <input disabled type="text" class="form-control solo-numeros"

            maxlength="9" id="celular" name="celular"

            placeholder="Ingrese su celular">

    </div>

    <div class="col-md-4">

        <label for="whatsapp">Whatsapp Contacto</label>

        <input disabled type="text" class="form-control solo-numeros"

            maxlength="9" id="whatsapp" name="whatsapp"

            placeholder="Ingrese su Whatsapp">

    </div>

    <div class="col-md-4">

        <label for="correo">Correo</label>

        <input disabled type="email" class="form-control" id="correo"

            name="correo" placeholder="Ingrese su correo">

    </div>

</div>

<div class="mb-3">
                            <label>TITULAR DE LA LINEA MOVIL</label>
                            
                        </div>
<div class="row mb-3" id="bloqueTitular">
                        <div class="col-md-3">

<label for="nombresTitularLinea">NOMBRES </label>

<input disabled="" type="text" class="form-control" id="nombresTitularLinea" name="nombresTitularLinea" placeholder="Ingrese los nombres del titular de la línea">

</div>

<div class="col-md-3">

<label for="nombresTitularLinea">APELLIDOS </label>

<input disabled="" type="text" class="form-control" id="apellidosTitularLinea" name="apellidosTitularLinea" placeholder="Ingrese los nombres del titular de la línea">

</div>

<div class="col-md-3">

<label for="tipoDocumentoTitular">Tipo de Documento</label>

<select disabled="" class="form-control" id="tipoDocumentoTitular" name="tipoDocumentoTitular">


    <option value=""></option>
    <option value="DNI">DNI</option>

    <option value="PASAPARTE">PASAPARTE</option>

    <option value="CARNET DE EXTRANJERIA">CARNET DE EXTRANJERIA</option>

    <option value="RUC">RUC</option>



</select>

</div>

<div class="col-md-3">

<label for="documentoTitular">Documento</label>

<input disabled="" type="text" class="form-control" id="documentoTitular" name="documentoTitular" placeholder="Ingrese el documento">

</div>  <!-- Tu bloque OTRO TITULAR va aquí tal cual -->
                        </div>

</div>


                </div>

                <!-- ================== OTROS TABS ================== -->
                <div class="tab-pane fade" id="tabDireccion">


                <div class="card-body">

                <div class="row mb-3">

                    <div class="col-md-4">

                        <label for="departamento">Departamento</label>





                        <input type="text" disabled class="form-control " id="departamento"

                            name="departamento">

                           

                      

                    </div>

                    <div class="col-md-4">

                        <label for="provincia">Provincia</label>





                        <input type="text"  disabled class="form-control" id="provincia" name="provincia">


                       

                    </div>

                    <div class="col-md-4">

                        <label for="distrito">Distrito</label>





                        <input type="text" disabled class="form-control" id="distrito" name="distrito">

                        

                      

                    </div>

                </div>

                <div class="row mb-3">



                    <div class="col-md-7">

                        <label for="direccion">Dirección</label>

                        <input disabled type="text" class="form-control" id="direccion"

                            name="direccion" placeholder="Ingrese su dirección">

                    </div>

                    <div class="col-md-1">

                        <label for="piso">Piso</label>

                        <select disabled class="form-control" id="piso" name="piso">

                            <option value="1">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>

                        </select>
                  
                    </div>
                    <div class="col-md-1">
                        <label for="interior">Interior</label>

<input disabled type="text" class="form-control" id="interior"

    name="interior" placeholder="Ingrese las coordenadas">
                    </div>
                    <div class="col-md-3">

                        <label for="casa">Tipo de Domicilio</label>

                        <select disabled class="form-control" id="tcasa" name="tcasa">





                            <option value="CASA">CASA</option>

                            <option value="DEPARTAMENTO">DEPARTAMENTO</option>

                            <option value="EDIFICIO">EDIFICIO</option>

                            <option value="CONDOMINIO">CONDOMINIO</option>



                        </select>

                    </div>

                </div>

                <div class="row mb-3">

                    <div class="col-md-4">

                        <label for="referencia">Referencia</label>

                        <input disabled type="text" class="form-control" id="referencia"

                            name="referencia" placeholder="Ingrese una referencia">

                    </div>

                    <div class="col-md-4">

                        <label for="coordenadas">Coordenadas</label>

                        <input disabled type="text" class="form-control" id="coordenadas"

                            name="coordenadas" placeholder="Ingrese las coordenadas">

                    </div>

                    <div class="col-md-4">

                        <label for="relacionPredio">Relación con el Predio</label>

                        <select disabled class="form-control" id="relacionPredio"

                            name="relacionPredio">





                            <option value="PROPIETARIO">PROPIETARIO</option>

                            <option value="INQUILINO">INQUILINO</option>

                            <option value="OTRO">OTRO</option>

                        </select>

                    </div>

                </div>

                </div>

                </div>

                <div class="tab-pane fade" id="tabPlan">
                <div class="card-body">

<div class="row mb-3">


<div class="col-md-3">
                                <label for="tipo" class="form-label">Oferta</label>
                                <select id="tipo" name="tipo" class="form-control">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="velocidad" class="form-label">Velocidad</label>
                                <select id="velocidad" name="velocidad" class="form-control"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="tv" class="form-label">TV</label>
                                <select id="tv" name="tv" class="form-control">
                                    <option value="">-- Sin TV --</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="fijo" class="form-label">Fijo</label>
                                <select id="fijo" name="fijo" class="form-control">
                                    <option value="">-- Sin Fijo --</option>
                                    <option value="SI">SI</option>
                                </select>
                            </div>


    </div>



    <div class="col-md-3">

        <label for="parentesco">Plan Contratado</label>

        <select disabled class="form-control" id="plancontrato" name="plancontrato">



        </select>

    </div>

    <div class="col-md-3">

        <label for="operador">Cuotas instalación</label>

        <select disabled class="form-control" id="cuota" name="cuota">

            <option value="GRATIS">GRATIS</option>

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="2">3</option>



        </select>

    </div>

    <div class="col-md-3">

        <label for="operador">Cantidad de Mesh</label>

        <select disabled class="form-control" id="canmesh" name="canmesh">

            <option>0</option>

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>



        </select>

    </div>

</div>

<div class="row mb-3">

    <div class="col-md-3">

        <label for="operador"> Mesh Cableado</label>

        <select disabled class="form-control" id="mecableado" name="mecableado">

            <option value="NO">NO</option>

            <option value="SI">SI</option>





        </select>

    </div>

    <div class="col-md-3">

        <label for="operador"> Winbox</label>

        <select disabled class="form-control" id="winbo" name="winbo">

            <option value="NO">NO</option>

            <option value="SI">SI</option>





        </select>

    </div>

    <div class="col-md-3">

        <label for="nombresTitularLinea">Numero a portar Fijo</label>

        <input disabled type="text" class="form-control" id="portatnumeot"

            name="portatnumeot"

            placeholder="Ingrese los nombres del titular de la línea">

    </div>





</div>

</div>

                </div>


                <div class="tab-pane fade" id="tabResumen">
                <div class="card-body">
                <div class="card-body">
                        <div class="row mb-3">

                            <div class="col-md-6">

                                <label for="observacion">Fecha de instalacion propuesta x clientr</label>

                                <input type="date" disabled name="fechacliente" id="fechacliente" class="form-control">
                                

                            </div>

                            <div class="col-md-6">

                                <label for="observacion">Horario de instalacion propuesta x clientr</label>
                                <input type="input" disabled name="freamoxcliente" id="freamoxcliente" class="form-control">


                

                            </div>

                        </div>

                        <div class="row mb-3">

                            <div class="col-md-12">

                                <label for="observacion">Observación</label>

                                <textarea disabled class="form-control" id="observacion" name="observacion" rows="3" placeholder="Ingrese alguna observación"></textarea>

                            </div>

                        </div>



                        <button type="button" id="enviarFormulario" class="btn btn-primary">Enviar</button>

                    </div>

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




                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

                </div>

            </div>

        </div>

    </div>


  <!-- Modal -->
  <div class="modal fade" id="programModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Programar Instalación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <?php echo csrf_field(); ?>
                    <!-- Fecha de Programación -->
                    <div class="mb-3">
                        <input type="hidden" class="form-control" id="idval">
                        <label for="fechaProgramacion" class="form-label">Fecha de Programación</label>
                        <input type="date" class="form-control" id="fechaProgramacion">
                    </div>

                    <!-- Fecha de Instalación -->
                    <div class="mb-3">
                        <label for="fechaInstalacion" class="form-label">Fecha de Instalación</label>
                        <input type="date" class="form-control" id="fechaInstalacion">
                    </div>

                    <!-- Select Status -->
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status">
                            <option value="ss">Seleccionar estado</option>
                            <option value="0">REGISTRADO</option>
                            <option value="1">PENDIENTE</option>
                            <option value="2">OBSERVADO</option>
                            <option value="3">VALIDADO</option>
                            <option value="4">CANCELADO</option>
                            <option value="5">INSTALADO</option>
                            <option value="6">PROGRAMADO</option>
                            <option value="7">REPROGRAMADO</option>
                            
                            
                        </select>
                    </div>

                    <!-- Select Tramo -->
                    <div class="mb-3">
                        <label for="tramo" class="form-label">Tramo</label>
                        <select class="form-select" id="tramo">
                            <option >Seleccionar tramo</option>
                            <option value="Tramo 1 (8 AM - 12 PM)">Tramo 1 (8 AM - 12 PM)</option>
                            <option value="Tramo 2 (12 PM - 4 PM)">Tramo 2 (12 PM - 4 PM)</option>
                            <option value="Tramo 3 (4 PM - 8 PM)">Tramo 3 (4 PM - 8 PM)</option>
                        </select>
                    </div>

                           <!-- Select operador -->
                           <div class="mb-3">
                            <label for="tramo" class="form-label">Operador</label>
                            <select class="form-select" id="operasor">
                                <option >Seleccionar Operador</option>
                                <option value="WIN">WIN</option>
                                <option value="PERUFIBRA">PERUFIBRA</option>
                            </select>
                        </div>
                              <!-- Select bservacion -->
                              <div class="mb-3">
                                <label for="tramo" class="form-label">Observacion</label>
                                <textarea class="form-control" id="notascalidad" rows="5"></textarea>

                            </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button"  onclick="actualizarRegistro()" class="btn btn-primary">Guardar</button>
            </div>
        </div>
    </div>
</div>



    <!-- jQuery -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"

        integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="

        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Bootstrap 5 JS -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables JS -->

    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>


  

    <script>
    $("#toggleFilters").click(function(){
        $("#filterPanel").slideToggle(300, function(){
            if ($(this).is(":visible")) {
                $("#mainContent").removeClass("col-md-12").addClass("col-md-9");
            } else {
                $("#mainContent").removeClass("col-md-9").addClass("col-md-12");
            }
        });
    });
</script>

    <script>

        $(document).ready(function() {

         

            $('#ventasTable').dataTable({
    paging: false,
    autoWidth: false,


});







            //////////////////SELECT PLAN CONTRATADO

            $('#plancliente').on('change', function() {

                var filtro = $(this).val();

                $.get("<?php echo e(url('selectplanclienteid')); ?>", {

                    filtro: filtro



                }, function(data) {

                    $('#plancontrato').empty();

                    // Agregar la opción "Seleccione"

                    $('#plancontrato').append('<option value=""></option>');



                    $.each(data, function(index, item) {

                        $("#plancontrato").append('<option value="' + item.id + '">' + item

                            .nombre +

                            '</option>');

                    });

                    // Ejecuta un callback después de que las opciones se hayan cargado

                    if (typeof afterLoad === 'function') {

                        afterLoad();

                    }

                });

            });

        });

        //////////////

    </script>

    

    <script>

        function verDetalles(id) {

            $.get("<?php echo e(url('crm/winro/selectvemtawinid')); ?>", {

                id: id

            }, function(data) {


                var detalles = data[0]; // Accedemos al primer objeto del array

                //datos del cliente



                $('#dnivendedor').val(detalles.dnivendedor);

                $('#documento').val(detalles.documento);

                $('#nombres').val(detalles.nombres);

                $('#apellidos').val(detalles.apellidos);

                $('#tipoDocumento').val(detalles.tipoDocumento).trigger('change');

                $('#celular').val(detalles.celular);

                $('#whatsapp').val(detalles.whatsapp);

                $('#correo').val(detalles.correo);



                //datos dureccion

                $('#departamento').val(detalles.departamento1);

                $('#provincia').val(detalles.provincia1);

                $('#distrito').val(detalles.distrito1);

                $('#direccion').val(detalles.direccion);



                $('#piso').val(detalles.piso).trigger('change');

                $('#tcasa').val(detalles.tdomi).trigger('change');

                $('#referencia').val(detalles.referencia);

                $('#coordenadas').val(detalles.coordenadas);
                $('#interior').val(detalles.interior);
                
                $('#relacionPredio').val(detalles.relacionPredio).trigger('change');





                //  



                //datos del producto





                $('#plancliente').val(detalles.tiposervicio).trigger('change');



                $("#plancontrato option:selected").val(detalles.plan_contra);

                /* setTimeout(function() {

                    $('#plancontrato').val(detalles.plan_contra).trigger('change');

                }, 1800); // Ajusta el tiempo si es necesario

                 */



                // Define un callback para seleccionar el valor

                window.afterLoad = function() {

                    $('#plancontrato').val(detalles.plan_contra).trigger('change');

                };

                $('#cuota').val(detalles.couta).trigger('change');

                $('#canmesh').val(detalles.canmesh).trigger('change');

                $('#meshcableado').val(detalles.meshcableado).trigger('change');

                $('#winbox').val(detalles.winbox).trigger('change');



                




                //







                //datos del titular

                $('#nombresTitularLinea').val(detalles.nombresTitularLinea);

                $('#apellidosTitularLinea').val(detalles.apellidosTitularLinea);

                $('#tipoDocumentoTitular').val(detalles.tipoDocumentoTitular).trigger('change');

                $('#documentoTitular').val(detalles.documentoTitular);

                $('#parentesco').val(detalles.parentesco).trigger('change');

                $('#operador').val(detalles.operador).trigger('change');

                $('#observacion').val(detalles.observacion);
                $('#fechacliente').val(detalles.finstalacionasesor);
                $('#freamoxcliente').val(detalles.tramoasesor);
                $('#portatnumeot').val(detalles.numeroaportar);

                

                //

                // Construir la URL de la imagen



                var imageUrl1 = "<?php echo e(url('/download')); ?>/" + encodeURIComponent(detalles.imagenScore);

                var imageUrl2 = "<?php echo e(url('/download')); ?>/" + encodeURIComponent(detalles.imagenDelanteraDocumento);

                var imageUrl3 = "<?php echo e(url('/download')); ?>/" + encodeURIComponent(detalles.imagenTraseraDocumento);

                // Actualizar la vista previa de la imagen

                $('#previewScore').attr('src', imageUrl1).show();

                $('#previewDelantera').attr('src', imageUrl2).show();

                $('#previewTrasera').attr('src', imageUrl3).show();





                // Mostrar el modal

                var myModal = new bootstrap.Modal(document.getElementById('ventaModal'), {

                    keyboard: false

                });

                myModal.show();









                //$('#tipoDocumento').find(":selected").val(detalles.tipoDocumento);

                //$('#tipoDocumento option:selected').val(detalles.tipoDocumento);



                //var dato = (detalles.tipoDocumento);

                // $("#tipoDocumento option[value='" + dato + "']").attr('selected', 'selected');



                // var dato = detalles.tipoDocumento;

                // $("#tipoDocumento").val(dato).change();

                //$("#tipoDocumento :selected").val(dato);

                // Primero deseleccionamos cualquier opción seleccionada

                // $('#tipoDocumento option').prop('selected', false);



                // Luego seleccionamos la opción que coincide con el valor

                // $('#plancontrato').val(detalles.plan_contra).trigger('change');

                // Aseguramos que `plancliente` se procese antes de seleccionar `plancontrato`



                //alert(detalles.plan_contra);

                //  $('#plancontrato').val(detalles.plan_contra).trigger('change');

                //$("#cbxtip_docup option[value='" + detalles.plan_contra + "']").attr('selected', 'selected');



            });

        }

    </script>



<script>

    function actualizar_progra(id) {

        $.get("<?php echo e(url('crm/winro/selectvemtawinid')); ?>", {id: id

        }, function(data) {



            var detalles = data[0]; // Accedemos al primer objeto del array

            //datos del cliente

            $('#idval').val(id);

            $('#fechaProgramacion').val(detalles.fechaprogramdawin);

            $('#fechaInstalacion').val(detalles.fechainstalacion);
            $('#notascalidad').val(detalles.notascalidad);
            
   
          $('#status').val(detalles.estado).trigger('change');

         $('#tramo').val(detalles.tramo).trigger('change');
           /// $("#tramo option:selected").val(detalles.tramo);

           $('#operasor').val(detalles.operadorventa).trigger('change');
           

            // Mostrar el modal

            var myModal = new bootstrap.Modal(document.getElementById('programModal'), {

                keyboard: false

            });

            myModal.show();





        });

    }

</script>
<script>
    function actualizarRegistro() {
        let id = $("#idval").val();
        let fechaProgramacion = $("#fechaProgramacion").val();
        let fechaInstalacion = $("#fechaInstalacion").val();
        let status = $("#status").val();
        let tramo = $("#tramo").val();
        let operasor = $("#operasor").val();
        let notascalidad = $("#notascalidad").val();
        
        let token = $("input[name=_token]").val();
     
 ;       $.ajax({
            url: "<?php echo e(url('crm/winro/actualizar')); ?>/" + id,
            type: "PUT",
            data: {
                _token: token,
                fechaProgramacion: fechaProgramacion,
                fechaInstalacion: fechaInstalacion,
                tramo: tramo,
                status: status,
                operasor: operasor,
                notascalidad: notascalidad,

                
            },
            success: function (response) {
             //   $("#mensaje").html(`<div class="alert alert-success">${response.message}</div>`);
             location.reload() ;           },
            error: function (xhr) {
                $("#mensaje").html(`<div class="alert alert-danger">Error al actualizar</div>`);
            }
        });
    }
</script>
<script>
function mifiltro(){
   
    let fecha_inicio = $("#fecha_inicio").val();
    let fecha_final = $("#fecha_final").val();

   var tipofecha=  $("input[name='tipo_fecha']:checked").val();
   var tioperador=  $("input[name='tipo_win']:checked").val();
   let token = $("input[name=_token]").val();
   $.ajax({
    url:" <?php echo e('filtrod'); ?>",
    method: 'post',
    data: {
        _token: token,

        fecha_inicio: fecha_inicio,
        fecha_final: fecha_final,
        tipofecha: tipofecha,
        tioperador: tioperador,
        
    },
    success: function(response) {
        // Manejar la respuesta
    }
});

}

</script>


<!-- <script>
$(document).ready(function() {
    $(document).ready(function() {
            // Obtener la fecha de hoy en formato YYYY-MM-DD
    const hoy = new Date().toISOString().split('T')[0];

    // Asignar la fecha a los campos
    document.getElementById('fecha_inicio').value = hoy;
    document.getElementById('fecha_fin').value = hoy;
    $("#filtroForm").on("submit", function(e) {
        e.preventDefault();
        var tabla = $('#ventasTable').DataTable();

        $.ajax({
            url: "<?php echo e(route('winventas.filtrar')); ?>",
            type: "POST",
            data: $(this).serialize(),
            headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
            success: function(data) {
                tabla.clear(); // Limpiar datos de DataTables

                if (data.length === 0) {
                    tabla.draw(); // Dibujar tabla vacía
                    return;
                }

                $.each(data, function(index, v) {
                    // Construir el plan
                    let plan = `${v.oferta ?? ''} ${v.velocidad_mbps ?? ''}+' '+MBPS`;
                    if (v.tv) plan += ` + ${v.tv}`;
                    if (v.dispofijo) plan += ` + ${v.dispofijo}`;

                    // Badge según estado
                    let estadoBadge = '';
                    switch (parseInt(v.estado)) {
                        case 0: estadoBadge = '<span class="badge bg-secondary">GESTIONANDO</span>'; break;
                        case 1: estadoBadge = '<span class="badge bg-light text-dark">PENDIENTE</span>'; break;
                        case 2: estadoBadge = '<span class="badge bg-warning text-dark">OBSERVADO</span>'; break;
                        case 3: estadoBadge = '<span class="badge bg-primary">GRABACION</span>'; break;
                        case 4: estadoBadge = '<span class="badge bg-danger">CANCELADO</span>'; break;
                        case 5: estadoBadge = '<span class="badge text-bg-success">INSTALADO</span>'; break;
                        case 6: estadoBadge = '<span class="badge bg-dark">PROGRAMADO</span>'; break;
                        case 7: estadoBadge = '<span class="badge bg-dark">REPROGRAMADO</span>'; break;
                        default: estadoBadge = '<span class="badge bg-secondary">UNKNOWN</span>';
                    }

                    // Añadir fila usando DataTables API
                    tabla.row.add([
                        v.id,
                        v.fecharegistro,
                        v.operadorventa,
                        estadoBadge,
                        v.notascalidad ?? '',
                        `${plan} `,
                        v.fechaprogramdawin ?? '',
                        v.tramo ?? '',
                        v.fechainstalacion ?? '',
                        `<a href="#" onclick="verDetalles(${v.id})"><i class="bi bi-search"></i></a>`,
                        v.tipoDocumentoTitular ?? '',
                        v.documento ?? '',
                        `${v.nombres ?? ''} ${v.apellidos ?? ''}`,
                        v.celular ?? '',
                        `<button class="btn btn-primary btn-thin" id="vali" onclick="actualizar_progra(${v.id})">Validar</button>`,
                        v.dnivendedor ?? ''
                    ]);
                });

                tabla.draw(); // Actualizar tabla con nuevos datos
            },
            error: function(xhr) {
                console.error(xhr.responseText);
            }
        });
    });
});
});
</script> -->

<script>
$(document).ready(function () {

    // 📅 Fecha de hoy por defecto
    const hoy = new Date().toISOString().split('T')[0];

    $('input[type="date"]').val(hoy);

    // 🔄 Manejo de radios (tipo de rango)
    $('input[name="tipo_rango"]').on('change', function () {

        let tipo = $(this).val();

        // Deshabilitar todos los rangos
        $('.rango-fechas input').prop('disabled', true).val('');

        // Deshabilitar estado por defecto
        $('#estado').prop('disabled', true).val('');

        if (tipo === 'registro') {
            $('#rango-registro input').prop('disabled', false).val(hoy);
            $('#estado').prop('disabled', false);
        }

        if (tipo === 'programacion') {
            $('#rango-programacion input').prop('disabled', false).val(hoy);
        }

        if (tipo === 'instalacion') {
            $('#rango-instalacion input').prop('disabled', false).val(hoy);
        }
    });

    // 🔥 Estado inicial
    $('input[name="tipo_rango"][value="registro"]').trigger('change');

    // 📡 Submit filtro
    $("#filtroForm").on("submit", function (e) {
        e.preventDefault();

        let tabla = $('#ventasTable').DataTable();

        $.ajax({
            url: "<?php echo e(route('winventas.filtrar')); ?>",
            type: "POST",
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            success: function (data) {

                tabla.clear();

                if (data.length === 0) {
                    tabla.draw();
                    return;
                }

                $.each(data, function (index, v) {

                    let plan = `${v.oferta ?? ''} ${v.velocidad_mbps ?? ''} MBPS`;
                    if (v.tv) plan += ` + ${v.tv}`;
                    if (v.dispofijo) plan += ` + ${v.dispofijo}`;

                    let estadoBadge = '';
                    switch (parseInt(v.estado)) {
                        case 0: estadoBadge = '<span class="badge bg-secondary">GESTIONANDO</span>'; break;
                        case 1: estadoBadge = '<span class="badge bg-light text-dark">PENDIENTE</span>'; break;
                        case 2: estadoBadge = '<span class="badge bg-warning text-dark">OBSERVADO</span>'; break;
                        case 3: estadoBadge = '<span class="badge bg-primary">GRABACION</span>'; break;
                        case 4: estadoBadge = '<span class="badge bg-danger">CANCELADO</span>'; break;
                        case 5: estadoBadge = '<span class="badge text-bg-success">INSTALADO</span>'; break;
                        case 6: estadoBadge = '<span class="badge bg-dark">PROGRAMADO</span>'; break;
                        case 7: estadoBadge = '<span class="badge bg-dark">REPROGRAMADO</span>'; break;
                        default: estadoBadge = '<span class="badge bg-secondary">UNKNOWN</span>';
                    }

                    tabla.row.add([
                        v.id,
                        v.fecharegistro ?? '',
                        v.operadorventa ?? '',
                        estadoBadge,
                        v.notascalidad ?? '',
                        plan,
                        v.fechaprogramdawin ?? '',
                        v.tramo ?? '',
                        v.fechainstalacion ?? '',
                        `<a href="#" onclick="verDetalles(${v.id})"><i class="bi bi-search"></i></a>`,
                        v.tipoDocumentoTitular ?? '',
                        v.documento ?? '',
                        `${v.nombres ?? ''} ${v.apellidos ?? ''}`,
                        v.celular ?? '',
                        `<button class="btn btn-primary btn-thin" onclick="actualizar_progra(${v.id})">Validar</button>`,
                        v.dnivendedor ?? ''
                    ]);
                });

                tabla.draw();
            },
            error: function (xhr) {
                console.error(xhr.responseText);
            }
        });
    });

});
</script>



<script>
$(document).ready(function () {

    function resetFechas() {
        $('.rango-fechas input').prop('disabled', true);
    }

    function estadoHabilitado(valor) {
        if (valor === 'registro') {
            $('#estado').prop('disabled', false);
        } else {
            $('#estado').prop('disabled', true).val('');
        }
    }

    $('input[name="tipo_rango"]').on('change', function () {
        let tipo = $(this).val();

        resetFechas();
        estadoHabilitado(tipo);

        if (tipo === 'registro') {
            $('#rango-registro input').prop('disabled', false);
        }

        if (tipo === 'programacion') {
            $('#rango-programacion input').prop('disabled', false);
        }

        if (tipo === 'instalacion') {
            $('#rango-instalacion input').prop('disabled', false);
        }
    });

    // estado inicial
    resetFechas();
    $('#rango-registro input').prop('disabled', false);
});
</script>

</body>



</html>

<?php /**PATH C:\xampp\htdocs\example-app - copia\resources\views/winventas/winventas_view.blade.php ENDPATH**/ ?>