<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Formulario Ventas</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-bootstrap-5@1.0.0/dist/chosen-bootstrap-5.min.css">




    <style>
        .chosen-container-single .chosen-single {
            height: 38px;
            padding: 6px 12px;
            border: 1px solid #ced4da;
            border-radius: .375rem;
            background: #fff;
            display: flex;
            align-items: center;
        }

        .chosen-container-single .chosen-single div b {
            background-position-y: 8px;
        }

        .chosen-container-active .chosen-single {
            border-color: #86b7fe;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        }

        .preview-container img {
            max-width: 150px;
            margin-top: 10px;
            border-radius: 6px;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body class="bg-light">

    <div class="container mt-4">
    <img src="https://perufibra.pe/img/logo.png"
     alt=""
     class="d-inline-block logo_header"
     style="background-color: red;"
     width="100"
     >        <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-3">
                                <label>Nombres</label>
                                <input type="hidden" id="operadorventa" name="operadorventa" value="PERUFIBRA">
                                <input type="text" class="form-control" id="nombres" name="nombres">
                            </div>

                            <div class="col-md-3">
                                <label>Apellidos</label>
                                <input type="text" class="form-control" id="apellidos" name="apellidos">
                            </div>

                            <div class="col-md-3">
                                <label>Tipo Documento</label>
                                <select class="form-control" id="tipoDocumento" name="tipoDocumento">
                                    <option disabled selected>--Seleccione--</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>Documento</label>
                                <input type="text" class="form-control solo-numeros" maxlength="8" id="documento"
                                    name="documento">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>Imagen Delantera Documento</label>
                                <input type="file" class="form-control-file" id="imagenDelanteraDocumento"
                                    name="imagenDelanteraDocumento" onchange="previewImage(event,'previewDelantera')">
                                <div class="preview-container">
                                    <img id="previewDelantera" style="display:none;">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label>Imagen Trasera Documento</label>
                                <input type="file" class="form-control-file" id="imagenTraseraDocumento"
                                    name="imagenTraseraDocumento" onchange="previewImage(event,'previewTrasera')">
                                <div class="preview-container">
                                    <img id="previewTrasera" style="display:none;">
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Celular</label>
                                <input type="text" class="form-control solo-numeros" maxlength="9" id="celular"
                                    name="celular">
                            </div>
                            <div class="col-md-4">
                                <label>Whatsapp</label>
                                <input type="text" class="form-control solo-numeros" maxlength="9" id="whatsapp"
                                    name="whatsapp">
                            </div>
                            <div class="col-md-4">
                                <label>Correo</label>
                                <input type="email" class="form-control" id="correo" name="correo">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label><input type="radio" name="tipoTitular" value="MISMO"> MISMO TITULAR</label>
                            <label class="ms-3"><input type="radio" name="tipoTitular" value="OTRO"> OTRO</label>
                        </div>

                        <div class="row mb-3" id="bloqueTitular">
                            <!-- 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>





                                <select class="form-control selectpicker chosen-select" id="departamento"
                                    name="departamento">

                                    <option disabled value="0" selected>--Seleccione--</option>


                                </select>

                            </div>

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

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





                                <select class="form-control chosen-select" id="provincia" name="provincia">

                                    <option disabled value="0" selected>--Seleccione--</option>


                                </select>

                            </div>

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

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





                                <select class="form-control chosen-select" id="distrito" name="distrito">

                                    <option disabled value="0" selected>--Seleccione--</option>




                                </select>

                            </div>

                        </div>

                        <div class="row mb-3">



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

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

                                <input type="text" class="form-control " id="direccion" name="direccion"
                                    placeholder="Ingrese su dirección">

                            </div>

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

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

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

                                    <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>


                                </select>

                            </div>

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

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

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

                                    <option disabled value="0" selected>--Seleccione--</option>



                                    <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 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 type="text" class="form-control" id="coordenadas" name="coordenadas"
                                    placeholder="Ingrese las coordenadas">

                            </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="tipoDocumentoTitular">Tipo de Plan Contrato</label>

        <select class="form-control" id="plancliente" name="plancliente">

            <option disabled value="0" selected>--Seleccione--</option>



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

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

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

            <option value="4">GAMER</option>

            <option value="5">RUC20</option>

        </select>

    </div>

-->

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

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

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

            <option disabled value="0" selected>--Seleccione--</option>



        </select>

    </div> -->
                            <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>
                                    <option value="6">INTERNET</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>

                        <div class="row mb-3">

           

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

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

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

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





                                </select>

                            </div>


                         




                        </div>

                    </div>
                </div>
                <div class="tab-pane fade" id="tabResumen">
                    <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" name="fechacliente" id="fechacliente" class="form-control">
                                

                            </div>

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

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


                                <select class="form-control chosen-select" id="freamoxcliente" name="freamoxcliente">

                                    <option disabled value="0" selected>--Seleccione--</option>
                                    <option value="8am-12pm--tramo1">8am-12pm--tramo1</option>
                                    <option value="12pm-04pm--tramo2">12pm-04pm--tramo2</option>
                                    <option value="04pm-08pm--tramo3">04pm-08pm--tramo3</option>
                                </select>

                            </div>

                        </div>

                        <div class="row mb-3">

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

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

                                <textarea 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>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

    <script>
        function previewImage(event, previewId) {
            const img = document.getElementById(previewId);
            img.src = URL.createObjectURL(event.target.files[0]);
            img.style.display = 'block';
        }
    </script>

</body>

</html>

<script>

    $(document).ready(function () {



        // Configurar el token CSRF para todas las solicitudes AJAX

        $.ajaxSetup({

            headers: {

                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            }

        });

        $('input').on('input', function () {

            // Convierte el valor de todos los campos input a mayúsculas

            $(this).val($(this).val().toUpperCase());

        });



        $('.solo-numeros').on('input', function () {

            // Reemplaza cualquier carácter que no sea un número con una cadena vacía

            $(this).val($(this).val().replace(/[^0-9]/g, ''));

        });



        $('#enviarFormulario').on('click', function () {

            var formData = new FormData($('#formulario')[0]);

            formData.append('formulario', '1');

            // Crear y añadir el spinner de Bootstrap

            $('body').append(

                '<div id="spinnerCargando" class="position-fixed w-100 h-100 d-flex justify-content-center align-items-center" style="background-color: rgba(255, 255, 255, 0.7); z-index: 1050;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Cargando...</span></div></div>'

            );




            $.ajax({

                url: "{{ url('ventareg') }}",

                type: 'POST',

                data: formData,

                contentType: false,

                processData: false,

                success: function (response) {

                    alert('Datos enviados exitosamente');

                    location.reload()

                    $('#spinnerCargando').remove();

                    console.log(response);

                },

                error: function (xhr, status, error) {

                    alert('Error al enviar los datos');

                    console.error(xhr.responseText);

                }

            });

        });



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

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

            $.get("{{ 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 previewImage(event, previewId) {

        const reader = new FileReader();

        reader.onload = function () {

            const output = document.getElementById(previewId);

            output.src = reader.result;

            output.style.display = 'block';

        }

        reader.readAsDataURL(event.target.files[0]);

    }

</script>



<script>



    $(document).ready(function () {

        $('#tipoDocumento').change(function () {

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



            if (selectedValue === 'RUC') {

                $('#documento').attr('maxlength', '11');

                $('#documento').attr('placeholder', 'Ingrese su RUC');

            } else {

                $('#documento').attr('maxlength', '8');

                $('#documento').attr('placeholder', 'Ingrese su documento');

            }

        });





        $('#tipoDocumentoTitular').change(function () {

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



            if (selectedValue === 'RUC') {

                $('#documentoTitular').attr('maxlength', '11');

                $('#documentoTitular').attr('placeholder', 'Ingrese su RUC');

            } else {

                $('#documentoTitular').attr('maxlength', '8');

                $('#documentoTitular').attr('placeholder', 'Ingrese su documento');

            }

        });

    });











</script>

<script>
/*     async function cargarSelects() {
        const tipo = document.getElementById('tipo');
        const res = await fetch('api/servicios');
        const data = await res.json();
        tipo.innerHTML = '<option value="">-- Seleccione --</option>';
        data.forEach(s => {
            tipo.innerHTML += `<option value="${s.id}">${s.nombre}</option>`;
        });
    } */

    document.getElementById('tipo').addEventListener('change', async function () {
        const tipoID = this.value;

        const vRes = await fetch(`api/velocidades/${tipoID}`);
        const velocidades = await vRes.json();
        const velSelect = document.getElementById('velocidad');

        velSelect.innerHTML = velocidades
            .map(v => `<option value="${v.id}">${v.velocidad_mbps} Mbps</option>`)
            .join('');

        // TV
        const tvRes = await fetch(`api/tv/${tipoID}`);
        const tvs = await tvRes.json();
        const tvSelect = document.getElementById('tv');
        tvSelect.innerHTML = `<option value="">-- Sin TV --</option>` + tvs.map(t => `<option value="${t.id}">${t.nombre}</option>`).join('');

        // Fijo
        const fijoRes = await fetch(`api/fijo/${tipoID}`);
        const { disponible } = await fijoRes.json();
        const fijoSelect = document.getElementById('fijo');
        fijoSelect.innerHTML = disponible ? `
        <option value="">-- Sin Fijo --</option>
        <option value="SI">SI</option>` : `<option value="">-- Sin Fijo --</option>`;
    });

    function agregarCard() {
        const tipoText = document.getElementById("tipo").selectedOptions[0].textContent;
        const velocidad = document.getElementById("velocidad").value;
        const tv = document.getElementById("tv").value;
        const fijo = document.getElementById("fijo").value;

        let contenido = `<h5 class="card-title">${tipoText}</h5>
        <p class="card-text"><strong>Velocidad:</strong> ${velocidad} Mbps</p>`;

        if (tv) contenido += `<p class="card-text"><strong>TV:</strong> ${tv}</p>`;
        if (fijo) contenido += `<p class="card-text"><strong>Fijo:</strong> ${fijo}</p>`;

        document.getElementById("contenidoCard").innerHTML = contenido;
        document.getElementById("resultadoCard").style.display = "block";
    }

    cargarSelects();
</script>

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

        $('input[name="tipoTitular"]').on('change', function () {

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

            if (tipo === 'MISMO') {

                // Copiar valores
                $('#nombresTitularLinea').val($('#nombres').val());
                $('#apellidosTitularLinea').val($('#apellidos').val());
                $('#documentoTitular').val($('#documento').val());

                $('#parentesco').val('TITULAR');
                $('#tipoDocumentoTitular').val('DNI');


                // (opcional) ocultar bloque
                $('#bloqueTitular').hide();

            }

            if (tipo === 'OTRO') {
                // Limpiar y mostrar
                $('#bloqueTitular').show();
                $('#bloqueTitular').find('input, select').val('');
            }

        });

    });
</script>
<script>
    $(document).ready(function () {

        $('input[name="tipoTitular"]').on('change', function () {

            if ($(this).val() === 'OTRO') {
                $('#bloqueTitular').show();
            } else {
                $('#bloqueTitular').hide();
            }

        });

    });
</script>


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

        // 1️⃣ Inicializar Chosen (UNA VEZ)
        $('.chosen-select').chosen({
            width: '100%',
            no_results_text: 'No encontrado'
        });

        // 2️⃣ Cargar departamentos
        $.get('{{ route("ubi.depa") }}', function (data) {
            let opciones = '<option value="">Seleccione</option>';
            data.forEach(d => {
                opciones += `<option value="${d.id}">${d.name}</option>`;
            });

            $('#departamento')
                .html(opciones)
                .trigger('chosen:updated'); // 🔴 IMPORTANTE
        });

        // 3️⃣ Cambio de departamento
        $('#departamento').change(function () {
            let id = $(this).val();

            $('#provincia')
                .html('<option value="">Seleccione</option>')
                .prop('disabled', true)
                .trigger('chosen:updated');

            $('#distrito')
                .html('<option value="">Seleccione</option>')
                .prop('disabled', true)
                .trigger('chosen:updated');

            if (id) {
               
                $.get("{{ route('ubi.pro', ':id') }}".replace(':id', id), function (data) {

                    let opciones = '<option value="">Seleccione</option>';
                    data.forEach(p => {
                        opciones += `<option value="${p.id}">${p.name}</option>`;
                    });

                    $('#provincia')
                        .prop('disabled', false)
                        .html(opciones)
                        .trigger('chosen:updated'); // 🔥 AQUÍ
                });
            }
        });

        // 4️⃣ Cambio de provincia
        $('#provincia').change(function () {
            let id = $(this).val();

            $('#distrito')
                .html('<option value="">Seleccione</option>')
                .prop('disabled', true)
                .trigger('chosen:updated');

            if (id) {
                $.get("{{ route('ubi.dis', ':id') }}".replace(':id', id), function (data) {

                    let opciones = '<option value="">Seleccione</option>';
                    data.forEach(d => {
                        opciones += `<option value="${d.id}">${d.name}</option>`;
                    });

                    $('#distrito')
                        .prop('disabled', false)
                        .html(opciones)
                        .trigger('chosen:updated'); // 🔥 AQUÍ
                });
            }
        });

    });
</script>

<script>
    $(document).ready(function () {
        $('#departamento, #provincia, #distrito').chosen({ width: '100%' });

    });





</script>