@extends('forms.logistica.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">Logística</div>
        <h2>Estoque <i class="bi bi-box-seam ms-2" style="color:#16a34a;"></i></h2>
    </div>
@endsection

@section('form')
    <style>
    .pd-wrap { position: relative; }
    .pd-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #fff;
        border: 1px solid rgba(0,0,0,.15);
        border-top: none;
        border-radius: 0 0 .25rem .25rem;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
        max-height: 240px;
        overflow-y: auto;
    }
    .pd-item {
        padding: .5rem .85rem;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
        font-size: .86rem;
        color: #212529;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pd-item:last-child { border-bottom: none; }
    .pd-item:hover, .pd-item.pd-on { background: #f0fdf4; }
    .pd-sku  { font-weight: 700; color: #16a34a; margin-right: .4rem; }
    .pd-nome { color: #495057; }
    .pd-msg  { padding: .5rem .85rem; font-size: .82rem; color: #6c757d; }
    .pd-badge {
        display: none;
        align-items: center;
        gap: .5rem;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: .25rem;
        padding: .3rem .75rem;
        font-size: .84rem;
        color: #166534;
        font-weight: 500;
        margin-top: .3rem;
    }
    .pd-badge-rm {
        margin-left: auto;
        cursor: pointer;
        opacity: .55;
        font-size: .78rem;
        line-height: 1;
        padding: 2px 4px;
        border-radius: 3px;
    }
    .pd-badge-rm:hover { opacity: 1; background: #dcfce7; }

    /* ── Montador do item ──────────────────────────────────────────────
       Um painel só, com a busca em cima e a linha de controles embaixo.
       Todos os controles têm a altura dos inputs do tema (--form-input-h)
       e são alinhados pela base, para que o rótulo de uns e a ausência de
       rótulo em outros não desencontrem a linha.                        */
    .it-box {
        background: var(--form-bg, #f8fafc);
        border: 1px solid var(--form-border, #e2e8f0);
        border-radius: var(--form-radius, 10px);
        padding: 1rem 1.1rem 1.1rem;
    }
    /* Os quatro controles numa linha só, cada um do tamanho do que carrega —
       quantidade é sempre um número curto, e um campo largo para três dígitos
       só desequilibra a linha. Com `wrap`, telas estreitas quebram sozinhas em
       vez de estourar a caixa. */
    .it-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: .6rem;
        margin-top: .9rem;
    }
    .it-campo { display: flex; flex-direction: column; flex: 0 0 auto; }
    .contact-form .it-rotulo {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--form-label, #475569);
        margin-bottom: 6px;
        line-height: 1;
        white-space: nowrap;
    }
    /* Vence o `width:100%` que o tema dá a todo input. */
    .contact-form .it-grid input[type="text"] { width: 5.5rem; margin: 0; text-align: right; }

    /* Sentido do ajuste: dois botões que se excluem, no lugar de um select. */
    .it-sinal {
        display: flex;
        height: var(--form-input-h, 40px);
        border: 1.5px solid var(--form-border, #e2e8f0);
        border-radius: var(--form-radius-sm, 6px);
        background: #fff;
        overflow: hidden;
    }
    .contact-form .it-sinal button {
        flex: 0 0 auto;
        /* As duas metades com a mesma largura, apesar dos rótulos desiguais. */
        min-width: 6.2rem;
        padding: 0 .75rem;
        border: none;
        background: transparent;
        color: #64748b;
        font-size: .86rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background .12s, color .12s;
    }
    .it-sinal button + button { border-left: 1.5px solid var(--form-border, #e2e8f0); }
    .contact-form .it-sinal button:hover { background: #f1f5f9; color: #334155; }
    .contact-form .it-sinal button.on[data-tipo="entrada"] { background: #16a34a; color: #fff; }
    .contact-form .it-sinal button.on[data-tipo="saida"]   { background: #dc2626; color: #fff; }

    .contact-form .it-add {
        flex: 0 0 auto;
        margin-left: auto;
        height: var(--form-input-h, 40px);
        padding: 0 1rem;
        border: none;
        border-radius: var(--form-radius-sm, 6px);
        background: #16a34a;
        color: #fff;
        font-size: .86rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: background .12s;
    }
    .contact-form .it-add:hover { background: #15803d; }

    @media (max-width: 575px) {
        .it-campo, .contact-form .it-add { flex: 1 1 100%; }
        .contact-form .it-grid input[type="text"] { width: 100%; }
        .contact-form .it-add { justify-content: center; margin-left: 0; }
        .contact-form .it-sinal button { flex: 1 1 0; min-width: 0; }
    }

    /* ── Pilha de itens do chamado ─────────────────────────────────── */
    .it-lista { display: flex; flex-direction: column; gap: .5rem; }
    .it-linha {
        display: flex;
        align-items: center;
        gap: .75rem;
        background: #fff;
        border: 1px solid var(--form-border, #e2e8f0);
        border-left-width: 4px;
        border-radius: var(--form-radius-sm, 6px);
        padding: .6rem .9rem;
    }
    .it-linha.entrada { border-left-color: #16a34a; }
    .it-linha.saida   { border-left-color: #dc2626; }
    .it-op {
        flex-shrink: 0;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
    }
    .it-linha.entrada .it-op { background: #dcfce7; color: #15803d; }
    .it-linha.saida   .it-op { background: #fee2e2; color: #b91c1c; }
    .it-txt { flex: 1 1 auto; min-width: 0; }
    .it-cod { font-weight: 700; color: var(--form-text, #0f172a); font-size: .92rem; }
    .it-nome {
        display: block;
        color: var(--form-text-muted, #64748b);
        font-size: .82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .it-qtd {
        flex-shrink: 0;
        font-weight: 600;
        font-size: .82rem;
        color: #334155;
        background: #f1f5f9;
        border-radius: 999px;
        padding: .25rem .8rem;
        white-space: nowrap;
    }
    .it-rm {
        flex-shrink: 0;
        border: none;
        background: transparent;
        color: #cbd5e1;
        font-size: 1rem;
        line-height: 1;
        padding: .3rem .45rem;
        border-radius: var(--form-radius-sm, 6px);
        cursor: pointer;
        transition: color .12s, background .12s;
    }
    .it-rm:hover { color: #dc2626; background: #fef2f2; }
    .it-vazio {
        border: 1.5px dashed #cbd5e1;
        border-radius: var(--form-radius-sm, 6px);
        padding: 1.1rem;
        text-align: center;
        color: #94a3b8;
        font-size: .88rem;
    }
    .it-contagem {
        font-weight: 500;
        color: var(--form-text-muted, #64748b);
        text-transform: none;
        letter-spacing: 0;
    }
    </style>

    <form action="{{ route('chamados.store') }}" method="post" id="contact-form">
        @csrf
        <input type="hidden" name="form_type"      value="logistica_estoque">
        <input type="hidden" name="user_recipient" value="58">
        {{-- Tipo 13 = Ajuste; categoria própria do formulário. Juntos formam o
             título do chamado: "Filial X - Ajuste/Estoque". --}}
        <input type="hidden" name="tipo_chamado"   value="13">
        <input type="hidden" name="categoria"      value="{{ $categoria }}">

        <div class="row">

            {{-- Filial detectada pelo login — travada, para o chamado sempre sair
                 com a loja de quem abriu, sem depender de escolha manual. --}}
            <div class="form-group col-md-5 col-sm-6 col-xs-12 mt-3">
                <label for="filial" class="col-form-label">Filial</label>
                <input type="hidden" id="filial" name="filial" value="{{ $userFilial->id }}">
                <input type="text" class="form-control" value="{{ $userFilial->comment }}" disabled>
            </div>

            {{-- Montador do item: busca em cima, controles embaixo. O sentido
                 vem antes da quantidade — primeiro se diz se o item entra ou
                 sai, depois quanto. --}}
            <div class="form-group col-12 mt-3">
                <label for="codigo_produto" class="col-form-label">Adicionar produto</label>
                <div class="it-box">
                    <div class="pd-wrap">
                        <input type="text" class="form-control" id="codigo_produto"
                            placeholder="Buscar por código ou nome do produto…"
                            autocomplete="off">
                        <div id="pd-dropdown" class="pd-dropdown"></div>
                    </div>
                    <div id="pd-badge" class="pd-badge">
                        <i class="bi bi-check-circle-fill" style="color:#16a34a;"></i>
                        <span id="pd-badge-txt"></span>
                        <span class="pd-badge-rm" id="pd-badge-rm" title="Limpar seleção">&#x2715;</span>
                    </div>

                    <div class="it-grid">
                        <div class="it-campo it-campo-mov">
                            <span class="it-rotulo">Movimento</span>
                            <div class="it-sinal">
                                <button type="button" data-tipo="entrada" class="on" title="Somar ao estoque">+ Entrada</button>
                                <button type="button" data-tipo="saida" title="Subtrair do estoque">− Saída</button>
                            </div>
                        </div>

                        <div class="it-campo">
                            <span class="it-rotulo">Qtd.</span>
                            {{-- Texto, e não `number`: a medida é fracionária
                                 (2,52 m² de piso) e quem digita usa vírgula,
                                 que o `type=number` só aceita se o navegador
                                 estiver em pt-BR. --}}
                            <input type="text" id="it-quantidade" class="px-2"
                                inputmode="decimal" autocomplete="off" placeholder="0">
                        </div>

                        <button type="button" class="it-add" id="it-add">
                            <i class="bi bi-plus-lg"></i> Adicionar
                        </button>
                    </div>
                </div>
            </div>

            <div class="form-group col-12 mt-3">
                <label class="col-form-label">
                    Itens do chamado <span class="required-mark">*</span>
                    <span class="it-contagem" id="it-contagem"></span>
                </label>
                <div class="it-lista" id="it-lista"></div>
                <div class="it-vazio" id="it-vazio">
                    Nenhum item adicionado ainda — busque o produto, escolha o movimento e clique em
                    <strong>Adicionar item</strong>.
                </div>
                <div id="it-inputs"></div>
            </div>

            <div class="form-group col-12 mt-3">
                <label for="descricao" class="col-form-label">Descrição da solicitação <span class="required-mark">*</span></label>
                <div class="rt-wrap">
                    <div class="rt-toolbar">
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'b')" title="Negrito"><b>B</b></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'i')" title="Itálico" style="font-style:italic">I</button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'u')" title="Sublinhado"><u>U</u></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'s')" title="Riscado"><s>S</s></button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'code')" title="Código" style="font-family:monospace;font-size:.65rem">&lt;/&gt;</button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ul')" title="Lista com marcadores"><i class="bi bi-list-ul"></i></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ol')" title="Lista numerada"><i class="bi bi-list-ol"></i></button>
                    </div>
                    <div contenteditable="true" data-name="descricao" data-placeholder="Descreva o motivo do ajuste de estoque…"></div>
                    <input type="hidden" name="descricao" id="descricao" required>
                </div>
            </div>

            <div class="form-group col-12 mt-2">
                <button type="submit" class="theme-btn btn-style-one">
                    <i class="bi bi-send"></i> Enviar solicitação
                </button>
            </div>

        </div>
    </form>

    <script>
    (function () {
        var input    = document.getElementById('codigo_produto');
        var dropdown = document.getElementById('pd-dropdown');
        var badge    = document.getElementById('pd-badge');
        var badgeTxt = document.getElementById('pd-badge-txt');
        var badgeRm  = document.getElementById('pd-badge-rm');
        var SEARCH   = '/logistica/produtos/buscar';
        var timer    = null;
        var list     = [];
        var cur      = -1;
        var escolhido = null;

        // As aspas importam: o nome do produto entra em `value="..."` dos campos
        // ocultos, e um `TV 32"` sem escapar fecharia o atributo no meio.
        function esc(s) {
            return String(s === null || s === undefined ? '' : s)
                .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
                .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
        }

        function hide() {
            dropdown.style.display = 'none';
            dropdown.innerHTML = '';
            list = []; cur = -1;
        }

        function show(html) {
            dropdown.innerHTML = html;
            dropdown.style.display = 'block';
        }

        function clearBadge() {
            escolhido = null;
            badge.style.display = 'none';
            badgeTxt.textContent = '';
        }

        function pick(item) {
            input.value          = item.codigo;
            escolhido            = { codigo: item.codigo, nome: item.nome };
            badgeTxt.textContent = item.codigo + '  —  ' + item.nome;
            badge.style.display  = 'flex';
            hide();
            input.blur();
        }

        function markActive(idx) {
            var els = dropdown.querySelectorAll('.pd-item');
            els.forEach(function(el, i) { el.classList.toggle('pd-on', i === idx); });
            cur = idx;
            if (els[idx]) els[idx].scrollIntoView({ block: 'nearest' });
        }

        function render(data) {
            if (!Array.isArray(data) || !data.length) {
                show('<div class="pd-msg">Nenhum produto encontrado.</div>');
                list = [];
                return;
            }
            list = data;
            cur  = -1;
            var html = '';
            data.forEach(function(item, i) {
                html += '<div class="pd-item" data-i="' + i + '">'
                      + '<span class="pd-sku">' + esc(item.codigo) + '</span>'
                      + '<span class="pd-nome">' + esc(item.nome) + '</span>'
                      + '</div>';
            });
            show(html);
            dropdown.querySelectorAll('.pd-item').forEach(function(el) {
                el.addEventListener('mousedown', function(e) {
                    e.preventDefault();
                    pick(list[+el.dataset.i]);
                });
            });
        }

        function search(q) {
            show('<div class="pd-msg">Buscando…</div>');
            fetch(SEARCH + '?q=' + encodeURIComponent(q), { credentials: 'same-origin' })
                .then(function(r) {
                    if (!r.ok) throw new Error('HTTP ' + r.status);
                    return r.json();
                })
                .then(function(data) {
                    if (data && data.nao_sincronizado) {
                        show('<div class="pd-msg" style="color:#dc2626;">Base de produtos não sincronizada.</div>');
                        return;
                    }
                    render(data);
                })
                .catch(function() {
                    show('<div class="pd-msg" style="color:#dc2626;">Erro ao buscar produtos.</div>');
                });
        }

        input.addEventListener('input', function() {
            var v = input.value.trim();
            clearBadge();
            clearTimeout(timer);
            if (v.length < 2) { hide(); return; }
            timer = setTimeout(function() { search(v); }, 350);
        });

        input.addEventListener('keydown', function(e) {
            var els = dropdown.querySelectorAll('.pd-item');
            if (e.key === 'ArrowDown')  { e.preventDefault(); markActive(Math.min(cur + 1, els.length - 1)); }
            else if (e.key === 'ArrowUp')   { e.preventDefault(); markActive(Math.max(cur - 1, 0)); }
            else if (e.key === 'Enter' && cur >= 0) { e.preventDefault(); pick(list[cur]); }
            else if (e.key === 'Escape') { hide(); }
        });

        document.addEventListener('click', function(e) {
            if (!e.target.closest('.pd-wrap')) hide();
        });

        badgeRm.addEventListener('click', function() {
            input.value = '';
            clearBadge();
            input.focus();
        });

        // ── Pilha de itens ────────────────────────────────────────────────
        //
        // A tela monta a lista e o envio leva `itens[i][...]` como campos
        // ocultos: um chamado, vários produtos. O produto pode aparecer duas
        // vezes com movimentos diferentes, mas repetir o mesmo par
        // produto+movimento seria sempre erro de digitação — nesse caso as
        // quantidades se somam em vez de virar duas linhas.

        var itens     = [];
        var lista     = document.getElementById('it-lista');
        var vazio     = document.getElementById('it-vazio');
        var contagem  = document.getElementById('it-contagem');
        var inputs    = document.getElementById('it-inputs');
        var qtd       = document.getElementById('it-quantidade');
        var botoes    = document.querySelectorAll('.it-sinal button');
        var tipo      = 'entrada';

        function selecionarTipo(valor) {
            tipo = valor;
            botoes.forEach(function (b) { b.classList.toggle('on', b.dataset.tipo === valor); });
        }

        botoes.forEach(function (b) {
            b.addEventListener('click', function () { selecionarTipo(b.dataset.tipo); });
        });

        // ── Quantidade fracionária ────────────────────────────────────────
        //
        // A medida varia de item para item: 2,52 m² de piso, 1,5 caixa, 3
        // peças. O campo é texto justamente para aceitar a vírgula que o
        // teclado brasileiro produz — `type=number` só a aceita quando o
        // navegador está em pt-BR, e em outra configuração devolveria vazio.

        /** "2,52" · "2.52" · "1.234,56" → número. NaN se não for número. */
        function numero(texto) {
            var t = String(texto == null ? '' : texto).trim();
            if (t === '') return NaN;

            // Com os dois separadores, o ponto é milhar ("1.234,56"); sozinha,
            // a vírgula é decimal. Ponto sozinho fica como decimal ("2.52").
            t = (t.indexOf(',') >= 0 && t.indexOf('.') >= 0)
                ? t.replace(/\./g, '').replace(',', '.')
                : t.replace(',', '.');

            return /^\d*\.?\d+$/.test(t) ? parseFloat(t) : NaN;
        }

        /** Três casas — a precisão da coluna — sem somar lixo de ponto flutuante. */
        function arredondar(n) {
            return Math.round(n * 1000) / 1000;
        }

        function formatarQtd(n) {
            return n.toLocaleString('pt-BR', { maximumFractionDigits: 3 });
        }

        // O ponto é o separador que a validação do servidor entende.
        function paraEnvio(n) {
            return String(arredondar(n));
        }

        function desenhar() {
            vazio.style.display = itens.length ? 'none' : '';
            contagem.textContent = itens.length
                ? '— ' + itens.length + (itens.length === 1 ? ' item' : ' itens')
                : '';

            lista.innerHTML = itens.map(function (item, i) {
                return '<div class="it-linha ' + item.tipo + '">'
                     +   '<span class="it-op">' + (item.tipo === 'entrada' ? '+' : '−') + '</span>'
                     +   '<span class="it-txt">'
                     +     '<span class="it-cod">' + esc(item.codigo) + '</span>'
                     +     '<span class="it-nome">' + esc(item.nome || '') + '</span>'
                     +   '</span>'
                     +   '<span class="it-qtd">' + esc(formatarQtd(item.quantidade)) + '</span>'
                     +   '<button type="button" class="it-rm" data-i="' + i + '" title="Remover item">'
                     +     '<i class="bi bi-trash"></i></button>'
                     + '</div>';
            }).join('');

            inputs.innerHTML = itens.map(function (item, i) {
                var campos = [
                    ['codigo_produto', item.codigo],
                    ['nome_produto',   item.nome || ''],
                    ['tipo',           item.tipo],
                    ['quantidade',     paraEnvio(item.quantidade)]
                ];

                return campos.map(function (c) {
                    return '<input type="hidden" name="itens[' + i + '][' + c[0] + ']" value="' + esc(c[1]) + '">';
                }).join('');
            }).join('');

            lista.querySelectorAll('.it-rm').forEach(function (b) {
                b.addEventListener('click', function () {
                    itens.splice(+b.dataset.i, 1);
                    desenhar();
                });
            });
        }

        function adicionar() {
            if (!escolhido) {
                alert('Busque e selecione um produto antes de adicionar o item.');
                input.focus();
                return;
            }

            var quantidade = numero(qtd.value);

            if (isNaN(quantidade) || quantidade <= 0) {
                alert('Informe a quantidade (2,52 para metragem, por exemplo).');
                qtd.focus();
                return;
            }

            if (quantidade > 999999.999) {
                alert('Quantidade acima do limite permitido.');
                qtd.focus();
                return;
            }

            var novo = {
                codigo: escolhido.codigo,
                nome: escolhido.nome,
                tipo: tipo,
                quantidade: arredondar(quantidade)
            };

            var igual = itens.filter(function (item) {
                return item.codigo === novo.codigo && item.tipo === novo.tipo;
            })[0];

            if (igual) {
                igual.quantidade = arredondar(igual.quantidade + novo.quantidade);
            } else {
                itens.push(novo);
            }

            input.value = '';
            qtd.value   = '';
            clearBadge();
            desenhar();
            input.focus();
        }

        document.getElementById('it-add').addEventListener('click', adicionar);

        // Enter no código ou na quantidade adiciona o item em vez de enviar o
        // chamado com um produto só.
        [input, qtd].forEach(function (el) {
            el.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' && !dropdown.querySelector('.pd-item.pd-on')) {
                    e.preventDefault();
                    adicionar();
                }
            });
        });

        document.getElementById('contact-form').addEventListener('submit', function (e) {
            if (!itens.length) {
                e.preventDefault();
                e.stopPropagation();
                alert('Adicione ao menos um item ao chamado.');
                input.focus();
            }
        });

        desenhar();
    })();
    </script>
@endsection

@section('info')
    <li>
        <i class="bi bi-check2-circle"></i>
        <p>Campos com <span style="color:#ef4444; font-weight:700;">*</span> são obrigatórios.</p>
    </li>
    <li>
        <i class="bi bi-search"></i>
        <p>Digite o código ou nome do produto para buscar no CoreBusiness.</p>
    </li>
    <li>
        <i class="bi bi-plus-slash-minus"></i>
        <p><strong>Entrada</strong> soma ao estoque, <strong>Saída</strong> subtrai. Escolha antes de informar a quantidade.</p>
    </li>
    <li>
        <i class="bi bi-stack"></i>
        <p>Vários produtos cabem no mesmo chamado: adicione um item de cada vez à lista.</p>
    </li>
    <li>
        <i class="bi bi-card-text"></i>
        <p>Descreva detalhadamente o motivo do ajuste.</p>
    </li>
    <li>
        <i class="bi bi-clock-history"></i>
        <p>Aguarde o retorno do setor de logística.</p>
    </li>
@endsection