@extends('layouts/app')
@section('tituloModulo', 'PUNTO DE VENTA')
@section('contenido')
<div class="card">
    <div class="card-body">
        <!-- Formulario para agregar productos -->
        <form action="{{ route('punto.venta.agregar') }}" method="POST">
            @csrf
            <div class="row g-3 align-items-center mt-2">
                <!-- Selector de Productos -->
                <div class="col-md-5 col-12">
                    <label for="producto" class="form-label fw-bold text-primary">Productos</label>
                    <select class="form-select" id="producto" name="producto" required>
                        <option value="">Selecciona un producto</option>
                        @foreach ($productos as $producto)
                            <option value="{{ $producto->codigo_prod }}">{{ $producto->nombre_prod }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Campo de Cantidad -->
                <div class="col-md-3 col-12">
                    <label for="cantidad" class="form-label fw-bold text-primary">Cantidad</label>
                    <input type="number" class="form-control" id="cantidad" name="cantidad" required>
                </div>
                <!-- Botón de Agregar -->
                <div class="col-md-2 col-12">
                    <button type="submit" class="btn btn-success mt-4 w-100">
                        <i class="fa-solid fa-cart-plus me-2"></i> Agregar
                    </button>
                </div>
                <!-- Botón de Completar Venta -->
                <div class="col-md-2 col-12">
                    <button type="button" class="btn btn-primary mt-4 w-100" data-bs-toggle="modal" data-bs-target="#completarVentaModal">
                        <i class="fa-solid fa-check me-2"></i> Completar
                    </button>
                </div>
            </div>
        </form>
        <!-- Tabla de productos en el carrito -->
        <div class="mt-4">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>PRODUCTO</th>
                        <th>CANTIDAD</th>
                        <th>PRECIO UNITARIO</th>
                        <th>TOTAL</th>
                        <th>ACCIONES</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($listaProductos as $token => $item)
                        <tr>
                            <td>{{ $item['nombreProduct'] }}</td>
                            <td>
                                <input type="number" class="form-control cantidad-input" data-token="{{ $token }}" value="{{ $item['cantidad'] }}" min="1">
                            </td>
                            <td>${{ number_format($item['costo'], 2) }}</td>
                            <td>${{ number_format($item['total'], 2) }}</td>
                            <td>
                                <button class="btn btn-danger btn-sm eliminar-producto" data-token="{{ $token }}">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- Mostrar el total de productos y el total a pagar -->
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Resumen del Carrito</h5>
                <p class="card-text">
                    <strong>Total de Productos:</strong> {{ count($listaProductos) }}
                </p>
                <p class="card-text">
                    <strong>Total a Pagar:</strong> ${{ number_format($totalAPagar, 2) }}
                </p>
            </div>
        </div>
    </div>
</div>
<!-- Modal para completar la venta -->
<div class="modal fade" id="completarVentaModal" tabindex="-1" aria-labelledby="completarVentaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="completarVentaModalLabel">Completar Venta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="completarVentaForm" action="{{ route('punto.venta.cerrarVenta') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="tipo_pago" class="form-label">Tipo de Pago</label>
                        <select class="form-select" id="tipo_pago" name="tipo_pago" required>
                            <option value="efectivo">Efectivo</option>
                            <option value="tarjeta">Tarjeta</option>
                            <option value="transferencia">Transferencia</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="nombre_cliente" class="form-label">Nombre del Cliente</label>
                        <input type="text" class="form-control" id="nombre_cliente" name="nombre_cliente">
                    </div>
                    <div class="mb-3">
                        <label for="correo_cliente" class="form-label">Correo del Cliente</label>
                        <input type="email" class="form-control" id="correo_cliente" name="correo_cliente">
                    </div>
                    <div class="mb-3">
                        <label for="iva" class="form-label">Llevará IVA</label>
                        <select class="form-select" aria-label="Default select example" id="iva" name="iva" required>
                            <option value="No">No</option>
                            <option value="Si">Si</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" form="completarVentaForm" class="btn btn-primary">Finalizar Venta</button>
            </div>
        </div>
    </div>
</div>
<!-- Scripts para manejar la interacción -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Actualizar cantidad de productos
        $('.cantidad-input').on('change', function() {
            const token = $(this).data('token');
            const cantidad = $(this).val();
            if (cantidad < 1) {
                alert('La cantidad debe ser al menos 1');
                return;
            }
            window.location.href = `/puntoventa/actualizar/${token}/${cantidad}`;
        });

        // Eliminar producto del carrito
        $('.eliminar-producto').on('click', function() {
            const token = $(this).data('token');
            Swal.fire({
                title: '¿Estás seguro?',
                text: "¡No podrás revertir esta acción!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Redirigir para eliminar el producto
                    window.location.href = `/puntoventa/eliminar/${token}`;
                }
            });
        });
    });
</script>
@endsection