@extends('main')

@section('content')

@php
    $stages = [
        [
            'name' => 'Entrada',
            'color' => 'bg-blue-100 text-blue-600',
            'processes' => [
                ['id'=>2001,'company'=>'TransLog','title'=>'Erro XML NF-e','sector'=>'Operacional','responsible'=>'João','sla'=>true],
                ['id'=>2002,'company'=>'Rodocargas','title'=>'Cadastro cliente bloqueado','sector'=>'Comercial','responsible'=>'Maria','sla'=>false],
            ]
        ],
        [
            'name' => 'Análise',
            'color' => 'bg-yellow-100 text-yellow-600',
            'processes' => [
                ['id'=>2003,'company'=>'LogMais','title'=>'Divergência de CTe','sector'=>'Financeiro','responsible'=>'Carlos','sla'=>true],
            ]
        ],
        [
            'name' => 'Execução',
            'color' => 'bg-purple-100 text-purple-600',
            'processes' => [
                ['id'=>2004,'company'=>'CargaPesada','title'=>'Integração API falhando','sector'=>'TI','responsible'=>'Ana','sla'=>false],
                ['id'=>2005,'company'=>'TransBrasil','title'=>'Erro cálculo frete','sector'=>'TI','responsible'=>'Bruno','sla'=>true],
            ]
        ],
        [
            'name' => 'Finalização',
            'color' => 'bg-green-100 text-green-600',
            'processes' => [
                ['id'=>2006,'company'=>'Distribuidora Sul','title'=>'Homologação concluída','sector'=>'Suporte','responsible'=>'Paula','sla'=>false],
            ]
        ],
    ];

    $myTasks = [
        ['title'=>'Validar XML NF-e','process_id'=>2001,'stage'=>'Entrada'],
        ['title'=>'Corrigir cálculo frete','process_id'=>2005,'stage'=>'Execução'],
    ];
@endphp





<div class="p-8 bg-gray-100 min-h-screen space-y-8">



    {{-- MODAL --}}
<div id="modal" class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50">

    <div class="bg-white w-full max-w-lg rounded-2xl shadow-xl p-6 space-y-4">

        <div class="flex justify-between items-center">
            <h2 class="text-lg font-bold text-[#172554]">Novo Processo</h2>
            <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">✕</button>
        </div>

        <div class="space-y-4">

            <input id="m_company" type="text" placeholder="Empresa"
                class="w-full border rounded-lg px-3 py-2 text-sm">

            <input id="m_title" type="text" placeholder="Título do problema"
                class="w-full border rounded-lg px-3 py-2 text-sm">

            <select id="m_stage" class="w-full border rounded-lg px-3 py-2 text-sm">
                <option value="Entrada">Entrada</option>
                <option value="Análise">Análise</option>
                <option value="Execução">Execução</option>
                <option value="Finalização">Finalização</option>
            </select>

            <select id="m_sector" class="w-full border rounded-lg px-3 py-2 text-sm">
                <option>Operacional</option>
                <option>Comercial</option>
                <option>Financeiro</option>
                <option>TI</option>
                <option>Suporte</option>
            </select>

            <input id="m_responsible" type="text" placeholder="Responsável"
                class="w-full border rounded-lg px-3 py-2 text-sm">

            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" id="m_sla">
                SLA em risco
            </label>

        </div>

        <div class="flex justify-end gap-3 pt-4">
            <button onclick="closeModal()" class="px-4 py-2 text-sm">
                Cancelar
            </button>

            <button onclick="createProcess()"
                class="bg-[#E55133] text-white px-4 py-2 rounded-xl text-sm">
                Criar Processo
            </button>
        </div>

    </div>

