@extends('layouts.app')
@include('business.layouts.navbar')

@section('content')
    <div class="loading-overlay d-none" id="loadingOverlay">
        <div class="spinner-border text-white" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row">
            <div class="col-sm">
                <h3>Factura</h3>
            </div>
            <div class="col-sm">
                <div class="form-group">
                    <label for="fechaDTE">Fecha DTE:</label>
                    <input type="date" class="form-control" id="fechaDTE">
                </div>
            </div>
            <div class="col-sm">
                <div class="form-group">
                    <label for="horaDTE">Hora:</label>
                    <input type="time" class="form-control" id="horaDTE">
                </div>
            </div>
            <div class="col-sm text-right">
                <br>
                <button type="button" class="btn btn-danger" id="cancelarDTE"><i class="fa fa-square-xmark"></i>
                    Cancelar</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card mb-3 shadow mt-3">
                    <div class="card-header">
                        <h5 class="card-title text-muted text-dark font-weight-normal"><i class="fas fa-info"></i>
                            Detalle de factura</h5>
                    </div>
                    <div class="card-body bg-light ">
                        <h4>Datos de la factura</h4>
                        <!-- Button trigger modal Agregar Ítem-->
                        <div class="d-flex">
                            <div class="dropdown me-2">
                                <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    Agregar Detalle
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#aggitem"
                                            href="#aggitem">Producto o Servicio</a></li>
                                    <li><a class="dropdown-item" href="#">Monto No Afecto</a></li>
                                    <li><a class="dropdown-item">Impuestos/Tasas con afectación al IVA</a></li>
                                </ul>
                            </div>
                            <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                data-bs-target="#prodExistenteModal">Añadir Producto Existente</button>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="container mt-5">
                                    <table class="table table-light border-less">
                                        <thead>
                                            <tr>
                                                <th>Unidad de Medida</th>
                                                <th>Descripción</th>
                                                <th>Cantidad</th>
                                                <th>Precio</th>
                                                <th>Descuento por ítem</th>
                                                <th>V. Gravada</th>
                                                <th>V. Exenta</th>
                                                <th>V. No Sujeta</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="items">
                                        </tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-end fw-bold">Sub Total</td>
                                            <td id="subTotalGeneral"></td>
                                        </tr>
                                        <tbody id="tributos">
                                        </tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-end fw-bold">Monto Total de la operación</td>
                                            <td id="montoTotalOperacion"></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="checkIvaRete1">
                                                    <label class="form-check-label" for="checkIvaRete1">
                                                        ¿Retener IVA?
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="text-end fw-bold">Retención IVA (1%)</td>
                                            <td id="reteIVA"></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="checkReteRenta">
                                                    <label class="form-check-label" for="checkReteRenta">
                                                        ¿Retener Renta?
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="text-end fw-bold">Retención Renta</td>
                                            <td id="reteRenta"></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-end fw-bold">Descuento a Operación</td>
                                            <td id="descuentosTotal"></td>
                                        </tr>
                                        <tr class="table-active">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-end fw-bold">Total Pagar</td>
                                            <td id="totalPagar"></td>
                                        </tr>
                                    </table>
                                    <!-- Button trigger modal Agregar Descuento -->
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#aggDescuentoModal">
                                        Agregar Descuento
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-header">
                        <h5 class="card-title text-muted text-dark font-weight-normal"><i class="fa-solid fa-file"></i>
                            Datos del Emisor y Receptor</h5>
                    </div>
                    <div class="card-body fw-bold bg-light">
                        <ul class="nav nav-tabs navbar-dark" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="receptor" data-bs-toggle="tab"
                                    data-bs-target="#receptor-pane" type="button" role="tab"
                                    aria-controls="receptor-pane" aria-selected="true">Receptor</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="emisor" data-bs-toggle="tab" data-bs-target="#emisor-pane"
                                    type="button" role="tab" aria-controls="emisor-pane"
                                    aria-selected="false">Emisor</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="receptor-pane" role="tabpanel"
                                aria-labelledby="receptor" tabindex="0">
                                <!-- Contenido de receptor -->
                                <div class="row">
                                    <div class="col">
                                        <div class="bg-light mb-3 mt-3">
                                            <div class="card-body ">
                                                <div class="tab-content" id="myTabContent">
                                                    <div class="tab-pane fade show active" id="receptor" role="tabpanel"
                                                        aria-labelledby="receptor">
                                                        <form>
                                                            <div class="row">
                                                                <div class="col-md-6 mb-3">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            value="" id="checkContribuyente">
                                                                        <label for="checkContribuyente"
                                                                            class="form-check-label">
                                                                            No Ingresar Datos del Cliente
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6 mb-3">
                                                                    <button type="button" id="aggCliente"
                                                                        class="btn btn-success" data-bs-toggle="modal"
                                                                        data-bs-target="#clienteExistenteModal">
                                                                        Seleccionar Cliente Existente
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="tipoDoc">Tipo de
                                                                            Documento:</label>
                                                                        <select class="form-select" id="tipoDoc">
                                                                            <option value="00">-- Seleccione --
                                                                            </option>
                                                                            <option value="36">NIT</option>
                                                                            <option value="13">DUI</option>
                                                                            <option value="03">PASAPORTE</option>
                                                                            <option value="02">CARNÉT RESIDENTE
                                                                            </option>
                                                                            <option value="37">OTRO</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="nitContribuyente">Número de
                                                                            Documento:</label>
                                                                        <input type="text" class="form-control"
                                                                            id="nitContribuyente"
                                                                            placeholder="Número de documento">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="nombreComercial">Nombre, denominación o razón
                                                                    social del contribuyente:</label>
                                                                <input type="text" class="form-control"
                                                                    id="nombreContribuyente"
                                                                    placeholder="Nombre completo del receptor">
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="departamento">Departamento:</label>
                                                                        <select class="form-select"
                                                                            id="departamentoContribuyente">
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="municipio">Municipio:</label>
                                                                        <select class="form-select"
                                                                            id="municipioContribuyente">
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                            <div class="form-group">
                                                                <label for="direccionComplemento">
                                                                    Complemento:</label>
                                                                <textarea class="form-control" id="complementoContribuyente" placeholder="Digite el complemento de la dirección"></textarea>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="correo">Correo electrónico:</label>
                                                                        <input type="email" class="form-control"
                                                                            id="correoContribuyente"
                                                                            placeholder="Correo electrónico">
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="telefono">Teléfono:</label>
                                                                        <input type="text" class="form-control"
                                                                            id="telefonoContribuyente"
                                                                            placeholder="Teléfono">
                                                                    </div>
                                                                </div>
                                                            </div>


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

                            </div>
                            <div class="tab-pane fade" id="emisor-pane" role="tabpanel" aria-labelledby="emisor"
                                tabindex="0">
                                <!-- Contenido de emisor -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="bg-light mb-3 mt-3">
                                            <div class="card-body">
                                                <div class="tab-content" id="myTabContent">
                                                    <div class="tab-pane fade show active" id="emisor" role="tabpanel"
                                                        aria-labelledby="emisor-tab">
                                                        <form>
                                                            <div class="form-group">
                                                                <input type="hidden" name="nit" id="nit"
                                                                    value="{{ $datos_empresa['nit'] }}">
                                                                <label for="actividadEconomica">Actividad
                                                                    Económica:</label>
                                                                <input type="text" class="form-control"
                                                                    id="actividadEconomica"
                                                                    value="{{ $datos_empresa['codActividad'] }} - {{ $datos_empresa['descActividad'] }}"
                                                                    readonly>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="tipoEstablecimiento">Tipo de
                                                                    Establecimiento:</label>
                                                                <input type="text" class="form-control"
                                                                    id="tipoEstablecimiento" value="Casa Matriz">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="direccion">Establecimiento /
                                                                    Dirección:</label>
                                                                <input type="text" class="form-control" id="direccion"
                                                                    value="{{ $datos_empresa['complemento'] }}">
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="correo">Correo electrónico:</label>
                                                                        <input type="email" class="form-control"
                                                                            id="correo"
                                                                            value="{{ $datos_empresa['correo'] }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col">
                                                                    <div class="form-group">
                                                                        <label for="telefono">Teléfono:</label>
                                                                        <input type="text" class="form-control"
                                                                            id="telefono"
                                                                            value="{{ $datos_empresa['telefono'] }}">
                                                                    </div>
                                                                </div>
                                                            </div>


                                                        </form>
                                                    </div>
                                                </div>
                                                <a href="#" role="button">Actualizar</a>
                                            </div>

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

                            </div>
                        </div>
                    </div>
                    <div class="card-header">
                        <h5 class="card-title text-muted text-dark font-weight-normal"><i
                                class="fa-solid fa-arrow-down"></i> Otra información del DTE</h5>
                    </div>
                    <div class="card-body bg-light">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="documentos" data-bs-toggle="tab"
                                    data-bs-target="#documentos-pane" type="button" role="tab"
                                    aria-controls="documentos-pane" aria-selected="true">Documentos
                                    Relacionados</button>
                            </li> --}}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="terceros" data-bs-toggle="tab"
                                    data-bs-target="#terceros-pane" type="button" role="tab"
                                    aria-controls="terceros-pane" aria-selected="false">Venta a cuenta de
                                    terceros</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="otrosdoc1" data-bs-toggle="tab"
                                    data-bs-target="#otrosdoc-pane" type="button" role="tab"
                                    aria-controls="otrosdoc-pane" aria-selected="false">Otros Documentos
                                    Asociados</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabOtraInfo">
                            <div class="tab-pane fade" id="documentos-pane" role="tabpanel"
                                aria-labelledby="documentos-pane" tabindex="0">
                                <!-- Contenido de Documentos -->
                                <div class="mb-3 mt-3">
                                    <!-- Button trigger modal Agregar DTE-->
                                    <div class="dropdown">
                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            Agregar DTE
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" data-bs-toggle="modal"
                                                    data-bs-target="#aggdteFis" href="#">Físico</a></li>
                                            <li><a class="dropdown-item" data-bs-toggle="modal"
                                                    data-bs-target="#aggdteDig" href="#">Digital</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade show active" id="terceros-pane" role="tabpanel"
                                aria-labelledby="terceros-pane" tabindex="0">
                                <!-- Contenido de Ventas a Terceros -->
                                <div class="card-body bg-light">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="mb-3" for="nitVentaTerceros">NIT:</label>
                                                <input type="email" class="form-control" id="nitVentaTerceros"
                                                    placeholder="NIT del contribuyente">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                <label class="mb-3" for="nombreVentaTerceros">Nombre:</label>
                                                <input type="text" class="form-control" id="nombreVentaTerceros"
                                                    placeholder="Nombre del contribuyente">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Contenido de Otros Documentos Asociados -->
                            <div class="tab-pane fade" id="otrosdoc-pane" role="tabpanel"
                                aria-labelledby="otrosdoc-pane" tabindex="0">
                                <div class="mb-3 mt-3">
                                    <!-- Button trigger modal Otros Doc Asociados-->
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#otrosdoc">
                                        Agregar Documentos
                                    </button>
                                    <hr>
                                    <h5>Otros Documentos Asociados</h5>
                                    <hr>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Código de Documento</th>
                                                    <th>Descripción del Documento</th>
                                                    <th>Detalle del Documento</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Emisor</td>
                                                    <td>0001</td>
                                                    <td>Factura de Venta</td>
                                                    <td><button class="btn btn-danger">X</button></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal"><i class="fas fa-info"></i>
                                Observaciones</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <textarea class="form-control" id="observacionesDoc" placeholder="Observaciones al documento"></textarea>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal"><i class="fas fa-info"></i>
                                Condición de la Operación</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="condicionOperacion" class="form-label">Condición de la Operación:</label>
                                <select id="condicionOperacion" class="form-select">
                                    <option value="1">Contado</option>
                                    <option value="2">Crédito</option>
                                    <option value="3">Otro</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal"><i
                                    class="fas fa-dollar-sign"></i>
                                Forma de Pago</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="row">
                                    <div class="fw-bold col-3">
                                        <label for="condicionOperacion" class="form-label">Forma de Pago</label>
                                        <select id="condicionOperacion" class="form-select">
                                            <option>Billetes y Monedas</option>
                                            <option>Tarjeta Débito</option>
                                            <option>Tarjeta Crédito</option>
                                            <option>Cheque</option>
                                            <option>Transferencia Depósito Bancario</option>
                                            <option>Vales o Cupones</option>
                                            <option>Dinero Electrónico</option>
                                            <option>Monedero Electrónico</option>
                                            <option>Certificado o Tarjeta de Regalo</option>
                                            <option>Bitcoin</option>
                                            <option>Bitcoin</option>
                                            <option>Otras Criptomonedas</option>
                                            <option>Cuentas por Pagar del Receptor</option>
                                            <option>Giro Bancario</option>
                                            <option>Otros (se debe indicar el medio de pago)</option>
                                        </select>
                                    </div>
                                    <div class="fw-bold col-3">
                                        <label for="monto" class="form-label">Monto:</label>
                                        <input type="number" class="form-control" id="monto" value="">
                                    </div>
                                    <div class="fw-bold col-3">
                                        <label for="numDoc" class="form-label">N° Doc.</label>
                                        <input type="number" class="form-control" id="numDoc">
                                    </div>
                                    {{-- <div class="col-3">
                                        <label for="formPago" class="form-label"></label><br>
                                        <button type="button" class="btn btn-primary"><i
                                                class="fas fa-money-bill-alt"></i> Agregar Forma de Pago</button>
                                    </div> --}}
                                </div>
                            </div>
                            {{-- <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Forma de Pago</th>
                                            <th>Monto</th>
                                            <th>Número de Documento</th>
                                            <th>Plazo</th>
                                            <th>Período</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Billetes y Monedas</td>
                                            <td>$100.00</td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td><button class="btn btn-danger">X</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div> --}}
                        </div>
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal"><i class="fas fa-gift"></i>
                                Datos adicionales entrega</h5>
                        </div>
                        <div class="card-body fw-bold bg-light">
                            <div class="form-group row">
                                <div class="col-md-2">
                                    <label class="col-form-label" for="docuEntrega">No. Documento</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" placeholder="Responsable de emitir el documento"
                                        class="form-control" id="docuEntrega">
                                </div>
                                <div class="col-md-2">
                                    <label class="col-form-label" for="nombEntrega">Nombre</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" placeholder="Responsable de emitir el documento"
                                        class="form-control" id="nombEntrega">
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-2">
                                    <label class="col-form-label" for="docuRecibe">No. Documento</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" placeholder="Responsable de recibir el documento"
                                        class="form-control" id="docuRecibe">
                                </div>
                                <div class="col-md-2">
                                    <label class="col-form-label" for="nombRecibe">Nombre</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" placeholder="Responsable de recibir el documento"
                                        class="form-control" id="nombRecibe">
                                </div>
                            </div>
                        </div>
                        <div class="text-end">
                            <button class="btn btn-primary" id="generarDocumento">Generar Documento</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Producto o Servicio  -->
    <div class="modal modal-xl fade" id="aggitem" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aggitem">Ítem DTE</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="col-12 p-3">
                        <div class="card">
                            <div class="card-header bg-light">
                                Adición de detalle DTE
                            </div>
                            <div class="card-body bg-light">
                                <div class="row">
                                    <div class="col-1">
                                        <label for="tipoItem" class="form-label">Tipo:</label>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <select id="tipoItem" class="form-select">
                                                <option value="1" selected>1 - Bien</option>
                                                <option value="2">2 - Servicio</option>
                                                <option value="3">3 - Bien y Servicio</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="cantidad" class="form-label">Cantidad:</label>
                                            <input type="number" class="form-control" id="cantidad" value=""
                                                step="0.000001">
                                            <small class="form-text text-danger">Requerido.</small>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="unidad" class="form-label">Unidad:</label>
                                            <select id="unidad" class="form-select">
                                                <option value="">-- Seleccionar --</option>
                                                @foreach ($catalogos['CAT_014'] as $uni_medida)
                                                    <option value="{{ $uni_medida->codigo }}">
                                                        {{ $uni_medida->valores }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="producto" class="form-label">Producto:</label>
                                            <input type="text" class="form-control" id="producto" value="">
                                            <small class="form-text text-danger">Requerido.</small>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="tipoVenta" class="form-label">Tipo
                                                Venta:</label>
                                            <select id="tipoVenta" class="form-select">
                                                <option value="gravada" selected>Gravada</option>
                                                <option value="exenta">Exenta</option>
                                                <option value="noSujeta">No Sujeta</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="mb-3">
                                            <label for="precio" class="form-label">Precio (IVA Incluido):</label>
                                            <input type="number" class="form-control" id="precio" step="0.00001">
                                        </div>
                                    </div>

                                </div>
                                <div class="mb-3">
                                    <label class="form-label"><b>Información de los
                                            tributos:</b></label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <p class="form-label">Tributos que aplican a este producto:</p>
                                                @foreach ($tributos as $tributo)
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox"
                                                            value="{{ $tributo->codigo }}" id="{{ $tributo->codigo }}"
                                                            name="tributos[]" data-valor="{{ $tributo->valor }}"
                                                            data-porcentaje="{{ $tributo->es_porcentaje }}"
                                                            @if ($tributo->codigo == '20') checked disabled @endif>
                                                        <label class="form-check-label" for="{{ $tributo->codigo }}">
                                                            {{ $tributo->descripcion }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="col-md-6" id="tributosAplicados">

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3"></div>
                                    <div class="col-3"></div>
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="descuento" class="form-label">Descuento</label>
                                            <input type="text" class="form-control" id="descuento"
                                                placeholder="Descuento">
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="mb-3">
                                            <label for="total" class="form-label">Total:</label>
                                            <input type="text" class="form-control" id="total" value=""
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light d-flex justify-content-start">
                    <button type="button" class="btn btn-primary" id="agregar_item">Agregar
                        Ítem</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Agregar Descuento -->
    <div class="modal modal-xl fade" id="aggDescuentoModal" tabindex="-1" aria-labelledby="aggdescuento"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aggdescuento">Descuentos Generales al
                        Resumen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header bg-light">
                            <h5 class="card-title text-muted text-dark font-weight-normal">
                                Descuentos al total del documento</h5>
                        </div>
                        <div class="card-body bg-light">
                            <form action="#" method="get">
                                <div class="form-group">
                                    <label for="telefono">Ventas
                                        Gravadas:</label>
                                    <input type="text" class="form-control" id="descVentasGravadas" required
                                        placeholder="Número de ventas gravadas" value="0">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" id="guardarDescuento" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal DTE Fisico -->
    <div class="modal modal-lg fade" id="aggdteFis" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aggdteFis">Agregar DTE Físico</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal">
                                Relación Doc. Físico</h5>
                        </div>
                        <div class="card-body">
                            <form action="#" method="get">
                                <div class="form-group">
                                    <label for="tipdoc">Tipo de Documento:</label>
                                    <select class="form-select" id="tipdoc">
                                        <option value="remision">Nota de Remisón
                                        </option>
                                        <option value="comliquidacion">Comprobante
                                            de Liquidación</option>
                                        <option value="docliquidacion">Documento
                                            Contable de Liquidación</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="telefono">Número de
                                        Documento:</label>
                                    <input type="text" class="form-control" id="telefonoDoc" required
                                        placeholder="Número Doc.">
                                </div>
                                <label for="fechaDTE">Fecha de Generación:</label>
                                <input type="date" class="form-control" id="fechaDTE" required>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary">Guardar DTE</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal DTE Digital -->
    <div class="modal modal-lg fade" id="aggdteDig" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aggdteDig">Agregar DTE Digital</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title text-muted text-dark font-weight-normal">
                                Relación Doc. Digital</h5>
                        </div>
                        <div class="card-body">
                            <form action="#" method="get">
                                <div class="form-group">
                                    <label for="tipdoc">Tipo de Documento:</label>
                                    <select class="form-select" id="tipdoc">
                                        <option value="remision">Nota de Remisón
                                        </option>
                                        <option value="comliquidacion">Comprobante
                                            de Liquidación</option>
                                        <option value="docliquidacion">Documento
                                            Contable de Liquidación</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="telefono">Número de
                                        Documento:</label>
                                    <input type="text" class="form-control" id="telefonoDoc" required
                                        placeholder="Número Doc.">
                                </div>
                                <label for="fechaDTE">Fecha de Generación:</label>
                                <input type="date" class="form-control" id="fechaDTE" required>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary">Guardar DTE</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Otros Doc Asociados -->
    <div class="modal modal-lg fade" id="otrosdoc" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="otrosdoc">Información del Documento
                        Asociado
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="col-12 p-3">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title text-muted text-dark font-weight-normal">
                                    Datos generales del documento</h5>
                            </div>
                            <div class="card-body shadow bg-light">
                                <div class="form-group">
                                    <label for="otrosdoc">Documento
                                        Asociado:</label>
                                    <select class="form-control" id="otrosdoc">
                                        <option value="emisor2">Emisor</option>
                                        <option value="receptor2">Receptor</option>
                                        <option value="medico">Médico</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="telefono">Identificación del
                                        Documento:</label>
                                    <input type="text" class="form-control" id="otrosdoc" required
                                        placeholder="Identificación del nombre del documento asociado">
                                </div>
                                <div class="form-group">
                                    <label for="nombreComercial">Descripción del
                                        documento:</label>
                                    <input type="text" class="form-control" id="otrosdoc"
                                        placeholder="Descripción de datos importantes del documento asociado">
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Agregar</button>
                                    <button type="reset" class="btn btn-danger">Cancelar</button>
                                </div>
                                <!-- Parte selección médico
                                                                <div class="form-group">
                                                                    <label for="nombreComercial">Tipo de Servicio:</label>
                                                                    <select class="form-control" id="otrosdoc">
                                                                        <option value="cirugia">Cirugía</option>
                                                                        <option value="receptor2">Operación</option>
                                                                        <option value="medico">Tratamiento Médico</option>
                                                                        <option value="medico">Cirugía Instituto Salvadoreño de Bienestar Magisterial</option>
                                                                        <option value="medico">Cirugía Instituto Salvadoreño de Bienestar Magisterial</option>
                                                                        <option value="medico">Tratamiento Médico Instituo Salvadoreño de Bienestar Magisterial</option>
                                                                    </select>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="nombre">Nombre:</label>
                                                                    <input type="text" class="form-control" id="otrosdoc" required placeholder="Nombre del Médico">
                                                                </div>
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-sm-6">
                                                                            <label for="tiponit">Tipo de Documento:</label>
                                                                            <select class="form-control" id="tiponit">
                                                                                <option value="NIT">NIT</option>
                                                                                <option value="otro">Otro</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <label for="nit">NIT:</label>
                                                                            <input type="text" class="form-control" id="nit" required placeholder="Número documento de identificación">
                                                                        </div>
                                                                    </div>
                                                                </div> -->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary">Guardar DTE</button>
        </div>
    </div>

    <!-- Modal Producto Existente -->
    <div class="modal modal-xl fade" id="prodExistenteModal" tabindex="-1" aria-labelledby="prodExistenteModalLabel"
        aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="prodExistenteModalLabel">Seleccionar Producto</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <table id="tablaProds" class="table table-bordered table-striped table-hover w-100">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Código</th>
                                            <th>Descripción</th>
                                            <th>Precio</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <hr>
                            <div class="col-12 d-none" id="prodSeleccionado">
                                <div class="row">
                                    <div class="col-12">
                                        <p class="h4">Producto: <span id="prodDesc"></span></p>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="cantidadExistente" class="form-label">Cantidad:</label>
                                            <input type="number" class="form-control" id="cantidadExistente"
                                                value="" step="0.000001">
                                            <small class="form-text text-danger">Requerido.</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="tipoVentaExistente" class="form-label">Tipo
                                                Venta:</label>
                                            <select id="tipoVentaExistente" class="form-select">
                                                <option value="gravada" selected>Gravada</option>
                                                <option value="exenta">Exenta</option>
                                                <option value="noSujeta">No Sujeta</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="descuentoExistente" class="form-label">Descuento</label>
                                            <input type="number" class="form-control" id="descuentoExistente"
                                                placeholder="Descuento">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="totalExistente" class="form-label">Total</label>
                                            <input type="number" class="form-control" id="totalExistente"
                                                placeholder="Total" readonly>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-success" id="btnAgregarProd">Añadir Producto</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Cliente Existente -->
    <div class="modal modal-xl fade" id="clienteExistenteModal" tabindex="-1"
        aria-labelledby="clienteExistenteModalLabel" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="clienteExistenteModalLabel">Seleccionar Cliente</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <table id="tablaClientes" class="table table-bordered table-striped table-hover w-100">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Identificación</th>
                                            <th>Nombre</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="cerrarModalCliente"
                        data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
    @vite('resources/js/factura.js')
@endsection