@extends('layouts.app')
@section('title', 'Ventas')
@section('content')
<div class="container pb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold m-0 text-primary"><i class="bi bi-cart-plus"></i> Ventas</h3>
        <!-- <button class="btn btn-primary rounded-pill shadow-sm" onclick="setModalActivo('crear')" data-bs-toggle="modal" data-bs-target="#modalCrearVenta">
            <i class="bi bi-plus-lg"></i> Nueva
        </button> -->
        <a href="{{ route('ventas.create') }}" class="btn btn-primary rounded-pill shadow-sm">
    <i class="bi bi-plus-lg"></i> Nueva Venta
</a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show rounded-4" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-3">
        @foreach($ventas as $item)
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4 {{ $item->anulada == 'SI' ? 'bg-light text-muted' : '' }}">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div>
                            <span class="badge bg-secondary mb-1">Fecha: {{ $item->fecha }}</span>
                            <h5 class="fw-bold m-0 text-dark">{{ $item->clienteRel->denominacion ?? 'Cliente General' }}</h5>
                        </div>
                        <span class="fs-5 fw-bold text-success">Gs. {{ number_format($item->total_venta, 0, ',', '.') }}</span>
                    </div>

                    <div class="small text-secondary mb-2">
                        @foreach($item->detalles as $det)
                            <div><i class="bi bi-box-seam"></i> {{ $det->articulo->nombre ?? 'Artículo' }} (x{{ $det->cantidad }})</div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-between align-items-center pt-2 border-top small">
                        <span class="badge {{ $item->cobrada == 'SI' ? 'bg-success' : 'bg-warning text-dark' }}">
                            Cobrada: {{ $item->cobrada }}
                        </span>

                        <div class="d-flex gap-2">
                            @if($item->anulada != 'SI')
                                @php 
                                    // Preparamos los detalles en JSON para enviarlos a JavaScript
                                    $jsonDetalles = $item->detalles->map(function($d) {
                                        return [
                                            'idarticulo' => $d->idarticulo,
                                            'nombre' => $d->articulo->nombre,
                                            'cantidad' => $d->cantidad,
                                            'precio' => $d->precio,
                                            'costo' => $d->costo,
                                            'subtotal' => $d->subtotal
                                        ];
                                    })->toJson();
                                @endphp
                                
                                <button type="button" class="btn btn-outline-primary btn-sm rounded-circle p-2" 
                                    onclick="abrirModalEditar({{ $item->idventa }}, '{{ $item->fecha }}', '{{ $item->cliente }}', '{{ addslashes($item->observacion) }}', {{ $jsonDetalles }})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                
                                <form action="{{ route('ventas.destroy', $item->idventa) }}" method="POST" onsubmit="return confirm('¿Anular esta venta?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm rounded-circle p-2"><i class="bi bi-trash"></i></button>
                                </form>
                            @else
                                <span class="badge bg-danger">ANULADA</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- ================= MODALES ================= -->