</div>


    {{-- HEADER --}}
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-[#172554]">
                Pipeline Operacional
            </h1>
            <p class="text-sm text-gray-500">
                Fluxo entre setores • visão em tempo real • padrão único
            </p>
        </div>

        <div class="bg-white px-4 py-2 rounded-xl shadow text-sm border">
           <button onclick="openModal()"
                class="bg-[#E55133] text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:opacity-90 shadow">
                + Novo Processo
            </button>

        </div>
    </div>

    {{-- KPIs --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">

        <div class="bg-white rounded-2xl p-6 shadow border-l-4 border-[#172554]">
            <p class="text-xs text-gray-400 uppercase">Processos Ativos</p>
            <h2 class="text-3xl font-bold mt-3">14</h2>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow border-l-4 border-red-500">
            <p class="text-xs text-gray-400 uppercase">Gargalos</p>
            <h2 class="text-3xl font-bold text-red-500 mt-3">4</h2>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow border-l-4 border-yellow-400">
            <p class="text-xs text-gray-400 uppercase">SLA em risco</p>
            <h2 class="text-3xl font-bold text-yellow-500 mt-3">3</h2>
        </div>

        <div class="bg-white rounded-2xl p-6 shadow border-l-4 border-green-500">
            <p class="text-xs text-gray-400 uppercase">Finalizados hoje</p>
            <h2 class="text-3xl font-bold text-green-600 mt-3">6</h2>
        </div>

    </div>

    {{-- KANBAN --}}
    <div class="bg-white rounded-2xl p-6 shadow">

        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-6">
            Workflow por Etapas
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">

            @foreach($stages as $stage)
            <div 
                class="bg-gray-50 rounded-xl p-4 border min-h-[500px]"
                data-stage="{{ $stage['name'] }}"
            >

                <div class="flex justify-between items-center mb-4">
                    <h4 class="text-sm font-bold text-gray-700">
                        {{ $stage['name'] }}
                    </h4>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">
                        {{ count($stage['processes']) }}
                    </span>
                </div>

                <div class="space-y-4">

                    @foreach($stage['processes'] as $process)
                    <div 
                        class="bg-white p-4 rounded-xl border hover:shadow-md transition cursor-move"
                        draggable="true"
                        data-id="{{ $process['id'] }}"
                    >

                        <div class="flex justify-between text-xs text-gray-400">
                            <span>#{{ $process['id'] }}</span>
                            <span>{{ $process['company'] }}</span>
                        </div>

                        <h5 class="mt-2 font-semibold text-gray-800 text-sm">
                            {{ $process['title'] }}
                        </h5>

                        <div class="mt-3 flex justify-between items-center text-xs">

                            <span class="px-2 py-1 rounded-full {{ $stage['color'] }}">
                                {{ $process['sector'] }}
                            </span>

                            <span class="text-gray-500">
                                👤 {{ $process['responsible'] }}
                            </span>

                        </div>

                        @if($process['sla'])
                        <div class="mt-3 text-xs text-red-600 font-bold">
                            ⚠ SLA EM RISCO
                        </div>
                        @endif

                    </div>
                    @endforeach

                </div>

            </div>
            @endforeach

        </div>

    </div>

    {{-- MINHAS TASKS --}}
    <div class="bg-white rounded-2xl p-6 shadow">

        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-6">
            O que depende de você agora
        </h3>

        <div class="space-y-4">

            @foreach($myTasks as $task)
            <div class="flex justify-between items-center p-4 bg-gray-50 rounded-xl border">

                <div>
                    <h4 class="text-sm font-semibold text-gray-800">
                        {{ $task['title'] }}
                    </h4>
                    <p class="text-xs text-gray-500">
                        Processo #{{ $task['process_id'] }} • {{ $task['stage'] }}
                    </p>
                </div>

                <button 
                    onclick="advanceTask({{ $task['process_id'] }})"
                    class="bg-[#E55133] text-white px-4 py-2 rounded-xl text-sm hover:opacity-90"
                >
                    Avançar
                </button>

            </div>
            @endforeach

        </div>

    </div>

</div>


{{-- 🔥 JS COMPLETO --}}
<script>

document.addEventListener('DOMContentLoaded', () => {

    let draggedItem = null;

    const cards = document.querySelectorAll('[draggable="true"]');
    const columns = document.querySelectorAll('[data-stage]');

    cards.forEach(card => {

        card.addEventListener('dragstart', () => {
            draggedItem = card;
            setTimeout(() => card.classList.add('opacity-50'), 0);
        });

        card.addEventListener('dragend', () => {
            draggedItem.classList.remove('opacity-50');
            draggedItem = null;
        });

    });

    columns.forEach(column => {

        column.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        column.addEventListener('drop', () => {

            if (!draggedItem) return;

            column.appendChild(draggedItem);

            const processId = draggedItem.dataset.id;
            const newStage = column.dataset.stage;

            updateProcess(processId, newStage);

            showToast(`Processo #${processId} movido para ${newStage}`);
        });

    });

});


function updateProcess(id, stage) {

    console.log('Atualizando...', { id, stage });

    fetch('/pipeline/update', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            id: id,
            stage: stage
        })
    })
    .then(res => res.json())
    .then(data => {
        console.log('Sucesso:', data);
    })
    .catch(err => {
        console.error('Erro:', err);
    });
}


