@extends('layouts.cozinha')
@section('menu', 'active')
@section('page_titulo', '🧮 Caixa')
@section('botaom')
    <a href="{{ route('categoria.create') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
            class="fas fa-plus fa-sm text-white-50"></i> Adicionar</a>-->
@endsection
@section('titulo', 'Caixa')
@section('conteudo')

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-header bg-warning text-white">🟡 Novos</div>
                    <div class="card-body kanban-col" id="col-Aberto">
                        <div id="col-Aberto" ondrop="drop(event,'Aberto')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">🟠 Preparação</div>
                    <div class="card-body kanban-col" id="col-Preparando">
                        <div id="col-Preparando" ondrop="drop(event,'Preparando')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-header bg-success text-white">🟢 Pronto</div>
                    <div class="card-body kanban-col" id="col-Pronto">
                        <div id="col-Pronto" ondrop="drop(event,'Pronto')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card shadow">
                    <div class="card-header bg-dark text-white">⚫ Entregue</div>
                    <div class="card-body kanban-col" id="col-Entregue">
                        <div id="col-Entregue" ondrop="drop(event,'Entregue')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">⚫ Pago</div>
                    <div class="card-body kanban-col" id="col-Fechado">
                        <div id="col-Fechado" ondrop="drop(event,'Fechado')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">⚫ Pago</div>
                    <div class="card-body kanban-col" id="col-Cancelado">
                        <div id="col-Cancelado" ondrop="drop(event,'Cancelado')" ondragover="allowDrop(event)"></div>
                    </div>
                </div>
            </div>

        </div>

    </div>

@endsection

@push('css')
    <style>
        .kanban-col {
            min-height: 70vh;
            max-height: 75vh;
            overflow-y: auto;
        }

        .kanban-card {
            background: #fff;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            cursor: grab;
            border-left: 5px solid #4e73df;
        }

        .kanban-card.new {
            border-left-color: orange;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.5);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(255, 165, 0, 0);
            }
        }
    </style>
@endpush

<script>
    function renderKanban(pedidos) {

        ['Aberto', 'Preparando', 'Pronto', 'Entregue', 'Fechado', 'Cancelado'].forEach(status => {
            //document.getElementById('col-' + status).innerHTML = '';
            let el = document.getElementById('col-' + normalize(status));

            if (el) {
                el.innerHTML = '';
            }
        });

        pedidos.forEach(pedido => {

            let html = `
        <div class="kanban-card ${pedido.estado}" draggable="true"
            ondragstart="drag(event)" id="order-${pedido.id}">

            <div class="d-flex justify-content-between ">
                <strong>Mesa ${pedido.pedido_sessao.sessao_mesa.mesa}</strong>
                <span>#${pedido.id}</span>
            </div>

            <hr class="my-2">

            <div>`;

            pedido.pedido_items.forEach(i => {
                html += `<div class="small">• ${i.descricao} x${i.quantidade}</div>`;
            });

            html += `</div>

        <div class="mt-2 d-flex gap-1">
            ${pedido.estado === 'Aberto' ? `<button onclick="changeStatus(${pedido.id}, 'Preparando')" class="btn btn-sm btn-primary w-100">Preparar</button>` : ''}

            ${pedido.estado === 'Preparando' ? `<button onclick="changeStatus(${pedido.id}, 'Pronto')" class="btn btn-sm btn-success w-100">Pronto</button>` : ''}

            ${pedido.estado === 'Pronto' ? `<button onclick="changeStatus(${pedido.id}, 'Entregue')" class="btn btn-sm btn-dark w-100">Entregar</button>` : ''}

            ${pedido.estado === 'Entregue' ? `<button onclick="changeStatus(${pedido.id}, 'Fechado')" class="btn btn-sm btn-danger w-100">💳 Finalizar | Facturar</button>` : ''}
        </div>

        </div>`;

            document.getElementById('col-' + pedido.estado).innerHTML += html;
        });
    }

    function allowDrop(ev) {
        ev.preventDefault();
        ev.currentTarget.style.background = '#ddd';
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev, status) {
        ev.preventDefault();
        ev.currentTarget.style.background = '';
        console.log('Dropping', ev.target.id);

        const data = ev.dataTransfer.getData("text");
        const card = document.getElementById(data);

        let column = ev.target;

        // garante que é a coluna correta
        while (!column.classList.contains('kanban-col')) {
            column = column.parentElement;
        }

        column.appendChild(card);

        const orderId = data.replace('order-', '');
        console.log('Changing status for order', orderId, 'to', status);
        changeStatus(orderId, status);
    }

    /*function drop(ev, status) {
        ev.preventDefault();
        let id = ev.dataTransfer.getData("text").replace('order-', '');
        changeStatus(id, status);
    }*/

    function changeStatus(orderId, status) {

        fetch(`/api/pedidos/${orderId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                status
            })
        });
    }

    //const minutes = Math.floor((Date.now() - new Date(order.created_at)) / 60000);
    //html += `<small class="text-danger">${minutes} min</small>`;
    //html += `<span class="badge bg-info">${order.items.length} itens</span>`;

    function loadPedidos() {
        fetch('/api/pedidos')
            .then(res => res.json())
            .then(data => renderKanban(data));
    }

    setInterval(loadPedidos, 5000); // fallback
    loadPedidos();

    document.body.requestFullscreen();
</script>