<!-- 1. Modal CREAR Venta -->
<div class="modal fade" id="modalCrearVenta" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down">
    <div class="modal-content border-0 shadow">
        <div class="modal-header bg-primary text-white">
            <h1 class="modal-title fs-5"><i class="bi bi-cart-plus"></i> Nueva Venta</h1>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <form action="{{ route('ventas.store') }}" method="POST" onsubmit="return validarFormulario()">
            @csrf
            <div class="modal-body p-3">
                <!-- Cabecera Maestro -->
                <div class="row g-2 mb-3">
                    <div class="col-5 form-floating">
                        <input type="date" class="form-control" name="fecha" value="{{ date('Y-m-d') }}" required>
                        <label>Fecha</label>
                    </div>
                    <div class="col-7 form-floating">
                        <select class="form-select" name="cliente" required>
                            <option value="">Seleccione...</option>
                            @foreach($clientes as $cli)
                                <option value="{{ $cli->idcliente }}">{{ $cli->denominacion }}</option>
                            @endforeach
                        </select>
                        <label>Cliente</label>
                    </div>
                </div>

                <!-- Zona de Agregar Artículos -->
                <div class="p-3 bg-light border rounded-3 mb-3">
                    <h6 class="fw-bold mb-2 text-primary">Detalles de Venta</h6>
                    <div class="form-floating mb-2">
                        <select class="form-select" id="crear_articulo" onchange="cargarPrecio(this)">
                            <option value="">Seleccione artículo...</option>
                            @foreach($articulos as $art)
                                <option value="{{ $art->idarticulo }}" data-precio="{{ $art->precio }}" data-costo="{{ $art->costo }}">{{ $art->nombre }} (St: {{ $art->stock }})</option>
                            @endforeach
                        </select>
                        <label>Seleccionar Artículo</label>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-4 form-floating">
                            <input type="number" class="form-control" id="crear_cantidad" value="1" min="1">
                            <label>Cant.</label>
                        </div>
                        <div class="col-8 form-floating">
                            <input type="number" class="form-control" id="crear_precio" placeholder="0">
                            <label>Precio Unit.</label>
                        </div>
                    </div>
                    <input type="hidden" id="crear_costo" value="0">
                    <input type="hidden" id="crear_nombre_art" value="">
                    
                    <button type="button" class="btn btn-secondary btn-sm w-100" onclick="agregarArticulo()">
                        <i class="bi bi-plus-circle"></i> Agregar a la lista
                    </button>
                </div>

                <!-- Tabla de Artículos Agregados -->
                <div class="table-responsive mb-2">
                    <table class="table table-sm align-middle table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>Art.</th>
                                <th class="text-center">Cant</th>
                                <th class="text-end">Subt</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="crear_tbody">
                            <!-- Los artículos se agregarán aquí vía JS -->
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 bg-white p-2 rounded border">
                    <span class="text-muted fw-bold">TOTAL Gs.</span>
                    <h5 class="fw-bold m-0 text-success" id="crear_total_lbl">0</h5>
                </div>

                <div class="form-floating mb-2">
                    <textarea class="form-control" name="observacion" placeholder="..." style="height: 60px"></textarea>
                    <label>Observación (Opcional)</label>
                </div>
            </div>
            <div class="modal-footer border-0 pb-4 pe-4 bg-light">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary rounded-pill px-4"><i class="bi bi-check2-circle"></i> Guardar Venta</button>
            </div>
        </form>
    </div>
    </div>
</div>

<!-- 2. Modal EDITAR Venta -->
<div class="modal fade" id="modalEditarVenta" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down">
    <div class="modal-content border-0 shadow">
        <div class="modal-header bg-warning">
            <h1 class="modal-title fs-5 text-dark"><i class="bi bi-pencil-square"></i> Editar Venta</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form id="formEditarVenta" method="POST" onsubmit="return validarFormulario()">
            @csrf
            @method('PUT')
            <div class="modal-body p-3">
                <div class="row g-2 mb-3">
                    <div class="col-5 form-floating">
                        <input type="date" class="form-control" id="edit_fecha" name="fecha" required>
                        <label>Fecha</label>
                    </div>
                    <div class="col-7 form-floating">
                        <select class="form-select" id="edit_cliente" name="cliente" required>
                            @foreach($clientes as $cli)
                                <option value="{{ $cli->idcliente }}">{{ $cli->denominacion }}</option>
                            @endforeach
                        </select>
                        <label>Cliente</label>
                    </div>
                </div>

                <!-- Zona de Agregar Artículos (Edición) -->
                <div class="p-3 bg-light border rounded-3 mb-3">
                    <div class="form-floating mb-2">
                        <select class="form-select" id="edit_articulo" onchange="cargarPrecio(this)">
                            <option value="">Añadir artículo...</option>
                            @foreach($articulos as $art)
                                <option value="{{ $art->idarticulo }}" data-precio="{{ $art->precio }}" data-costo="{{ $art->costo }}">{{ $art->nombre }}</option>
                            @endforeach
                        </select>
                        <label>Seleccionar Artículo</label>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-4 form-floating">
                            <input type="number" class="form-control" id="edit_cantidad" value="1" min="1">
                            <label>Cant.</label>
                        </div>
                        <div class="col-8 form-floating">
                            <input type="number" class="form-control" id="edit_precio" placeholder="0">
                            <label>Precio Unit.</label>
                        </div>
                    </div>
                    <input type="hidden" id="edit_costo" value="0">
                    <input type="hidden" id="edit_nombre_art" value="">
                    
                    <button type="button" class="btn btn-secondary btn-sm w-100" onclick="agregarArticulo()">
                        <i class="bi bi-plus-circle"></i> Añadir
                    </button>
                </div>

                <div class="table-responsive mb-2">
                    <table class="table table-sm align-middle table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>Art.</th>
                                <th class="text-center">Cant</th>
                                <th class="text-end">Subt</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="edit_tbody">
                            <!-- Datos inyectados vía JS -->
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 bg-white p-2 rounded border">
                    <span class="text-muted fw-bold">TOTAL Gs.</span>
                    <h5 class="fw-bold m-0 text-success" id="edit_total_lbl">0</h5>
                </div>

                <div class="form-floating mb-2">
                    <textarea class="form-control" id="edit_observacion" name="observacion" style="height: 60px"></textarea>
                    <label>Observación</label>
                </div>
            </div>
            <div class="modal-footer border-0 pb-4 pe-4 bg-light">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-warning fw-bold rounded-pill px-4"><i class="bi bi-arrow-repeat"></i> Actualizar</button>
            </div>
        </form>
    </div>
    </div>
