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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chosen-bootstrap-5@1.0.0/dist/chosen-bootstrap-5.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --ink: #0A1A2F;
            --ink-soft: #12253F;
            --signal: #00B4D8;
            --signal-dark: #0086A8;
            --accent: #FF6B35;
            --surface: #F3F6FA;
            --card: #FFFFFF;
            --border: #DCE3EA;
            --text: #1B2733;
            --text-muted: #64748B;
            --success: #12B76A;
            --radius: 10px;
        }

        * { box-sizing: border-box; }

        body {
            background: var(--surface);
            font-family: 'Inter', -apple-system, sans-serif;
            color: var(--text);
            background-image:
                radial-gradient(circle at 12% 8%, rgba(0,180,216,0.10), transparent 45%),
                radial-gradient(circle at 88% 92%, rgba(255,107,53,0.08), transparent 45%);
            background-attachment: fixed;
            min-height: 100vh;
            padding-bottom: 48px;
        }

        h1, h2, h3, h4, h5, h6, .brand-title, .step-label {
            font-family: 'Space Grotesk', 'Inter', sans-serif;
        }

        label {
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 4px;
            display: inline-block;
        }

        /* ===== Shell ===== */
        .app-shell {
            max-width: 1040px;
            margin: 0 auto;
            padding-top: 28px;
        }

        .app-header {
            background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 55%, #103A57 100%);
            border-radius: 18px 18px 0 0;
            padding: 26px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .app-header::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: repeating-linear-gradient(115deg, rgba(0,180,216,0.12) 0px, rgba(0,180,216,0.12) 1px, transparent 1px, transparent 46px);
            pointer-events: none;
        }

        .app-header .logo-win {
            width: 42px;
            height: auto;
            position: relative;
            z-index: 1;
            filter: brightness(0) invert(1);
        }

        .brand-block {
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            z-index: 1;
        }

        .brand-title {
            color: #fff;
            font-size: 1.15rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: .01em;
        }

        .brand-sub {
            color: rgba(255,255,255,0.6);
            font-size: 0.78rem;
            margin: 0;
            font-weight: 500;
        }

        .header-pill {
            position: relative;
            z-index: 1;
            background: rgba(0,180,216,0.16);
            border: 1px solid rgba(0,180,216,0.4);
            color: var(--signal);
            font-size: 0.72rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 999px;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        /* ===== Step tracker (signature element) ===== */
        .route-tracker {
            background: var(--ink);
            padding: 0 32px 22px 32px;
            margin: 0;
            list-style: none;
            display: flex;
            border: none;
            position: relative;
        }

        .route-tracker .nav-item {
            flex: 1;
            position: relative;
        }

        .route-tracker .nav-item::before {
            content: "";
            position: absolute;
            top: 17px;
            left: -50%;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to right, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
            background-size: 12px 2px;
            z-index: 0;
        }

        .route-tracker .nav-item:first-child::before { display: none; }

        .route-tracker .nav-link {
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.5);
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0;
            position: relative;
            z-index: 1;
            border-radius: 0;
        }

        .route-tracker .nav-link .node {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            background: var(--ink-soft);
            border: 2px solid rgba(255,255,255,0.18);
            transition: all .2s ease;
        }

        .route-tracker .nav-link.active {
            color: #fff;
        }

        .route-tracker .nav-link.active .node {
            background: var(--signal);
            border-color: var(--signal);
            box-shadow: 0 0 0 5px rgba(0,180,216,0.18);
        }

        .route-tracker .nav-link .step-label {
            white-space: nowrap;
        }

        /* ===== Card body ===== */
        .form-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 18px 18px;
            padding: 34px 32px 30px;
            box-shadow: 0 18px 40px -20px rgba(10, 26, 47, 0.25);
        }

        .section-heading {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-heading::before {
            content: "";
            width: 4px;
            height: 16px;
            background: var(--signal);
            border-radius: 2px;
            display: inline-block;
        }

        .section-sub {
            color: var(--text-muted);
            font-size: 0.82rem;
            margin: 0 0 18px;
        }

        .section-block {
            padding-bottom: 22px;
            margin-bottom: 22px;
            border-bottom: 1px dashed var(--border);
        }

        .section-block:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        /* ===== Inputs ===== */
        .form-control, select.form-control, .chosen-container-single .chosen-single {
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: 5px 9px;
            font-size: 0.78rem;
            min-height: 32px;
            color: var(--text);
            background-color: #fbfcfe;
            transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
        }

        textarea.form-control {
            min-height: 0;
        }

        .form-control:focus, .chosen-container-active .chosen-single {
            border-color: var(--signal);
            box-shadow: 0 0 0 3px rgba(0,180,216,0.16);
            background-color: #fff;
            outline: none;
        }

        .form-control:disabled {
            background-color: #F1F4F8;
            color: var(--text-muted);
        }

        .chosen-container-single .chosen-single {
            height: 32px;
            padding: 5px 9px;
            display: flex;
            align-items: center;
        }

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

        .chosen-container .chosen-drop {
            font-size: 0.78rem;
        }

        input[type="file"].form-control-file {
            width: 100%;
            border: 1.5px dashed var(--border);
            border-radius: 8px;
            padding: 8px 10px;
            background: #FAFCFE;
            font-size: 0.72rem;
            color: var(--text-muted);
        }

        input[type="file"].form-control-file:hover {
            border-color: var(--signal);
        }

        .preview-container img {
            max-width: 150px;
            margin-top: 10px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            box-shadow: 0 6px 14px -8px rgba(10,26,47,.3);
        }

        /* Radio pills for titular */
        .titular-choice {
            display: flex;
            gap: 12px;
            margin-bottom: 4px;
        }

        .titular-choice label {
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid var(--border);
            border-radius: 999px;
            padding: 5px 14px;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            text-transform: none;
            letter-spacing: 0;
            margin: 0;
            transition: all .15s ease;
        }

        .titular-choice input[type="radio"] {
            accent-color: var(--signal-dark);
        }

        .titular-choice label:has(input:checked) {
            border-color: var(--signal);
            background: rgba(0,180,216,0.08);
            color: var(--signal-dark);
        }

        #bloqueTitular {
            background: #F8FAFC;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px 16px 4px;
            margin-top: 4px;
            margin-left: 0;
            margin-right: 0;
        }

        /* Buttons */
        .btn-primary {
            background: var(--accent);
            border: none;
            border-radius: 999px;
            padding: 11px 30px;
            font-weight: 700;
            font-size: 0.88rem;
            letter-spacing: .02em;
            box-shadow: 0 10px 20px -8px rgba(255,107,53,0.5);
        }

        .btn-primary:hover, .btn-primary:focus {
            background: #E8551E;
        }

        /* Focus visibility for a11y */
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid var(--signal);
            outline-offset: 2px;
        }

        @media (max-width: 767px) {
            .app-shell { padding-left: 10px; padding-right: 10px; }
            .app-header { border-radius: 14px 14px 0 0; padding: 20px 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
            .route-tracker { padding: 0 14px 18px; overflow-x: auto; }
            .route-tracker .step-label { display: none; }
            .form-card { padding: 22px 16px 26px; border-radius: 0 0 14px 14px; }
            .header-pill { align-self: flex-start; }
        }

        @media (prefers-reduced-motion: reduce) {
            * { transition: none !important; }
        }
    </style>

</head>

<body>

    <div class="app-shell container">

        <!-- ================== HEADER ================== -->
        <div class="app-header">
            <div class="brand-block">
                <img src="https://win.pe/img/logo-oct.png" alt="win internet" class="logo-win" width="42">
                <div>
                    <p class="brand-title">WIN Internet</p>
                    <p class="brand-sub">Formulario de venta &mdash; registro de contrato</p>
                </div>
            </div>
            <span class="header-pill">Nueva venta</span>
        </div>

        <!-- ================== TABS / STEP TRACKER ================== -->
        <ul class="nav route-tracker" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabTitular">
                    <span class="node">🧑</span>
                    <span class="step-label">Contratante</span>
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabDireccion">
                    <span class="node">📍</span>
                    <span class="step-label">Dirección</span>
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPlan">
                    <span class="node">📦</span>
                    <span class="step-label">Plan</span>
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabResumen">
                    <span class="node">✅</span>
                    <span class="step-label">Observación</span>
                </button>
            </li>
        </ul>

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

            <!-- ================== CONTENIDO ================== -->
            <div class="tab-content form-card">

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

                    <div class="card-body p-0">

                        <div class="section-block">
                            <p class="section-heading">Datos del contratante</p>
                            <p class="section-sub">Información personal y de contacto de quien firma el contrato.</p>

                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label>Nombres</label>
                                    <input type="hidden" id="operadorventa" name="operadorventa" value="WIN">
                                    <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-0">
                                <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>

                        <div class="section-block">
                            <p class="section-heading">Titular de la línea</p>
                            <p class="section-sub">¿El contratante es también el titular del servicio?</p>

                            <div class="mb-3 titular-choice">
                                <label><input type="radio" name="tipoTitular" value="MISMO"> Mismo titular</label>
                                <label><input type="radio" name="tipoTitular" value="OTRO"> Otro</label>
                            </div>

                            <div class="row" 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>
                            </div>
                        </div>

                    </div>
                </div>

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


                    <div class="card-body p-0">

                        <p class="section-heading">Ubicación</p>
                        <p class="section-sub">Ubigeo y dirección exacta donde se instalará el servicio.</p>

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

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

                                <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>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                     <option value="19">19</option>
                                     <option value="20">20</option>
                                     <option value="21">21</option>
                                     <option value="22">22</option>
                                     <option value="23">23</option>
                                     <option value="24">24</option>
                                     <option value="25">25</option>
                                     <option value="26">26</option>
                                     <option value="27">27</option>
                                     <option value="28">28</option>
                                     <option value="29">29</option>
                                     <option value="30">30</option>


                                </select>

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

<input  type="text" class="form-control" id="interior" name="interior" placeholder="s/n">
                    </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-0">

                            <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 p-0">

                        <p class="section-heading">Plan y servicios</p>
                        <p class="section-sub">Selecciona la oferta, velocidad y servicios adicionales.</p>

                        <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>
                                </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="row mb-0">

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

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

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

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

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





                                </select>

                            </div>

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

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

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

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

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





                                </select>

                            </div>

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

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

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

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





                                </select>

                            </div>

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

                                <label for="operador">N° Mesh</label>

                                <select 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 class="col-md-3">

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

                                <input 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 p-0">

                        <p class="section-heading">Observación y cierre</p>
                        <p class="section-sub">Fecha/horario propuestos por el cliente y notas finales.</p>

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


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

                    </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: "{{ route('winventas.reg') }}",

                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 res = await fetch("{{ route('plan.ofer') }}");
        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(`{{ url('crm/planes/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(`{{ url('crm/planes/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());

                 // Copiar SELECT (tipo documento)
            $('#tipoDocumentoTitular')
                .val($('#tipoDocumento').val())
                .trigger('change');


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

                 // (opcional) deshabilitar edición
            $('#bloqueTitular').find('input, select').prop('disabled', true);

            }

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

                $('#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>