<div class="bg-white rounded shadow p-4">
    <h2 class="text-lg font-semibold mb-3">Pipeline interactivo</h2>
    <div class="grid grid-cols-5 gap-4" id="kanban">
        @foreach($states as $stateKey => $label)
            <div class="bg-gray-50 rounded p-3" data-state="{{ $stateKey }}">
                <h3 class="text-sm font-semibold mb-2">{{ $label }} ({{ count($ordersByState[$stateKey]) }})</h3>
                <div class="space-y-2 min-h-[100px] dropzone" ondragover="event.preventDefault()" ondrop="dropHandler(event, '{{ $stateKey }}')">
                    @foreach($ordersByState[$stateKey] as $op)
                        <div class="op-card bg-white rounded border p-2 shadow-sm" draggable="true" ondragstart="dragStart(event, {{ $op->id }})">
                            <div class="text-sm font-semibold">#{{ $op->numero_orden }} — {{ $op->prenda_modelo }}</div>

                            {{-- Barra de progreso --}}
                            <div class="mt-1 h-2 bg-gray-200 rounded overflow-hidden">
                                @php
                                    $pct = $op->cantidad_total ? round(($op->realizado / $op->cantidad_total) * 100) : 0;
                                    $pct = max(0, min(100, $pct));
                                @endphp
                                <div class="h-2 bg-green-500" style="width: {{ $pct }}%"></div>
                            </div>

                            <div class="text-xs text-gray-500 mt-2">
                                <strong>Cant:</strong> {{ $op->cantidad_total }} · <strong>Realizado:</strong> {{ $op->realizado }} ({{ $pct }}%) · <strong>Faltan:</strong> {{ $op->faltantes }}<br>

                                {{-- Desglose por etapas --}}
                                @php
                                    $confRec = $op->confeccions->whereNotNull('fecha_recepcion')->sum('cantidad_recibida');
                                    $tintRec = $op->tintorerias->whereNotNull('fecha_recepcion')->sum('cantidad_recibida');
                                    $acabRec = $op->procesosAcabado->whereNotNull('fecha_recepcion')->sum('cantidad_recibida');
                                @endphp
                                <span class="text-xs">Confección: {{ $confRec }} · Tintorería: {{ $tintRec }} · Acabados: {{ $acabRec }}</span><br>

                                Tela: {{ $op->tela?->codigo ?? '—' }} · Estado: <span class="inline-block px-2 py-0.5 rounded text-xs bg-gray-100">{{ \Illuminate\Support\Str::title(str_replace('_', ' ', $op->estado)) }}</span> · Entrega: {{ $op->fecha_entrega_estimada }}
                            </div>
                            <div class="mt-2 flex gap-2">
                                <a href="{{ route('filament.admin.resources.orden-produccions.edit', ['record' => $op->id]) }}" class="text-blue-600 text-sm">Ver</a>
                                <button class="text-sm px-2 py-1 bg-gray-100 rounded" onclick="quickAdvance({{ $op->id }})">Avanzar</button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

<script>
    let draggedId = null;
    function dragStart(e, id) {
        draggedId = id;
        e.dataTransfer.setData('text/plain', id);
    }

    async function dropHandler(e, targetState) {
        e.preventDefault();
        const id = draggedId || e.dataTransfer.getData('text/plain');
        if (!id) return;

        // POST to backend to change state
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        try {
            const res = await fetch("{{ url('/filament/ordenes') }}/" + id + '/change-state', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ state: targetState })
            });

            if (!res.ok) {
                const err = await res.json();
                alert(err.message || 'Error cambiando estado');
                return;
            }

            // reload widget area (simple full refresh)
            location.reload();
        } catch (err) {
            alert('Error de red');
            console.error(err);
        }
    }

    async function quickAdvance(id) {
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        try {
            const res = await fetch("{{ url('/filament/ordenes') }}/" + id + '/advance', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json'
                }
            });
            if (!res.ok) {
                const err = await res.json();
                alert(err.message || 'Error avanzando');
                return;
            }
            location.reload();
        } catch (err) {
            alert('Error de red');
            console.error(err);
        }
    }
</script>