</div>

<script>
    let detalles = [];
    let modalActivo = 'crear'; 

    function setModalActivo(modal) {
        modalActivo = modal;
        detalles = [];
        actualizarTabla();
    }

    function cargarPrecio(select) {
        let option = select.options[select.selectedIndex];
        let prefix = modalActivo === 'crear' ? 'crear_' : 'edit_';
        
        document.getElementById(prefix + 'precio').value = option.getAttribute('data-precio') || 0;
        document.getElementById(prefix + 'costo').value = option.getAttribute('data-costo') || 0;
        document.getElementById(prefix + 'nombre_art').value = option.text;
    }

    function agregarArticulo() {
        let prefix = modalActivo === 'crear' ? 'crear_' : 'edit_';
        
        let select = document.getElementById(prefix + 'articulo');
        let idart = select.value;
        let nombreCompleto = document.getElementById(prefix + 'nombre_art').value;
        let cant = parseInt(document.getElementById(prefix + 'cantidad').value);
        let precio = parseInt(document.getElementById(prefix + 'precio').value);
        let costo = parseInt(document.getElementById(prefix + 'costo').value);

        if (!idart || isNaN(cant) || cant <= 0 || isNaN(precio)) {
            alert("Por favor, seleccione un artículo e ingrese valores válidos.");
            return;
        }

        // Limpiar el nombre visual ("(Stock: X)" lo quitamos)
        let nombreLimpio = nombreCompleto.split(' (St')[0];

        detalles.push({
            idarticulo: idart,
            nombre: nombreLimpio,
            cantidad: cant,
            precio: precio,
            costo: costo,
            subtotal: cant * precio
        });

        actualizarTabla();

        // Limpiar inputs
        select.value = '';
        document.getElementById(prefix + 'cantidad').value = '1';
        document.getElementById(prefix + 'precio').value = '';
        document.getElementById(prefix + 'costo').value = '';
    }

    function actualizarTabla() {
        let prefix = modalActivo === 'crear' ? 'crear_' : 'edit_';
        let tbody = document.getElementById(prefix + 'tbody');
        let lblTotal = document.getElementById(prefix + 'total_lbl');
        
        tbody.innerHTML = '';
        let total = 0;

        detalles.forEach((det, index) => {
            total += det.subtotal;
            let tr = `
                <tr>
                    <td class="small text-truncate" style="max-width: 120px;">
                        ${det.nombre}
                        <input type="hidden" name="idarticulo[]" value="${det.idarticulo}">
                        <input type="hidden" name="cantidad[]" value="${det.cantidad}">
                        <input type="hidden" name="precio[]" value="${det.precio}">
                        <input type="hidden" name="costo[]" value="${det.costo}">
                    </td>
                    <td class="text-center">${det.cantidad}</td>
                    <td class="text-end">${det.subtotal.toLocaleString('es-PY')}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm text-danger p-0" onclick="eliminarArticulo(${index})">
                            <i class="bi bi-x-circle fs-5"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.insertAdjacentHTML('beforeend', tr);
        });

        lblTotal.innerText = total.toLocaleString('es-PY');
    }

    function eliminarArticulo(index) {
        detalles.splice(index, 1);
        actualizarTabla();
    }

    function validarFormulario() {
        if (detalles.length === 0) {
            alert("Debe agregar al menos un artículo a la lista para procesar la venta.");
            return false; // Detiene el envío
        }
        return true;
    }

    // Adaptado para recibir el JSON de detalles e inyectarlo en la vista
    function abrirModalEditar(id, fecha, cliente, observacion, detallesJSON) {
        modalActivo = 'editar';
        document.getElementById('edit_fecha').value = fecha;
        document.getElementById('edit_cliente').value = cliente;
        document.getElementById('edit_observacion').value = observacion;
        
        let urlBase = "{{ url('/ventas') }}"; 
        document.getElementById('formEditarVenta').action = urlBase + '/' + id;
        
        // Cargamos los artículos existentes en el array de JS
        detalles = detallesJSON;
        actualizarTabla();
        
        new bootstrap.Modal(document.getElementById('modalEditarVenta')).show();
    }
</script>
@endsection