<style>
    /* Select2 con bordes redondeados de Bootstrap 5 */
    .select2-container .select2-selection {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        height: calc(2.25rem + 2px);
        padding: 0.375rem 0.75rem;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        color: #495057;
        line-height: 1.5;
    }

    .select2-container .select2-selection--single {
        background-color: #fff;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: calc(2.25rem + 2px);
    }

    .select2-container .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.375rem 0.75rem;
        height: auto;
    }
    .select2-container  {
  z-index: 1050 !important; /* Asegura que esté por encima de otros elementos */
}
</style>

<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="row">
						<div class="col-xl-12">
							<div class="mt-4 bg-gray">
    <div id="divForm">
        <div class="card">
            <h2 class="text-center card-header bg-dark text-white">Orden de Compra</h2>
            <div class="card-body">

                <!-- Encabezado -->
                <div class="row mt-4">
                    <div class="col-md-3">
                        <label for="dia" class="form-label flatpickr-human">Fecha Pedido</label>
                       <input type="text" class="form-control flatpickr-minimum flatpickr-input form-control-sm" id="date" placeholder="Select date.." readonly="readonly">
                       <span></span>
                    </div>
                    <div class="col-md-5">
                        <label for="mes" class="form-label">Vendedor</label>
                        <input type="hidden" id="vendedor" value="<?php echo e($vendedores[0]->id); ?>">
                        <input type="hidden" id="rol" value="<?php echo e(Auth::user()->id_rol); ?>">
                        <input type="text" class="form-control form-control-sm" placeholder="Vendedor" value="<?php echo e($vendedores[0]->vendedor); ?>" readonly>
                        <span></span>
                    </div>
                    <div class="col-md-4">
                        <label id="tipoVenta" class="form-label">Tipo/Venta</label>
                        <span></span>
                        <br>
                        <!-- radio buttons -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input rbtn-orange" type="radio" name="tipoVenta" id="contado"
                                value="contado">
                            <label class="form-check-label" for="contado">Contado</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="tipoVenta" id="credito" value="credito">
                            <label class="form-check-label" for="credito">Credito</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-4">
            <div class="card-body">
                <div class="row mt-4">
                    <div class="col-md-4">
                        <label for="ddlClientes" class="form-label">Clientes</label>
                        <select name="" class="form-select form-control-select-sm choices-single" id="ddlClientes">
                            <option value="" disabled selected>Seleccionar</option>
                        </select>
                        <span></span>
                    </div>
                    <div class="col-md-3">
                        <label for="cod" class="form-label">Código</label>
                        <input type="text" id="codigo" class="form-control form-control-sm" placeholder="Código">
                        <span></span>
                    </div>
                    <div class="col-md-3">
                        <label for="numero" class="form-label">Tel: Cliente</label>
                        <input type="text" id="telefono" class="form-control form-control-sm" placeholder="Número">
                        <span></span>
                    </div>
                </div>

                <!-- Información del cliente -->
                <div class="row mt-2">
                    <div class="col-md-4">
                        <label for="nombreComercial" class="form-label">Nombre Comercial</label>
                        <input type="text" id="nombreComercial" class="form-control form-control-sm"
                            placeholder="Nombre Comercial">
                            <span></span>
                    </div>
                    <div class="col-md-4">
                        <label for="dueno" class="form-label">Dueño</label>
                        <input type="text" id="dueno" class="form-control form-control-sm" placeholder="Dueño">
                        <span></span>
                    </div>
                    <div class="col-md-4">
                        <label for="tipo" class="form-label">Tipo Cliente</label>
                        <input type="text" id="tipo" class="form-control form-control-sm" placeholder="Dueño">
                        <span></span>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-3">
                        <label for="ddlDepartamento" class="form-label">Departamento</label>
                        <select name="" class="form-select form-control-select-sm choices-single" id="ddlDepartamento">
                            <option value="" disabled selected>Seleccionar</option>
                        </select>
                        <span></span>
                    </div>
                    <div class="col-md-3">
                        <label for="ddlMunicipios" class="form-label">Municipio</label>
                        <select name="" class="form-select form-control-select-sm choices-single" id="ddlMunicipios">
                            <option value="" disabled selected>Seleccionar</option>
                        </select>
                        <span></span>
                    </div>
                    <div class="col-md-6">
                        <label for="datos_adicionales" class="form-label">Datos Adicionales:</label>
                        <textarea name="" class="form-control form-control-sm" id="datos_adicionales"></textarea>
                        <span></span>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <label for="direccion" class="form-label">Dirección</label>
                        <textarea name="" class="form-control form-control-sm" id="direccion"></textarea>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="divProductos" class="card mt-4">
        <div class="card-body">
            <div class="row mt-2">
                <div class="col-md-4">
                    <label for="ddlListaPrecios" class="form-label">Lista de Precios</label>
                    <select name="" class="form-control choices-productos" id="ddlListaPrecios" style="width: 100%;">
                        <option value="" disabled selected>Seleccionar</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="ddlproductos" class="form-label">Productos</label>
                    <select name="" class="form-control choices-productos" id="ddlproductos" style="width: 100%;">
                        <option value="" disabled selected>Seleccionar</option>
                    </select>
                    <input type="hidden" id="prodPrecio" value="">
                </div>
                <div class="col-md-4 col-sm-12 col-xs-12">
                    <label for="cantidad" class="form-label">Cantidad</label>
                    <div class="input-group">
                        <input type="number" min="1" class="form-control" id="cantidad" placeholder="cantidad">
                        <button id="btnInertProd" class="btn btn-dark" type="button"><i class="align-middle me-1"
                                data-feather="shopping-cart"></i>
                            Insertar</button>
                    </div>
                    
                </div>
            </div>
            <div class="row mt-1">
                <div class="col-md-3">
                    <label class="form-label">Aplica Descuento?</label>
                    <br>
                    <!-- radio buttons -->
                    <div class="form-check form-check-inline">
                        <input class="form-check-input rbtn-orange" type="radio" name="descuentoCheck" id="conDescuento" value="si">
                        <label class="form-check-label" for="conDescuento">Si</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="descuentoCheck" id="sinDescuento" value="no">
                        <label class="form-check-label" for="sinDescuento">No</label>
                    </div>
                </div>
                <div class="col-md-3 col-sm-12 col-xs-12">
                    <label for="descuento" class="form-label">% Descuento</label>
                    <input type="number" min="0" id="descuentoValue" class="form-control form-control-sm" placeholder="Número">
                </div>
            </div>

            <!-- Tabla de productos -->
            <div class="table-responsive mt-4" style="max-height: 210px; overflow-y: auto;">
                <table class="table table-striped mb-0 table-sm" id="tblProductos">
                    <thead>
                        <tr class="text-center">
                            <th>Cantidad</th>
                            <th>Código</th>
                            <th>Descripción</th>
                            <th>UM</th>
                            <th>PU</th>
                            <th>IVA (15%)</th>
                            <th>Descuento</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="clonParent">
                        
                    </tbody>
                </table>
            </div>

            <!-- Totales -->
            <div class="row mt-3 text-end">
                <div class="col"></div>
                    <div class="col-auto ms-0">
                        <!-- <label for="subtotal" class="form-label">Subtotal</label>
                        <input type="number" id="subtotal" class="form-control" placeholder="Subtotal" step="0.01"> -->
                        <!-- <input type="number" id="iva" class="form-control" placeholder="IVA" step="0.01">
                        <input type="number" id="totalFinal" class="form-control" placeholder="Total Final" step="0.01"> -->
                        <table>
                            <tr>
                                <th><label for="subtotal" class="form-label form-label-sm text-end">Subtotal </label></th>
                                <th></th>
                                <th></th>
                                <th colspan="2">
                                    <input type="number" disabled id="subtotal" class="form-control form-control-sm text-end" placeholder="0" step="0.01">
                                </th>
                            </tr>
                            <tr>
                                <th><label for="iva" class="form-label form-label-sm">IVA </label></th>
                                <th></th>
                                <th></th>
                                <th colspan="3">
                                    <input type="number" disabled id="iva" class="form-control form-control-sm text-end" placeholder="0" step="0.01">
                                </th>
                            </tr>
                            <tr>
                                <th><label for="descuento" class="form-label">Descuento</label></th>
                                <th></th>
                                <th></th>
                                <th colspan="2" class="left"> <input type="number" disabled id="descuento" class="form-control form-control-sm text-end" placeholder="0" step="0.01"></th>
                            </tr>
                            <tr>
                                <th><label for="Total" class="form-label form-label-sm">Total </label></th>
                                <th></th>
                                <th></th>
                                <th colspan="2">
                                    <input type="number" disabled id="Total" class="form-control form-control-sm text-end" placeholder="0" step="0.01">
                                </th>
                            </tr>
                        </table>
                    </div>
                </div>


            <!-- Botón Guardar -->
            <div class="col mt-3">
                <button id="btnGuardarProforma" class="btn btn-dark">
                   <i class="align-middle me-1" data-feather="save"></i>
                    Crear Orden de Compra</button>
            </div>
        </div>
    </div>
    </div>
</div>
</div>

<script>
    const api_productos = "<?php echo e(route('obtenerProductos')); ?>";
    const api_listas = "<?php echo e(route('obtenerListas')); ?>";
    const api_departamentos = "<?php echo e(route('obtenerDepartamentos')); ?>";
    const api_municipios = "<?php echo e(route('obtenerMunicipios')); ?>";
    const api_guardar = "<?php echo e(route('guardarOrdenCompra')); ?>";
    const api_get_clientes = "<?php echo e(route('obtenerClientes')); ?>";

    function openPDF(id_orden) {
         let api_pdf = `<?php echo e(route('proformas.generarPDF', ':id_orden')); ?>`;
        api_pdf = api_pdf.replace(':id_orden', id_orden);
        let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-500,top=-500`;
        var newWindow = open(api_pdf, 'PDF', params);
        // setTimeout(function () {
        //     newWindow.close();
        // }, 3000);
    }
</script>
<script type="module" src="<?php echo e(asset("/js/custom/orden_compra.js")); ?>"></script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\xampp\htdocs\proforma_app\resources\views/orden_compra/index.blade.php ENDPATH**/ ?>