@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Autos')])

@section('content')

    <style>
        <
        style >
        body {
            font-weight: bold;
        }

        label {
            font-weight: bold;
        }

        .btn-icon.active {
            position: relative;
            border: 2px solid #198754; /* verde Bootstrap */
        }

        .btn-icon.active::after {
            content: "✓";
            position: absolute;
            top: 2px;
            right: 6px;
            font-size: 12px;
            color: white;
            background-color: #198754;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        #bottom-stuff {
            padding: 0px 30px 30px 30px;
            margin-left: 150px;
            position: relative;
        }

        #bottom {

            position: absolute;
            bottom: 0px;
        }

        .ui-autocomplete-input {
            border: none;
            font-size: 14px;
            width: 300px;
            height: 24px;
            margin-bottom: 5px;
            padding-top: 2px;
            border: 1px solid #DDD !important;
            padding-top: 0px !important;
            z-index: 1511;
            position: relative;
        }

        .ui-menu .ui-menu-item a {
            font-size: 12px;
        }

        .ui-autocomplete {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1510 !important;
            float: left;
            display: none;
            min-width: 160px;
            width: 160px;
            padding: 4px 0;
            margin: 2px 0 0 0;
            list-style: none;
            background-color: #ffffff;
            border-color: #ccc;
            border-color: rgba(0, 0, 0, 0.2);
            border-style: solid;
            border-width: 1px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
            *border-right-width: 2px;
            *border-bottom-width: 2px;
        }

        .ui-menu-item > a.ui-corner-all {
            display: block;
            padding: 3px 15px;
            clear: both;
            font-weight: normal;
            line-height: 18px;
            color: #555555;
            white-space: nowrap;
            text-decoration: none;
        }

        .ui-state-hover, .ui-state-active {
            color: #ffffff;
            text-decoration: none;
            background-color: #0088cc;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            background-image: none;
        }

        .table-wrapper {
            width: 100%;
            height: 300px;
            overflow: auto;
        }

        table {
            border: 1px solid black;
            margin-right: 20px;
        }

        td {
            width: 20px;
            height: 20px;
            font-size: 17px;
            /*background-color: #ccc;*/
        }

        .ho:hover {
            background-color: #ffff99;
        }

        /*body {
              font-size: 12px;
          }
          th { font-size: 12px; }
          td { font-size: 11px; }*/
        .productos {
            background-color: #f8f9fa;
        }

        .highlight_row {
            background-color: #85c1e9;
        }

        #tableProdBody {
            font-weight: bold;
        }

        .negri {
            font-weight: bold;
        }

        .sizeInput {
            font-size: 24px;
        }

        .hide-element {
            display: none !important;
        }

        .botClas {
            width: 100%;
            min-height: 80px;
            text-align: center;
            font-size: 14px;
            flex-direction: column;
        }

        .botClas .shortcut {
            font-size: 20px;
            font-weight: bold;
            display: block;
        }

        .botClas .desc {
            font-size: 12px;
            display: block;
        }

        .input-group-dynamic input {
            height: 45px;
            font-weight: bold;
        }

        .btn-icon {
            width: 100%;
            min-height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 14px;
        }

        .material-icons {
            font-size: 20px;
        }

        .icon-btn-group {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: center;
        }

        .form-check-label .material-icons {
            vertical-align: middle;
            font-size: 22px;
        }

        .form-check-input {
            cursor: pointer;
        }

        .garantia-switch {
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-start;
            min-height: 45px;
        }

        .garantia-switch .material-icons {
            font-size: 22px;
            color: #0d6efd; /* o el color que uses para íconos principales */
        }

        .garantia-switch label {
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

    </style>
    <div class="content">
        <input type="hidden" id="abierto">
        <div id="installedPrinters" class="d-flex align-items-center gap-2">
            <label for="installedPrinterName"  class="m-0">Selecciona una
                impresora:
            </label>
            <select class="form-control flex-grow-1" name="installedPrinterName" id="installedPrinterName"></select>
        </div>
    </div>



    {{--Tabla productos--}}

    <div class="row align-items-center">
        <input type="hidden" id="idDocumentoH">

        <div class="col-md-3 col-sm-12 mb-2">
            <div class="input-group input-group-dynamic">
                <input type="text" id="placas" class="form-control negri" onclick="modalPlacas();"
                       placeholder="Placas Vehículo">
                <input type="hidden" id="placas_id">
            </div>
        </div>

        <div class="col-md-3 col-sm-12 mb-2">
            <div class="input-group input-group-dynamic">
                <input type="text" class="form-control negri" id="cliente" placeholder="Cliente">
                <input type="hidden" id="cliente_id">
                <input type="hidden" id="calcomania_id">
                <input type="hidden" id="descuento" value="0">
                <input type="hidden" id="caja_id_user">
            </div>
        </div>

        <div class="col-md-2 col-sm-6 mb-2">
            <button class="btn btn-secondary btn-icon" onclick="modalGlobal()">
                <span class="material-icons">fact_check</span> Fact. Global
            </button>
        </div>

        <div class="col-md-2 col-sm-6 mb-2 hide-element" id="fragmento-no-tiene-lealtad">
            <button class="btn btn-warning btn-icon" onclick="inscribirProgramaLealtad()">
                <span class="material-icons">loyalty</span> Inscribir Lealtad
            </button>
        </div>

        <div class="col-md-4 col-sm-12 hide-element" id="fragmento-tiene-lealtad">
            <h5 class="text-uppercase mt-2" id="texto-programa-lealtad"></h5>
        </div>

        <div class="col-md-1 col-sm-3 mb-2">
            <button class="btn btn-outline-secondary btn-icon" onclick="ultimoTicket()" title="Último Ticket">
                <span class="material-icons">confirmation_number</span>
            </button>
        </div>

        <div class="col-md-1 col-sm-3 mb-2">
            <button class="btn btn-outline-secondary btn-icon" onclick="imprimirCorte()" title="Reimpresión Corte">
                <span class="material-icons">receipt_long</span>
            </button>
        </div>


        {{--<div class="col-md-1 col-sm-3 mb-2 text-en">--}}
        {{--<div class="garantia-switch">--}}
        {{--<span class="material-icons" title="Garantía de Lluvia">umbrella</span>--}}
        {{--<div class="form-check form-switch">--}}
        {{----}}
        {{--<input type="hidden" id="garantiaLluvia" value="{{ $garantia }}">--}}
        {{--<input class="form-check-input" type="checkbox" id="switchLluvia" onclick="garantiaLLuvia();" {{ $activo }}>--}}
        {{--<label class="form-check-label" for="switchLluvia">Garantía de Lluvia</label>--}}
        {{--</div>--}}
        {{--</div>--}}
        {{--</div>--}}
        @php
            $garantiaActiva = ($garantia == 1);
            $btnGarantiaClass = $garantiaActiva ? 'btn-secondary active' : 'btn-outline-secondary';
        @endphp

        <div class="col-md-1 col-sm-3 mb-2">
            <button
                    id="btnGarantiaLluvia"
                    class="btn {{ $btnGarantiaClass }} btn-icon"
                    title="Garantía de Lluvia"
                    onclick="toggleGarantiaVisualYGuardar()"
            >
        <span class="material-icons">
            {{ $garantiaActiva ? 'umbrella' : 'umbrella' }}
        </span>
            </button>

            <input type="hidden" id="garantiaLluvia" value="{{ $garantia }}">
        </div>
        <div class="col-md-1 col-sm-3 mb-2">
            <button class="btn btn-outline-secondary btn-icon" onclick="muestraProd()" title="Mostrar Servicios">
                <span class="material-icons">menu_open</span>
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-12 card" id="prodList" style="background-color: #adb5bd;">
            <div class="table-responsive">
                <table class="table table-md mb-0" id="prodListTable">
                    <thead>
                    <tr class="bg-info">
                        <th>Código</th>
                        <th>Descripción</th>
                        <th>Cantidad</th>
                        <th>Precio</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody id="tableProdBody" class="text-black">

                    </tbody>
                </table>

            </div>
        </div>
        <div class="col-2" id="div3" style="overflow: auto; display: none;">
            @foreach ($productos as $p)
                <div class="row">
                    <div class="card mt-2 card-plain bg-secondary text-white"
                         onclick="agregaProducto('{{ $p->Codigo }}');">
                        <div class="card-body p-2">
                            <p class="mt-2">{{ $p->Descripcion }}</p>
                            <p class="mb-0"><b>Precio:</b> ${{ number_format($p->Precio,2); }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="row">

        <div class="row">
            <div class="col-md-8 col-sm-12 d-flex align-items-center justify-content-center">
                <div class="row">
                    <div class="col-md-2 col-sm-12">
                        <div class="input-group input-group-sm input-group-outline my-3">

                            <input type="text" class="form-control form-control-sm numeros" id="buscaTicket"
                                   placeholder="Recepción">
                        </div>
                    </div>
                    <div class="col-md-10 col-sm-12">
                        <!--<div class="input-group input-group-sm input-group-outline my-3">
                           <label class="form-label">Productos/Servicios</label>
                           <input type="text" class="form-control form-control-sm" id="buscaProducto">
                             Text: <span id="ta-txt"></span><br />
             ID: <span id="ta-id"></span><br />
                         </div>-->
                        <div class="row text-center">
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="abreServicios();" title="Buscar servicios">
                                    <span class="shortcut">F1</span>
                                    <span class="desc">Buscar Servicio</span>
                                </button>
                            </div>
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="modalPago()" title="Pagar Venta">
                                    <span class="shortcut">F2</span>
                                    <span class="desc">Pago</span>
                                </button>
                            </div>
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="modalGenerarDocummentos();"
                                        title="Reimpresion y facturacion de Tickets/Facturas">
                                    <span class="shortcut">F3</span>
                                    <span class="desc">Fact Tick./Reimp.</span>
                                </button>
                            </div>
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="modalVentas();" title="Listado y cancelacion de Tickets/Facturas">
                                    <span class="shortcut">F4</span>
                                    <span class="desc">Tick./Fact.</span>
                                </button>
                            </div>
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="limpi();" title="Limpiar interfaz">
                                    <span class="shortcut">F7</span>
                                    <span class="desc">Limpiar</span>
                                </button>
                            </div>
                            <div class="col-md-2 col-sm-6 mb-2">
                                <button class="btn btn-secondary btn-sm d-flex align-items-center justify-content-center botClas"
                                        onclick="IniMovimientos()" title="Movimientos de Caja">
                                    <span class="shortcut">F9</span>
                                    <span class="desc">Mov. Caja</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-md-2 col-sm-6 d-flex align-items-center justify-content-center">
                         <button class="btn btn-secondary btn-sm">Autolavado</button>
                     </div>
                     <div class="col-md-2 col-sm-6 d-flex align-items-center justify-content-center">
                         <button class="btn btn-secondary btn-sm" onclick="modalGlobal();">Fact. Global</button>
                     </div>-->
                </div>
                <!--<div class="row">
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg d-flex align-items-center justify-content-center" onclick="javascript:$('#modalServicios').modal('show');">F1 Buscar</button>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg d-flex align-items-center justify-content-center">Generico</button>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg d-flex align-items-center justify-content-center" onclick="IniMovimientos()">F9 Mov.Caja</button>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg d-flex align-items-center justify-content-center" onclick="modalVentas();">F4 Ticketss</button>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg btn-block d-flex align-items-center justify-content-center" onclick="modalPago()">F2 Pago</button>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-secondary btn-lg d-flex align-items-center justify-content-center" onclick="modalGenerarDocummentos();">F3 Facturar</button>
                    </div>
                    <!--<div class="col-md-2 col-sm-2">
                        <button class="btn btn-secondary btn-sm btn-block" onclick="javascript:$('#modalPago').modal('show')">F2 forma de Pago</button>
                    </div>-->
                <!-- </div>-->
            </div>
            <div class="col-md-4 col-sm-12">
                <div class="card" style="background-color: #dee2e6;">
                    <div class="card-body text-right">
                        <div class="row">
                            <div class="col-6">
                                <h6 class="mb-0 font-weight-bolder">Total:</h6>
                                <h6 class="mb-0 font-weight-bolder">Efectivo:</h6>
                                <h6 class="mb-0 font-weight-bolder">Cambio:</h6>
                            </div>
                            <div class="col-6">
                                <h6 class="mb-0 font-weight-bolder" id="totalOrden">$0.00</h6>
                                <input type="hidden" id="totalOrdenHidden">
                                <h6 class="mb-0 font-weight-bolder">$0.00</h6>
                                <h6 class="mb-0 font-weight-bolder">$0.00</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="modal fade modalEsc" id="modalPlacas">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                <span class="material-icons" style="color: white !important">
                    search
                </span>
                        <h4 class="modal-title">Buscar un vehículo</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static">
                                    <label>Placas</label>
                                    <input type="text" class="form-control" id="placas_search"
                                           onkeypress="return blockSpecialChar(event)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" onclick="regVehic();">
                  <span class="material-icons">
                    add
                  </span>
                            Registrar Vehículo
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalVehiculo">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info">
                        <h4 class="modal-title">Nuevo Vehículo</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Placas</label>
                                    <input type="text" class="form-control" id="placasModal"
                                           style="text-transform:uppercase;" onblur="revisaPlacas();">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>SubMarcas</label>
                                    <select id="subMarcaModal" class="form-control select2" onchange="getMarcas();">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($submarcas as $marca)
                                            <option value="{{ $marca->Id }}"
                                                    idmarca="{{ $marca->Marca_id }}">{{ $marca->SubMarca }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Marcas</label>
                                    <select id="marcasModal" class="form-control select2">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($marcas as $marca)
                                            <option value="{{ $marca->Id }}">{{ $marca->Marca }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Color</label>
                                    <select id="colorModal" class="form-control select2">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($colores as $color)
                                            <option value="{{ $color->Id }}">{{ $color->Color }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Calcomania</label>
                                    <select id="calcomaniaModal" class="form-control select2"
                                            onchange="muestaVenciminto();">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($calcomanias as $c)
                                            <option value="{{ $c->Id }}">{{ $c->Descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="vigenciaCalco" style="display: none;">
                            <div class="col-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Fecha</label>
                                    <input type="date" class="form-control" id="VenceMembresia">
                                </div>
                            </div>
                            <div class="col-6" id="folCalco">
                                <div class="input-group input-group-static my-3">
                                    <label>Folio</label>
                                    <input type="input" class="form-control" id="FolioMembresia">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Cliente</label>
                                    <select id="clienteModal" class="form-control select2">
                                        @foreach ($clientes as $Id=>$Nombre)
                                            <option value="{{ $Id }}">{{ $Nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <label style="margin-left: 0px;">¿Inscribir al programa de lealtad?<span
                                        class="text-danger">*</span></label>
                            <div class="form-group">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="Lealtad"
                                           id="radio_programa_lealtad_si" value="Si">
                                    <label class="form-check-label" for="radio_programa_lealtad_si">Si</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="Lealtad"
                                           id="radio_programa_lealtad_no" value="No" checked>
                                    <label class="form-check-label" for="radio_programa_lealtad_no">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12" align="right">
                                <button class="btn btn-secondary" onclick="modalClienntes();">...</button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="guardarVehiculo();">Guardar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalServicios" tabindex="-1" aria-labelledby="modalServiciosLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="material-icons" style="color: white;">search</span>
                        <h4 class="modal-title" id="modalServiciosLabel">Ingresar Productos/Servicios</h4>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-outline my-3">
                                    <input type="text" id="buscaServicios" class="form-control"/>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="overflow: hidden; height: 100%;">
                            <div class="col">
                                <div class="card bg-gray-300">
                                    <div class="card-body">
                                        <select id="productosServicios" class="form-control chosen-select" size="20"
                                                multiple></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalGenerico">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Servicio Generico</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Descripcion</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Cantidad</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Precio</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalGenerarDocummentos" tabindex="-2">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Generar Documentos</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-2 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Serie</label>
                                    <select class="form-control" id="serieBusca">
                                        @foreach ($series as $mp)
                                            <option value="{{ $mp->prefijo->ClavePrefijo }}{{ $mp->Serie2 }}">{{ $mp->prefijo->ClavePrefijo }}{{ $mp->Serie2 }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="col-md-2 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Folio</label>
                                    <input type="text" class="form-control" id="folioBusca" placeholder="Folio">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Fecha</label>
                                    <input type="date" class="form-control datepicker" id="fechaBusca"
                                           value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-12 align-content-center">
                                <div class="input-group input-group-static my-3">
                                    <button class="btn btn-primary" onclick="buscaDocumento();">Buscar</button>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <input type="hidden" id="idDoc_r">
                            <div class="col-md-3">
                                <label>Cliente</label>
                                <input type="text" class="form-control" id="cliente_r" readonly>
                                <input type="hidden" id="idCliente_r">
                            </div>
                            <div class="col-md-1" id="btnVerCambiarCliente" style="display: none;"><br>
                                <div class="d-flex align-items-center">
                                    <button class="btn btn-primary" onclick="verClientes();" title="Cambiar Cliente"><i
                                                class="fa fa-user" aria-hidden="true"></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label>RFC</label>
                                <input type="text" class="form-control" id="rfc_r" readonly>
                            </div>
                            <div class="col-md-4">
                                <label>Total</label>
                                <input type="text" class="form-control" id="total_r" readonly>
                            </div>
                            <input type="hidden" id="urldoc_r">
                            <input type="hidden" id="tipodoc_r">
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Uso CFDI</label>
                                    <select class="form-control" id="usocfdi_r">
                                        @foreach ($usocfdi as $mp)
                                            @if($mp->c_usocfdi=='G03')
                                                <option value="{{ $mp->c_usocfdi }}" selected>{{ $mp->descripcion }}
                                                    ({{ $mp->c_usocfdi }})
                                                </option>
                                            @else
                                                <option value="{{ $mp->c_usocfdi }}">{{ $mp->descripcion }}
                                                    ({{ $mp->c_usocfdi }})
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label>Metodo de Pago</label>
                                <select id="metodoPago_r" class="form-control">
                                    @foreach ($metodospago as $mp)
                                        <option value="{{ $mp->clave }}">{{ $mp->descripcion }}({{ $mp->clave }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-row btnFact2" align="right">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" value="" id="concoche2" checked>
                                    Incluir datos del Vehículo
                                    <span class="form-check-sign">
            <span class="check"></span>
          </span>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-static mb-4">
                                    <label>Tipo relacion</label>
                                    <select id="tiporelacionRel2" class="form-control" onchange="muestraTableRel(2);">
                                        <option value="0">-Selecciones-</option>
                                        @foreach ($relaciones as $mp)
                                            <option value="{{ $mp->c_tiporelacion }}">{{ $mp->descripcion }}
                                                ({{ $mp->c_tiporelacion }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 relacionFuncion" style="display: none;">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Serie</label>
                                            <input type="text" class="form-control" id="serieRel2">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Folio</label>
                                            <input type="text" class="form-control" id="folioRel2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-center justify-content-center relacionFuncion"
                                 style="display: none;">
                                <div class="input-group input-group-static mb-4 relacionFuncion" style="display: none;">
                                    <button class="btn btn-primary btn-sm relacionFuncion" onclick="agregaFactura(2);"
                                            style="display: none;">
                                    <span class="material-icons">
                                        add
                                    </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row relacionFuncion" style="display: none;">
                            <div class="col-md-12 col-sm-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>Serie Folio</th>
                                            <th>UUID</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbodyRelaFacturas2">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="reimprime();">Re imprime/Re Envia
                        </button>
                        <button type="button" class="btn btn-primary btnFact2" id="btnFact2" style="display: none;">
                            Generar
                            Factura
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalPago">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Formas de pago</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-6">
                                @foreach ($fp as $f)
                                    <div class="row">
                                        <div class="input-group input-group-static input-group-sm">
                                            <h4>{{ $f->nombre }}</h4>
                                            <input type="text"
                                                   class="form-control inputFP eventfp @if ($f->claveSat=='99') metodoPagoCredito @else metodoPagoContado @endif"
                                                   style="font-size: 25px;" id="fpp_{{ $f->id }}" id_bd="{{ $f->id }}"
                                                   clave="{{ $f->claveSat }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="col-6 text-right">
                                <div class="row">
                                    <div class="input-group input-group-sm input-group-static my-3"
                                         style="display: none;">
                                        <label>Total</label>
                                        <input type="text" class="form-control" id="totalPago" readonly>
                                    </div>
                                    <h2 id="totalPagoLabel">Total : $0</h2>
                                </div>
                                <div class="row">
                                    <div class="input-group input-group-sm input-group-static my-3"
                                         style="display: none;">
                                        <label>Pagado</label>
                                        <input type="text" class="form-control" id="pagado" value='0' readonly>
                                    </div>
                                    <h2 id="pagadoLabel">Pagado : $0</h2>
                                </div>
                                <div class="row">
                                    <div class="input-group input-group-sm input-group-static my-3"
                                         style="display: none;">
                                        <label>Cambio</label>
                                        <input type="text" class="form-control" id="cambio" value="0" readonly>
                                    </div>
                                    <h2 id="cambioLabel">Cambio : $0</h2>
                                </div>
                                <div class="row" id="plazosVenta" style="display: none;">
                                    <div class="input-group input-group-sm input-group-static my-3">
                                        <h4>Plazo Venta</h4>
                                        <select class="form-control" id="plazoVenta" style="font-size: 25px;"
                                                onchange="liberaFormas();">
                                            @foreach ($plazos as $p)
                                                <option value="{{ $p->Id }}">{{ $p->Descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" onclick="pagar();" id="btnPaga">Pagar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalAltaCliente" style="z-index: 1052;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <input type="hidden" id="tipoAltaCliente">
                        <h4 class="modal-title">Nuevo Cliente</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                    <!--<div class="row">
          <div class="col-md-3 col-sm-12">
            <div class="input-group input-group-sm input-group-static my-3">
              <label>Cuenta</label>
              <input type="text" class="form-control" id="cuentaCliente" value='{{ $ultima_cuenta }}'>
            </div>
          </div>
        </div>-->
                        <div class="row">
                            <div class="col-md-8 col-sm-12">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Nombre<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="nombreCliente">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>RFC</label>
                                    <input type="text" class="form-control" id="rfcCliente"
                                           style="text-transform:uppercase;">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Regimen Fiscal</label>
                                    <select id="regimenCliente" class="form-control">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($regimenes as $f)
                                            <option value="{{ $f->id }}">{{ $f->descripcion }}({{ $f->c_regimenfiscal }}
                                                )
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8 col-sm-8">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Domicilio<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="domicilioCliente">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-2">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Num Ext.<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="numExtCliente">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-2">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Num Int.</label>
                                    <input type="text" class="form-control" id="numIntCliente">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 col-sm-2">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>CP<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="cpCliente" onblur="getColoniasPos();">
                                </div>
                            </div>
                            <div class="col-md-9 col-sm-11">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Colonia<span class="text-danger">*</span></label>
                                    <select id="coloniaCliente" class="form-control">
                                        <option value="0">-Selecciona-</option>

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1 d-flex align-items-center justify-content-center">
                                <button type="btn-success" id="addC"><i class="fa fa-plus"></i></button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group input-group-sm input-group-static my-3" id="correoClienteDiv">
                                    <label>Correo</label>
                                    <input type="email" class="form-control" id="correoCliente"
                                           onkeyup="validarEmail();">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Telefono</label>
                                    <input type="text" class="form-control" id="telefonoCliente">
                                </div>
                            </div>
                        </div>
                        <div class="row" style="display: none;">
                            <div class="col-md-4 col-sm-4">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Forma de Pago</label>
                                    <select id="fpCliente" class="form-control">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($fp as $f)
                                            <option value="{{ $f->id }}">{{ $f->nombre }}({{ $f->claveSat }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Banco</label>
                                    <input type="text" class="form-control" id="bancoCliente">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-4">
                                <div class="input-group input-group-sm input-group-static my-3">
                                    <label>Num.CTA.</label>
                                    <input type="text" class="form-control" id="numctaCliente">
                                </div>
                            </div>
                        </div>
                        <!--<div class="row">
                          <div class="col-md-6 col-sm-12">
                            <div class="input-group input-group-sm input-group-static my-3">
                              <label>Banco</label>
                              <input type="text" class="form-control" id="bancoCliente">
                            </div>
                          </div>
                          <div class="col-md-6 col-sm-12">
                            <div class="input-group input-group-sm input-group-static my-3">
                              <label>Num.CTA.</label>
                              <input type="text" class="form-control" id="numctaCliente">
                            </div>
                          </div>
                        </div>   -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="guardaCliente();">Guardar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalFactGlobal">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Facturacion Global</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-12">
                                    <div class="input-group input-group-static mb-4">
                                        <label>Sucursal</label>
                                        <input type="text" class="form-control" id="sucursalGlobal" readonly>
                                    </div>
                                </div>
                                <!--<div class="col-6">
                                         <div class="input-group input-group-outline my-3">
                             <label class="form-label">Folio</label>
                             <input type="text" class="form-control">
                           </div>
                                   </div>-->
                            </div>
                            <div class="row">

                                <div class="col-12">
                                    <div class="input-group input-group-static my-3">
                                        <label>Fecha</label>
                                        <input type="date" id="desdeGlobal" class="form-control"
                                               onchange="buscaVentas();"
                                               value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>

                            <!--<div class="input-group input-group-static mb-4">
               <label for="caja_inicio" class="ms-0">Periodicidad</label>
               <select class="form-control" id="desde">
                @for ($i = 1; $i < $filtroPeriorcidad; $i++)
                                <option value="{{ $i }}">{{ $i }}</option>
                @endfor
                                    </select>
                                  </div> -->

                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <h4>Lista de Tickets</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-wrapper">
                                        <table class="table table-bordered table-inverse table-hover">
                                            <thead>
                                            <tr>
                                                <!--<th>Sucursal</th>-->
                                                <th>Folio</th>
                                                <th>Global</th>
                                                <th>Tipo</th>
                                                <th>Cliente</th>
                                                <th>Fecha/hora</th>
                                                <th>Importe</th>
                                                <th><input class="form-check-input" type="checkbox" value=""
                                                           onclick="aaa2();" id="todoCheck"></th>
                                            </tr>
                                            </thead>
                                            <tbody id="bodyTableV">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!--<div class="row">
                              <div class="col-8"></div>
                              <div class="col-4" align="right">
                                   <div class="input-group input-group-outline my-3">
                        <label class="form-label">Total</label>
                        <input type="text" class="form-control">
                      </div>
                              </div>
                            </div>-->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="facturaGlobalModal();">Generar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalInicioCaja" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Inicio de Caja</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-static mb-4">
                                    <label>Sucursal</label>
                                    <input type="text" class="form-control" id="sucursal_inicio" readonly>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static mb-4">
                                    <label for="caja_inicio" class="ms-0">Caja</label>
                                    <select class="form-control" id="caja_inicio">
                                        <option value="0">-Selecciona Caja-</option>
                                        @foreach ($cajas as $c)
                                            <option value="{{ $c->Id }}">{{ $c->Caja }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group input-group-static mb-4">
                                    <label>Cajero</label>
                                    <input type="text" class="form-control" id="cajero_inicio"
                                           value="{{ auth()->user()->name }}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <h4>Valores de Inicio</h4>
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            @foreach ($fp as $f)
                                <div class="col-4">
                                    <div class="input-group input-group-static mb-4">
                                        <label>{{ $f->nombre }}</label>
                                        <input type="text" class="form-control fp_init" id="fp_{{ $f->id }}"
                                               idFp="{{ $f->id }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!--<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>-->
                        <button type="button" class="btn btn-primary" id="iniciarcaja">Iniciar Caja</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalMovimientos">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title">Movimientos Caja</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static mb-4">
                                    <label>Cajero</label>
                                    <input type="text" class="form-control form-control-sm" id="cajero_movimientos"
                                           value="{{ auth()->user()->name }}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="input-group input-group-static mb-4">
                                    <label>Fecha</label>
                                    <input type="date" class="form-control form-control-sm" id="fecha_movimientos"
                                           value="{{ date('Y-m-d') }}" readonly>
                                </div>
                            </div>
                            <div class="col-6">

                                <div class="input-group input-group-static mb-4">
                                    <label>Caja</label>
                                    <input type="text" class="form-control form-control-sm"
                                           id="caja_movimientos_display"
                                           readonly>
                                    <input type="hidden" class="form-control form-control-sm" id="caja_movimientos">
                                </div>
                            <!--<label for="caja_inicio" class="ms-0">Caja</label>
               <select class="form-control form-control-sm" id="caja_movimientos" readonly>
                <option value="0">-[Seleccione]-</option>
                @foreach ($cajas as $c)
                                <option value="{{ $c->Id }}">{{ $c->Caja }}</option>
                @endforeach
                                    </select>-->

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="input-group input-group-static mb-4">
                                    <label for="caja_inicio" class="ms-0">Tipo de Movimiento</label>
                                    <select class="form-control form-control-sm" id="tipo_movimientos">
                                        <option value="0">-[Seleccione]-</option>
                                        @foreach ($tiposMovimientos as $c)
                                            <option value="{{ $c->Id }}">{{ $c->TipoMovimientoCaja }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-static mb-4">
                                    <label>Importe</label>
                                    <input type="text" class="form-control form-control-sm" id="importe_movimientos">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <h5>Detalles de valores</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm">
                                        <thead>
                                        <tr>
                                            <th>Valor</th>
                                            <th>Importe</th>
                                            <th>Observaciones</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach ($fp as $f)
                                            <tr id="fpM_{{ $f->id }}" class="fpm" fpId="{{ $f->id }}">
                                                <td>{{ $f->nombre }}</td>
                                                <td>
                                                    <div class="input-group input-group-outline">
                                                        <input type="text"
                                                               class="form-control form-control-sm fpm_input"
                                                               id="importe_{{ $f->id }}">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="input-group input-group-outline">
                                                        <input type="text"
                                                               class="form-control form-control-sm fpm_input"
                                                               id="obser_{{ $f->id }}">
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6"></div>
                            <div class="col-3">
                                <div class="input-group input-group-outline">
                                    <label id='Ltotal_movimientos'>Total: $0.00</label>
                                    <input type="hidden" class="form-control form-control-sm" id="total_movimientos">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="input-group input-group-outline">
                                    <label id="Ldif_movimientos">Diferencia: $0.00</label>
                                    <input type="hidden" class="form-control form-control-sm" id="dif_movimientos">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="cerrarModales();">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="btnGM" onclick="guardarMovimiento();">Guardar
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

        <div id='modalComprobante' class="modal fade modalEsc" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Ticket</h4>
                        <input type="hidden" id="idVentaTicket">
                    </div>
                    <div class="modal-body">
                        <div class="row rTouch">
                            <div class="col-md-12">
                                <iframe id="frameComprobante" src="" frameborder="0"
                                        style="float:left;height:300px;width:100%;"></iframe>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">

                        <button class="btn btn-success btn-block" onclick="modalFactura();" id="facTicompo">Facturar
                        </button>


                        <button class="btn btn-warning btn-block" onclick="cerrarModales();" id="onCer">Cerrar</button>


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

        <div id='modalComprobanteFact' class="modal fade modalEsc" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Factura</h4>
                        <input type="hidden" id="idDocComprobante">
                        <input type="hidden" id="reenvio">
                    </div>
                    <div class="modal-body">
                        <div class="row rTouch">
                            <div class="col-md-12">
                                <iframe id="frameComprobanteFact" src="" frameborder="0"
                                        style="float:left;height:300px;width:100%;"></iframe>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <div class="col-4">
                            <div class="input-group input-group-static mb-4">
                                <label>Correo Cliente</label>
                                <!--<input type="text" class="form-control" id="emailClienteM">-->
                                <select id="emailClienteM" class="form-control" id="" multiple="">
                                </select>
                            </div>
                        </div>
                        <div class="col-1 justify-content-center">
                            <button class="btn btn-primary" onclick="addCorreoCliente();">+</button>
                        </div>
                        <div class="col-3 justify-content-center">
                            <button class="btn btn-primary btn-block" onclick="enviarFactura();"> Enviar</button>
                        </div>
                        <div class="col-3">
                            <button class="btn btn-warning btn-block" data-bs-dismiss="modal"
                                    onclick="cerramodalfacturapdf();">Cerrar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalFactura">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Facturar</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-5">
                                <div class="input-group input-group-static mb-4">
                                    <label>Razon Social</label>
                                    <input type="text" class="form-control" id="razSocial_mdf" readonly>
                                    <input type="hidden" id="idcliente_mdf">
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="input-group input-group-static mb-4">
                                    <label>Razon Social</label>
                                    <input type="text" class="form-control" id="rfc_mdf" readonly>
                                </div>
                            </div>
                            <div class="col-2">
                                <button class="btn btn-primary btn-sm" onclick="verClientes(1)">Ca</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group input-group-static mb-4">
                                    <label>Uso CFDI</label>
                                    <select id="usoCfdi" class="form-control">
                                        @foreach ($usocfdi as $mp)
                                            @if($mp->c_usocfdi=='G03')
                                                <option value="{{ $mp->c_usocfdi }}" selected>{{ $mp->descripcion }}
                                                    ({{ $mp->c_usocfdi }})
                                                </option>
                                            @else
                                                <option value="{{ $mp->c_usocfdi }}">{{ $mp->descripcion }}
                                                    ({{ $mp->c_usocfdi }})
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-static mb-4">
                                    <label>Metodo de Pago</label>
                                    <select id="metodoPago" class="form-control">
                                        @foreach ($metodospago as $mp)
                                            <option value="{{ $mp->clave }}">{{ $mp->descripcion }}({{ $mp->clave }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-row" align="right">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" value="" id="datosCoche" checked>
                                    Incluir datos del Vehículo
                                    <span class="form-check-sign">
                                <span class="check"></span>
                              </span>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-static mb-4">
                                    <label>Tipo relacion</label>
                                    <select id="tiporelacionRel" class="form-control" onchange="muestraTableRel();">
                                        <option value="0">-Selecciones-</option>
                                        @foreach ($relaciones as $mp)
                                            <option value="{{ $mp->c_tiporelacion }}">{{ $mp->descripcion }}
                                                ({{ $mp->c_tiporelacion }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 relacionFuncion" style="display: none;">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Serie</label>
                                            <input type="text" class="form-control" id="serieRel">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Folio</label>
                                            <input type="text" class="form-control" id="folioRel">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-center justify-content-center relacionFuncion"
                                 style="display: none;">
                                <div class="input-group input-group-static mb-4 relacionFuncion" style="display: none;">
                                    <button class="btn btn-primary btn-sm relacionFuncion" onclick="agregaFactura();"
                                            style="display: none;">
                                    <span class="material-icons">
                                        add
                                    </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row relacionFuncion" style="display: none;">
                            <div class="col-md-12 col-sm-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>Serie Folio</th>
                                            <th>UUID</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbodyRelaFacturas">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="btnFactMain">Facturar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalVentas">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Tickets/Facturas</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">

                        </div>
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <label>Tipo</label>
                                <select id="tipoDcumentoFiltro" class="form-control" onchange="buscaVentasV()">
                                    <option value="0">Todos</option>
                                    <option value="2">Ticket</option>
                                    <option value="1">Factura</option>
                                </select>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Desde</label>
                                    <input type="date" id="desdeV" class="form-control" onchange="buscaVentasV();"
                                           value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="input-group input-group-static my-3">
                                    <label>Hasta</label>
                                    <input type="date" id="hastaV" class="form-control" onchange="buscaVentasV();"
                                           value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead class="thead-light">
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">Cliente</th>
                                            <th scope="col">Placas</th>
                                            <th scope="col">Total</th>
                                            <th scope="col">Fecha</th>
                                            <th scope="col">Relacion</th>
                                            <th scope="col">Estatus</th>
                                            <th scope="col">Acciones</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tableBodyVentas">
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal"
                                onclick="javascript: $('.modal').modal('hide')">Cerrar
                        </button>
                        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalCancelacionFactura">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Cancelacion Factura</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="idDocHv">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static mb-4">
                                    <label for="motivo_cancelacion" class="ms-0">Tipo de Movimiento</label>
                                    <select class="form-control form-control-sm" id="motivo_cancelacion"
                                            onchange="muestraRel();">
                                        <option value="01">(01) Comprobantes emitidos con errores con relación</option>
                                        <option value="02">(02) Comprobantes emitidos con errores sin relación</option>
                                        <option value="03" selected>(03) No se llevó a cabo la operación</option>
                                        <option value="04">(04) Operación nominativa relacionada en una factura global
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="uuidRelaCancelRow" style="display: none;">
                            <div class="col-6">
                                <label>Serie</label>
                                <input type="text" class="form-control form-control-sm" id="serieRelaCancel">
                            </div>
                            <div class="col-6">
                                <label>Folio</label>
                                <input type="text" class="form-control form-control-sm" id="folioRelaCancel">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-danger" onclick="cancelaDocumento();">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalServicioEspecial">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Servicio Especial</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <input type="hidden" id="servicioEspecialId">
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <label>Nombre</label>
                                <div class="input-group input-group-dynamic mb-4">
                                    <input type="text" id="nomGenerico" class="form-control"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label>Precio</label>
                                <div class="input-group input-group-dynamic mb-4">
                                    <span class="input-group-text">$</span>
                                    <input type="text" id="precioGenerico" class="form-control"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!--<button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>-->
                        <button type="button" class="btn btn-primary" onclick="addproductoGenerico();">Agregar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="getCorteModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Corte de Caja</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <input type="hidden" id="idPerfil" value="{{ auth()->user()->id_perfil }}">
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Fecha</label>
                                    <input type="date" id="diaCorte" class="form-control" value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Usuario</label>
                                    <select class="form-control" id="userCorte"
                                            @if(auth()->user()->id_perfil!=1 || auth()->user()->id_perfil!=5) readonly @endif>
                                        @foreach ($users as $u)
                                            @if(auth()->user()->id_perfil==1 || auth()->user()->id_perfil==5)
                                                <option value="{{ $u->id }}">{{ $u->name }}</option>
                                            @else
                                                @if($u->id==auth()->user()->id)
                                                    <option value="{{ $u->id }}" selected>{{ $u->name }}</option>
                                                @else
                                                    <option value="{{ $u->id }}">{{ $u->name }}</option>
                                                @endif
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Sucursal</label>
                                    <select class="form-control" id="sucursalCorte" onchange="getCajas();"
                                            @if(auth()->user()->id_perfil!=1 || auth()->user()->id_perfil!=5) readonly @endif>
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($sucursales as $s)
                                            @if(auth()->user()->id_perfil==1 || auth()->user()->id_perfil==5)
                                                <option value="{{ $s->Id }}">{{ $s->Descripcion }}</option>
                                            @else
                                                @if($u->id==auth()->user()->id_sucursal)
                                                    <option value="{{ $s->Id }}" selected>{{ $s->Descripcion }}</option>
                                                @else
                                                    <option value="{{ $s->Id }}">{{ $s->Descripcion }}</option>
                                                @endif
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Caja</label>
                                    <select class="form-control" id="cajasCorte"></select>
                                </div>
                            </div>
                        <!--<div class="col-md-6">
                        <div class="input-group input-group-static my-3">
                            <label>Fecha</label>
                            <input type="date" id="desde" class="form-control" onchange="buscaVentas();" value="{{ date('Y-m-d') }}">
                        </div>
                    </div>-->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="printCorte();">Imprimir</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalNuevoEmail">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Nuevo correo de cliente</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Correo</label>
                                    <input type="text" class="form-control" id="correoNuevo">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="guardaCorreoCliente();">Guardar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalAjustes999">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Ajuste Automóvil</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <input type="hidden" id="idCocheHiden">
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Sub-marca:</label>
                                    <select id="SubMarca_" class="form-control" onchange="selectMarca(this.value)">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($submarcas as $sm)
                                            <option value="{{$sm->Id}}"
                                                    Marca_id="{{$sm->Marca_id}}">{{$sm->SubMarca}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            <!--<div class="input-group input-group-static my-3">
                        <label>Sub-marca:</label>
                        <select class="select2" id="SubMarca_" onchange="selectMarca(this.value)">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($submarcas as $sm)
                                <option value="{{$sm->Id}}" Marca_id="{{$sm->Marca_id}}">{{$sm->SubMarca}}</option>
                            @endforeach
                                    </select>
                                </div>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Marcas</label>
                                    <select id="Marca_id" class="form-control" onchange="getSubMarca2();"
                                            disabled="true">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($marcas as $marca)
                                            <option value="{{ $marca->Id }}">{{ $marca->Marca }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            <!-- <div class="input-group input-group-static my-3">
                        <label for="">Marca: </label>
                        <select id="Marca_id" class="select2" data-size="7" data-width="100%" data-live-search="true">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($marcas as $sm)
                                <option value="{{$sm->Id}}">{{$sm->Marca}}</option>
                            @endforeach
                                    </select>
                                </div>-->

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Color:</label>
                                    <select id="Color_id" class="form-control">
                                        <option value="0">-Selecciona-</option>
                                        @foreach ($colores as $c)
                                            <option value="{{$c->Id}}">{{$c->Color}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            <!--<div class="input-group input-group-static my-3">
                        <label>Color:</label>
                        <select class="select2" id="Color_id" data-size="7" data-width="100%" data-live-search="true">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                            @foreach ($colores as $c)
                                <option value="{{$c->Id}}">{{$c->Color}}</option>
                            @endforeach
                                    </select>
                                </div>-->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group input-group-static my-3">
                                    <label>Cliente:</label>
                                    <select id="Cliente_id2" class="form-control">
                                        @foreach ($clientes as $Id=>$Nombre)
                                            <option value="{{ $Id }}">{{ $Nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            <!--<div class="input-group input-group-static my-3">
                        <label>Cliente:</label>
                        <select class="select2" id="Cliente_id" data-size="7" data-width="100%" data-live-search="true">
                            @foreach ($clientes as $Id=>$Nombre)
                                <option value="{{ $Id }}">{{ $Nombre }}</option>
                            @endforeach
                                    </select>
                                </div>-->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="edita9999();">Guardar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade modalEsc" id="modalFactura2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Facturar</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-static mb-4">
                                    <label>Tipo relacion</label>
                                    <select id="tiporelacionRel3" class="form-control" onchange="muestraTableRel(3);">
                                        <option value="0">-Selecciones-</option>
                                        @foreach ($relaciones as $mp)
                                            <option value="{{ $mp->c_tiporelacion }}">{{ $mp->descripcion }}
                                                ({{ $mp->c_tiporelacion }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 relacionFuncion3" style="display: none;">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Serie</label>
                                            <input type="text" class="form-control" id="serieRel3">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Folio</label>
                                            <input type="text" class="form-control" id="folioRel3">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-center justify-content-center relacionFuncion3"
                                 style="display: none;">
                                <div class="input-group input-group-static mb-4 relacionFuncion3"
                                     style="display: none;">
                                    <button class="btn btn-primary btn-sm relacionFuncion3" onclick="agregaFactura(3);"
                                            style="display: none;">
                                    <span class="material-icons">
                                        add
                                    </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row relacionFuncion3" style="display: none;">
                            <div class="col-md-12 col-sm-12">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>Serie Folio</th>
                                            <th>UUID</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbodyRelaFacturas3">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" onclick="facturaGlobal();">Facturar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalverClientes">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Cambiar cliente</h4>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                        <input type="hidden" id="tipoDeCambiocliente">
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-11">
                                <div class="input-group input-group-static my-3">
                                    <label>Cliente</label>
                                    <select id="clienteCambio" class="form-control select2">
                                        @foreach ($clientes as $Id=>$Nombre)
                                            <option value="{{ $Id }}">{{ $Nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-1">
                                <br>
                                <div class="d-flex align-items-center">
                                    <button class="btn btn-primary btn-sm" title="Nuevo Cliente"
                                            onclick="modalClienntes(1)"><i class="fa fa-user-plus"
                                                                           aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="cambiaClienteVenta();">Cambiar</button>
                    </div>
                </div>
            </div>
        </div>


        @include('catalogo.domicilios.domicilios', ['Paises' => $Paises])

        <script src="https://cdn.jsdelivr.net/npm/jsprintmanager@8.0.0/JSPrintManager.min.js"></script>
        <link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
        <script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
        <script src="{{ asset('js/pos/pos.js') }}?{{ microtime() }}"></script>
        <script>

            //WebSocket settings
            JSPM.WebSocketPort = 55181;
            JSPM.JSPrintManager.auto_reconnect = true;
            JSPM.JSPrintManager.start();
            JSPM.JSPrintManager.WS.onStatusChanged = function () {
                if (jspmWSStatus()) {
                    //get client installed printers
                    JSPM.JSPrintManager.getPrinters().then(function (myPrinters) {
                        var options = '';
                        for (var i = 0; i < myPrinters.length; i++) {
                            options += '<option>' + myPrinters[i] + '</option>';
                        }
                        $('#installedPrinterName').html(options);
                    });
                }
            };

            //Check JSPM WebSocket status
            function jspmWSStatus() {
                if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
                    return true;
                else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
                    console.log('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
                    return false;
                } else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
                    console.log('JSPM has blocked this website!');
                    return false;
                }
            }

            function printTicket(base64) {
                const commands = atob(base64);

                if (!jspmWSStatus()) return;

                var cpj = new JSPM.ClientPrintJob();
                const printer = $('#installedPrinterName').val();

                if (printer == '') return;

                cpj.clientPrinter = new JSPM.InstalledPrinter(printer);

                var esc = '\x1B';
                var cmds = esc + "@";
                var stringCode = cmds + commands;
                cpj.printerCommands = stringCode;
                cpj.sendToClient();
            }

            function printTicketPDF(filename, copias = 1) {
                if (!jspmWSStatus()) return;

                const printer = $('#installedPrinterName').val();
                if (printer == '') return;

                for (let i = 0; i < copias; i++) {
                    const pdfJob = new JSPM.ClientPrintJob();
                    pdfJob.clientPrinter = new JSPM.InstalledPrinter(printer);

                    pdfJob.files.push(new JSPM.PrintFilePDF(
                        '/temps/' + filename,
                        JSPM.FileSourceType.URL,
                        'ticket.pdf'
                    ));

                    pdfJob.sendToClient();

                    // Pequeña espera antes de enviar corte (puedes ajustar si el corte se adelanta)
                    setTimeout(() => {
                        const cutJob = new JSPM.ClientPrintJob();
                        cutJob.clientPrinter = new JSPM.InstalledPrinter(printer);

                        // Comando de corte completo ESC/POS
                        const cutCommand = new Blob([new Uint8Array([0x1D, 0x56, 0x00])]);
                        cutJob.files.push(new JSPM.PrintFile(
                            cutCommand,
                            JSPM.FileSourceType.BLOB,
                            'cut.bin'
                        ));

                        cutJob.sendToClient();
                    }, 1000); // Espera 1 segundo
                }
            }




            function toggleGarantiaVisualYGuardar() {
                let $btn = $('#btnGarantiaLluvia');
                let $input = $('#garantiaLluvia');

                let estaActiva = $input.val() === "1";
                let nuevoEstado = estaActiva ? 0 : 1;
                
                if (nuevoEstado === 1) {
                    $btn.removeClass('btn-outline-secondary').addClass('btn-secondary active');
                } else {
                    $btn.removeClass('btn-secondary active').addClass('btn-outline-secondary');
                }

                $input.val(nuevoEstado);
                garantiaLLuvia();
            }

        </script>


@endsection