@props([
    'data' => null,
    'config' => []
])

<div
    x-data="total({
           initial: {
            subtotal: {{ $data['subtotal'] ?? 0 }},
            descuento: {{ $data['descuento'] ?? 0 }},
            iva: {{ $data['iva'] ?? 0 }},
            total: {{ $data['total'] ?? 0 }},
        },
        config: @js($config)
    })" 
    @update-items.window="actualizarTotales($event.detail)"
>
    <x-ui.card class="mt-4">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Detalle de Totales</h3>
        
        <div class="space-y-3">
            {{-- Subtotal --}}
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Subtotal:</span>
                <span class="text-gray-800 text-lg" 
                      x-text="subtotalFormateado"></span>
            </div>
            
            {{-- Descuento --}}
            <div class="flex justify-between items-center">
                <span class="text-gray-600">Descuento Total:</span>
                <span class="text-gray-800" 
                      x-text="descuentoTotalFormateado"></span>
            </div>
            
            {{-- IVA --}}
            <div class="flex justify-between items-center">
                <span class="text-gray-600">IVA (19%):</span>
                <span class="text-gray-800" 
                      x-text="ivaFormateado"></span>
            </div>
            
            {{-- Total --}}
            <div class="flex justify-between items-center pt-3 border-t">
                <span class="text-gray-800 font-bold">Total:</span>
                <span class="text-2xl text-gray-900" 
                      x-text="totalFormateado"></span>
            </div>
        </div>
</x-ui.card>

<script>
function total({ initial = null, config = {} }) {
    return {
        itemsRecibidos: [],

        // Configuración de campos
        fields: {
            precio: config.precio ?? 'precio',
            cantidad: config.cantidad ?? 'cantidad',
            descuento: config.descuento ?? 'descuento',
            iva: config.iva ?? 'iva',
        },

        subtotal: initial?.subtotal ?? 0,
        descuentoTotal: initial?.descuento ?? 0,
        iva: initial?.iva ?? 0,
        total: initial?.total ?? 0,

        subtotalFormateado: '$0.00',
        descuentoTotalFormateado: '$0.00',
        ivaFormateado: '$0.00',
        totalFormateado: '$0.00',

        init() {
            this.formatearValores();
        },

        actualizarTotales(items) {
            this.itemsRecibidos = items;
            this.calcularTotales();
        },

        calcularTotales() {
            if (!this.itemsRecibidos.length) {
                this.resetearTotales();
                return;
            }

            let subtotal = 0;
            let descuentoTotal = 0;
            let ivaTotal = 0;

            this.itemsRecibidos.forEach(item => {
                const precio = parseFloat(item[this.fields.precio]) || 0;
                const cantidad = parseFloat(item[this.fields.cantidad]) || 0;
                const descuentoPct = parseFloat(item[this.fields.descuento]) || 0;
                const ivaPct = parseFloat(item[this.fields.iva]) || 0;

                const bruto = precio * cantidad;
                const descuento = bruto * (descuentoPct / 100);
                const base = bruto - descuento;
                const iva = base * (ivaPct / 100);

                subtotal += bruto;
                descuentoTotal += descuento;
                ivaTotal += iva;
            });

            this.subtotal = subtotal;
            this.descuentoTotal = descuentoTotal;
            this.iva = ivaTotal;
            this.total = (subtotal - descuentoTotal) + ivaTotal;

            this.formatearValores();
        },

        resetearTotales() {
            this.subtotal = 0;
            this.descuentoTotal = 0;
            this.iva = 0;
            this.total = 0;
            this.formatearValores();
        },

        formatearValores() {
            this.subtotalFormateado = this.f(this.subtotal);
            this.descuentoTotalFormateado = this.f(this.descuentoTotal);
            this.ivaFormateado = this.f(this.iva);
            this.totalFormateado = this.f(this.total);
        },

        f(valor) {
            const v = Math.round(valor * 100) / 100;
            return `$${v.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
        }
    }
}
</script>