function showToast(message) {

    const toast = document.createElement('div');

    toast.innerText = message;

    toast.className = `
        fixed bottom-5 right-5
        bg-[#172554] text-white
        px-5 py-3 rounded-xl shadow-lg
        text-sm
    `;

    document.body.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 2500);
}


function advanceTask(id){
    showToast(`Você avançou o processo #${id}`);
}



function openModal(){
    document.getElementById('modal').classList.remove('hidden');
    document.getElementById('modal').classList.add('flex');
}

function closeModal(){
    document.getElementById('modal').classList.add('hidden');
}


// 🔥 CRIA PROCESSO NO FRONT (UX INSTANTÂNEA)
function createProcess(){

    const company = document.getElementById('m_company').value;
    const title = document.getElementById('m_title').value;
    const stage = document.getElementById('m_stage').value;
    const sector = document.getElementById('m_sector').value;
    const responsible = document.getElementById('m_responsible').value;
    const sla = document.getElementById('m_sla').checked;

    if(!company || !title){
        showToast('Preencha os campos obrigatórios');
        return;
    }

    const id = Math.floor(Math.random() * 9999);

    const column = document.querySelector(`[data-stage="${stage}"]`);

    const card = document.createElement('div');

    card.className = "bg-white p-4 rounded-xl border hover:shadow-md transition cursor-move";
    card.setAttribute('draggable', 'true');
    card.dataset.id = id;

    card.innerHTML = `
        <div class="flex justify-between text-xs text-gray-400">
            <span>#${id}</span>
            <span>${company}</span>
        </div>

        <h5 class="mt-2 font-semibold text-gray-800 text-sm">
            ${title}
        </h5>

        <div class="mt-3 flex justify-between items-center text-xs">
            <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full">
                ${sector}
            </span>

            <span class="text-gray-500">
                👤 ${responsible}
            </span>
        </div>

        ${sla ? `<div class="mt-3 text-xs text-red-600 font-bold">⚠ SLA EM RISCO</div>` : ''}
    `;

    column.appendChild(card);

    addDragEvents(card);

    showToast('Processo criado com sucesso 🚀');

    closeModal();

    // 🔥 pronto pra backend depois
    console.log('Salvar no backend aqui...');
}


// reaproveita drag
function addDragEvents(card){

    card.addEventListener('dragstart', () => {
        draggedItem = card;
        setTimeout(() => card.classList.add('opacity-50'), 0);
    });

    card.addEventListener('dragend', () => {
        card.classList.remove('opacity-50');
        draggedItem = null;
    });

}


</script>

<style>
[draggable="true"]:hover {
    transform: scale(1.02);
}
</style>

@endsection