@extends('admin.layout')
@section('styles')
    <style>
/* Contenedor del Autocomplete */
.ui-autocomplete {
    width: auto !important; /* Cambia de 100% a auto */
    min-width: 890px; /* Asegura que no sea muy pequeño */
    z-index: 1050 !important;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: absolute !important;
    overflow-y: auto;
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
    .ui-autocomplete {
        width: 100% !important; /* Que ocupe todo el ancho disponible */
        min-width: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Evita que se desborde */
.ui-menu {
    width: auto !important;
    max-width: 100% !important;
}

/* Establece un contenedor con posición relativa */
.autocomplete-wrapper {
    position: relative !important;
    display: inline-block;
    width: 100%;
}

/* Ajusta el input */
.input-barcode {
    width: 100% !important;
}


/* Asegura que el contenedor del input no afecte la posición */
.autocomplete-wrapper {
    position: relative; /* Contenedor padre relativo */
    width: 100%;
}

/* Elementos de la lista */
.ui-autocomplete .ui-menu-item {
    padding: 8px 12px; /* Espaciado interno */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa el texto del precio y stock */
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

/* Último elemento sin borde */
.ui-autocomplete .ui-menu-item:last-child {
    border-bottom: none;
}

.ui-autocomplete .ui-menu-item:hover {
    background: #b7eee3; /* Amarillo */
    color: black;
}

/* Código del producto */
.product-code {
    font-weight: bold;
    color: #007bff;
}

/* Nombre del producto */
.product-name {
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    margin-left: 8px;
}

/* Precio del producto */
.product-price {
    font-weight: bold;
    color: green;
    margin-left: auto; /* Empuja el stock a la derecha */
}

/* Stock del producto */
.product-stock {
    font-size: 12px;
    color: red;
    margin-left: 8px; /* Espaciado entre precio y stock */
}

    </style>
@endsection 
@section('content')
        
<header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
    <div class="container-xl px-4">
        <div class="page-header-content">
            <div class="row align-items-center justify-content-between pt-3">
                <div class="col-auto mb-3">
                    <h1 class="page-header-title">
                        <div class="page-header-icon"><i data-feather="shopping-cart"></i></div>
                        Punto de Venta
                    </h1>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="container-xl mt-4">
    <div class="row">
        <!-- Sección de búsqueda de productos -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">Resumen de productos</div>
                <div class="card-body">
                    <input type="hidden" name="idalmacenuser" value="{{ Auth::user()['idalmacen'] }}">
                    <input type="text" class="form-control input-barcode" id="search-product" placeholder="Escanea un código o busca por nombre">
                    <div class="table-responsive">
                        <table class="table table-sm mt-3">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th class="text-center" width="15%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Importe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                    <th class="text-center" width="20%">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cantidad&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                    <th class="text-center" width="15%">Subtotal</th>
                                    <th class="text-center" width="10%">Acción</th>
                                </tr>
                            </thead>
                            <tbody id="tbody_pos"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Resumen de venta -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-secondary text-white">Resumen de Venta</div>
                <div class="card-body">
                    <div id="wrapper-totals"></div>
                    <button class="btn btn-success w-100 mt-3" id="process-sale">Procesar Venta</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Confirmación de Venta -->
    <div class="modal fade" id="modalConfirmSale" tabindex="-1" aria-labelledby="modalConfirmSaleLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title text-white" id="modalConfirmSaleLabel"><i class="ri-shopping-cart-fill"></i> Confirmar Venta</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    
                    <!-- Selección de Cliente -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center">
                            <label for="select-client" class="form-label fw-bold me-2">Seleccionar Cliente</label>
                            <button type="button" class="btn btn-sm btn-info mb-2 btn-create-client-pos">
                                + Nuevo
                            </button>
                        </div>
                        <select id="select-client" class="form-select mt-1" name="dni_ruc"></select>
                    </div>

                    <!-- Métodos de Pago -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Método de Pago</label>
                        <div id="payment-methods">
                            <!-- Primer método de pago sin botón de eliminar -->
                            <div class="input-group mb-2">
                                <select class="form-select payment-method">
                                    <option value="">- Seleccione -</option>
                                    <!-- Métodos de pago dinámicos -->
                                </select>
                                <input type="number" class="form-control payment-amount" placeholder="Monto" min="0">
                            </div>
                        </div>
                        <button class="btn btn-outline-primary w-100" id="add-payment-method">
                            <i class="ri-add-line"></i> Agregar otro pago
                        </button>
                    </div>

                    <!-- Resumen de Totales -->
                    <div class="mt-3 p-3 rounded bg-light border">
                        <h5 class="fw-bold mb-3">Resumen</h5>

                        <div class="d-flex justify-content-between">
                            <span>Subtotal:</span>
                            <span class="fw-bold" id="subtotal"></span>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <span>IGV:</span>
                            <span class="fw-bold" id="igv"></span>
                        </div>
                        
                        <hr>

                        <div class="d-flex justify-content-between">
                            <h4 class="text-dark fw-bold">Total:</h4>
                            <h4 class="text-success fw-bold">
                                <span id="currency-sign"></span>
                                <span id="total"></span>
                            </h4>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-between">
                            <h5 class="text-dark fw-bold">Diferencia:</h5>
                            <h5 class="fw-bold text-danger" id="change-due">0.00</h5>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="confirm-sale">
                        <i class="ri-check-double-line"></i> Confirmar Venta
                    </button>
                </div>
            </div>
        </div>
    </div>

    @include('admin.clients.modal-register')
</div>
@endsection
@section('scripts')
    @include('admin.pos.js-home')
    @include('admin.clients.js-register')
@endsection