@extends('forms.logistica.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">Logística</div>
        <h2>Solicitação de Materiais e Equipamentos <i class="bi bi-box-seam-fill ms-2" style="color:#1d4ed8;"></i></h2>
        <p class="text-muted" style="max-width:640px;margin-top:.35rem;font-size:.95rem;">
            Abertura de chamado para solicitação de materiais e equipamentos destinados ao uso nos veículos da frota e no depósito.
        </p>
    </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;
    }
    .pd-item:last-child { border-bottom: none; }
    .pd-item:hover, .pd-item.pd-on { background: #f0fdf4; color: #16a34a; }
    .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: 700;
        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;
        font-weight: 400;
    }
    .pd-badge-rm:hover { opacity: 1; background: #dcfce7; }

    /* ── Montador do item (acessório/material + quantidade) ──────────────
       Mesmo padrão visual usado em forms/logistica/estoque.blade.php. */
    .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;
    }
    .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;
    }
    .contact-form .it-grid input[type="number"] { width: 6.5rem; margin: 0; padding: 0 12px; }
    .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="number"] { width: 100%; }
        .contact-form .it-add { justify-content: center; margin-left: 0; }
    }

    /* ── Pilha de itens adicionados ── */
    .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-left-color: #1d4ed8;
        border-radius: var(--form-radius-sm, 6px);
        padding: .6rem .9rem;
    }
    .it-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; color: var(--form-text, #0f172a); }
    .it-qtd {
        flex-shrink: 0;
        font-weight: 600;
        font-size: .82rem;
        color: #1d4ed8;
        background: #eff6ff;
        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" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="form_type"      value="logistica_equipamentos">
        <input type="hidden" name="user_recipient" value="58">
        <input type="hidden" name="tipo_chamado"   value="1">
        <input type="hidden" name="categoria"      value="9">

        <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-6 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>

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label for="categoria_acessorio" class="col-form-label">Categoria <span class="required-mark">*</span></label>
                <select class="form-control" id="categoria_acessorio" name="categoria_acessorio" required>
                    <option value="">Selecione a categoria…</option>
                    @foreach (config('logistica_acessorios.categorias') as $slug => $cat)
                        <option value="{{ $slug }}" {{ old('categoria_acessorio') == $slug ? 'selected' : '' }}>
                            {{ $cat['label'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- ── Placa (autocomplete) ── --}}
            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3 campo-grupo" id="grupo_placa" style="display:none;">
                <label for="placa_busca" class="col-form-label">Placa <span class="required-mark">*</span></label>
                <div class="pd-wrap">
                    <input type="text" class="form-control" id="placa_busca"
                        placeholder="Digite o número da placa…" autocomplete="off">
                    <div id="placa-dropdown" class="pd-dropdown"></div>
                </div>
                <div id="placa-badge" class="pd-badge">
                    <i class="bi bi-check-circle-fill" style="color:#16a34a;"></i>
                    <span id="placa-badge-txt"></span>
                    <span class="pd-badge-rm" id="placa-badge-rm" title="Limpar seleção">&#x2715;</span>
                </div>
                <input type="hidden" id="placa" name="placa">
            </div>

            {{-- ── Motorista (autocomplete, depende da Filial) ── --}}
            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3 campo-grupo" id="grupo_motorista" style="display:none;">
                <label for="motorista_busca" class="col-form-label">Motorista <span class="required-mark">*</span></label>
                <div class="pd-wrap">
                    <input type="text" class="form-control" id="motorista_busca"
                        placeholder="Selecione a filial primeiro…" autocomplete="off" disabled>
                    <div id="motorista-dropdown" class="pd-dropdown"></div>
                </div>
                <div id="motorista-badge" class="pd-badge">
                    <i class="bi bi-check-circle-fill" style="color:#16a34a;"></i>
                    <span id="motorista-badge-txt"></span>
                    <span class="pd-badge-rm" id="motorista-badge-rm" title="Limpar seleção">&#x2715;</span>
                </div>
                <input type="hidden" id="motorista_id" name="motorista_id">
            </div>

            {{-- ── Modelo do pneu — opcional, fica ao lado da Placa, só pra anotar a medida (Pneu) ── --}}
            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3 campo-grupo" id="grupo_descricao_modelo" style="display:none;">
                <label for="descricao_modelo" class="col-form-label">Modelo do pneu</label>
                <input type="text" class="form-control" id="descricao_modelo" name="descricao_modelo"
                    placeholder="Ex.: 175/70 R13 (opcional)">
            </div>

            {{-- ── Acessório de celular: montador do item (select + quantidade + adicionar) ── --}}
            <div class="form-group col-12 mt-3 campo-grupo" id="grupo_acessorio" style="display:none;">
                <label for="acessorio_estoque_id" class="col-form-label">Acessório</label>
                <div class="it-box">
                    <select class="form-control" id="acessorio_estoque_id">
                        <option value="">Selecione…</option>
                        @foreach ($acessoriosLogistica as $item)
                            <option value="{{ $item->id }}">{{ $item->item_material }}</option>
                        @endforeach
                    </select>
                    <div class="it-grid">
                        <div class="it-campo">
                            <span class="it-rotulo">Qtd.</span>
                            <input type="number" id="acessorio_quantidade" min="1" step="1" placeholder="1">
                        </div>
                        <button type="button" class="it-add" id="acessorio_add">
                            <i class="bi bi-plus-lg"></i> Adicionar
                        </button>
                    </div>
                </div>
            </div>

            {{-- ── Material de uso: montador do item (select + "Outros" + quantidade + adicionar) ── --}}
            <div class="form-group col-12 mt-3 campo-grupo" id="grupo_material" style="display:none;">
                <label for="material" class="col-form-label">Material</label>
                <div class="it-box">
                    <select class="form-control" id="material">
                        <option value="">Selecione…</option>
                        @foreach ($materiaisLogistica as $item)
                            <option value="{{ $item->id }}">{{ $item->item_material }}</option>
                        @endforeach
                        <option value="outros">Outros</option>
                    </select>
                    <div id="grupo_material_outro" class="mt-2" style="display:none;">
                        <input type="text" class="form-control" id="material_outro"
                            placeholder="Especifique o material…">
                    </div>
                    <div class="it-grid">
                        <div class="it-campo">
                            <span class="it-rotulo">Qtd.</span>
                            <input type="number" id="material_quantidade" min="1" step="1" placeholder="1">
                        </div>
                        <button type="button" class="it-add" id="material_add">
                            <i class="bi bi-plus-lg"></i> Adicionar
                        </button>
                    </div>
                </div>
            </div>

            {{-- ── Pneu: montador do item (select + quantidade + adicionar) ── --}}
            <div class="form-group col-12 mt-3 campo-grupo" id="grupo_pneu" style="display:none;">
                <label for="pneu_estoque_id" class="col-form-label">Pneu</label>
                <div class="it-box">
                    <select class="form-control" id="pneu_estoque_id">
                        <option value="">Selecione…</option>
                        @foreach ($pneusLogistica as $item)
                            <option value="{{ $item->id }}">{{ $item->item_material }}</option>
                        @endforeach
                    </select>
                    <div class="it-grid">
                        <div class="it-campo">
                            <span class="it-rotulo">Qtd.</span>
                            <input type="number" id="pneu_quantidade" min="1" step="1" placeholder="1">
                        </div>
                        <button type="button" class="it-add" id="pneu_add">
                            <i class="bi bi-plus-lg"></i> Adicionar
                        </button>
                    </div>
                </div>
            </div>

            {{-- ── Pilha dos itens adicionados (acessório, material OU pneu, conforme a categoria) ── --}}
            <div class="form-group col-12 mt-3 campo-grupo" id="grupo_itens" style="display:none;">
                <label class="col-form-label">
                    Itens solicitados <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 — escolha o item, informe a quantidade e clique em
                    <strong>Adicionar</strong>.
                </div>
                <div id="it-inputs"></div>
            </div>

            {{-- ── Quantidade (paletes) ── --}}
            <div class="form-group col-md-4 col-sm-6 col-xs-12 mt-3 campo-grupo" id="grupo_quantidade" style="display:none;">
                <label for="quantidade" class="col-form-label">Quantidade <span class="required-mark">*</span></label>
                <input type="number" class="form-control" id="quantidade" name="quantidade" min="1" step="1">
            </div>

            {{-- ── Observação livre — sempre presente ── --}}
            <div class="form-group col-12 mt-3">
                <label for="descricao" class="col-form-label">Observação</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="Alguma observação adicional? (opcional)"></div>
                    <input type="hidden" name="descricao" id="descricao">
                </div>
            </div>

            {{-- ── Anexos — sempre presente ── --}}
            <div class="form-group col-12 mt-2">
                <label class="col-form-label">Anexos</label>
                <div class="file-upload-wrapper">
                    <div class="file-input-row">
                        <i class="bi bi-paperclip"></i>
                        <input type="file" id="imagem" name="imagem[]" multiple>
                    </div>
                    <div class="file-name-display" aria-live="polite"></div>
                    <small>Formatos: JPG, PNG, PDF, DOCX (máx. 10 MB por arquivo)</small>
                </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 CONFIG = @json(config('logistica_acessorios'));

        // ── Toggle genérico de grupo de campo (mesmo padrão de forms/rh/documentos.blade.php) ──
        function setRowEnabled(rowEl, enabled) {
            if (!rowEl) return;
            rowEl.querySelectorAll('input, select, textarea').forEach(function (ctrl) {
                ctrl.disabled = !enabled;
                if (!enabled) ctrl.removeAttribute('required');
            });
        }

        function showRow(rowId, show) {
            var row = document.getElementById(rowId);
            if (!row) return;
            row.style.display = show ? '' : 'none';
            setRowEnabled(row, show);
        }

        // ── Limpeza por campo ao esconder um grupo ──
        function limparPlaca() { if (window.__placaAuto) window.__placaAuto.clearSelecao(); }
        function limparMotorista() { if (window.__motoristaAuto) window.__motoristaAuto.clearSelecao(); }
        function limparAcessorio() { document.getElementById('acessorio_estoque_id').value = ''; document.getElementById('acessorio_quantidade').value = ''; }
        function limparMaterial() { document.getElementById('material').value = ''; document.getElementById('material_quantidade').value = ''; toggleMaterialOutro(); }
        function limparPneu() { document.getElementById('pneu_estoque_id').value = ''; document.getElementById('pneu_quantidade').value = ''; }
        function limparQuantidade() { document.getElementById('quantidade').value = ''; }
        function limparDescricaoModelo() { document.getElementById('descricao_modelo').value = ''; }
        function limparItens() { itens = []; desenharItens(); }

        var CLEARERS = {
            placa: limparPlaca,
            motorista: limparMotorista,
            acessorio: limparAcessorio,
            material: limparMaterial,
            pneu: limparPneu,
            quantidade: limparQuantidade,
            descricao_modelo: limparDescricaoModelo,
            itens: limparItens,
        };

        // ── Pilha de itens (acessório OU material, conforme a categoria) ──
        //
        // Um chamado, vários itens: cada "Adicionar" empilha um item com sua
        // quantidade, e o envio leva `itens[i][...]` como campos ocultos —
        // mesmo padrão de forms/logistica/estoque.blade.php.
        var itens    = [];
        var itLista  = document.getElementById('it-lista');
        var itVazio  = document.getElementById('it-vazio');
        var itConta  = document.getElementById('it-contagem');
        var itInputs = document.getElementById('it-inputs');

        function escHtml(s) {
            return String(s === null || s === undefined ? '' : s)
                .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
                .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
        }

        function desenharItens() {
            itVazio.style.display = itens.length ? 'none' : '';
            itConta.textContent = itens.length
                ? '— ' + itens.length + (itens.length === 1 ? ' item' : ' itens')
                : '';

            itLista.innerHTML = itens.map(function (item, i) {
                return '<div class="it-linha">'
                     +   '<span class="it-txt">' + escHtml(item.label) + '</span>'
                     +   '<span class="it-qtd">' + item.quantidade + 'x</span>'
                     +   '<button type="button" class="it-rm" data-i="' + i + '" title="Remover item">'
                     +     '<i class="bi bi-trash"></i></button>'
                     + '</div>';
            }).join('');

            itInputs.innerHTML = itens.map(function (item, i) {
                var campos = [
                    ['estoque_id',     item.estoqueId || ''],
                    ['material_outro', item.materialOutro || ''],
                    ['quantidade',     item.quantidade],
                ];
                return campos.map(function (c) {
                    return '<input type="hidden" name="itens[' + i + '][' + c[0] + ']" value="' + escHtml(c[1]) + '">';
                }).join('');
            }).join('');

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

        // Mesmo item (mesmo estoque/texto "outros") adicionado de novo soma
        // a quantidade em vez de virar duas linhas.
        function empilharItem(novo) {
            var igual = itens.filter(function (item) {
                return item.estoqueId === novo.estoqueId && item.materialOutro === novo.materialOutro;
            })[0];
            if (igual) {
                igual.quantidade += novo.quantidade;
            } else {
                itens.push(novo);
            }
            desenharItens();
        }

        // Acessório, material e pneu compartilham o mesmo montador: escolher um
        // item de estoque (ou "Outros", texto livre, só em material), informar a
        // quantidade e empilhar. O que muda entre eles é só o catálogo do
        // <select> — por isso um único wireup parametrizado.
        function ligarMontador(opts) {
            document.getElementById(opts.addId).addEventListener('click', function () {
                var select = document.getElementById(opts.selectId);
                var qtdInput = document.getElementById(opts.qtdId);
                var quantidade = parseInt(qtdInput.value, 10);
                var outroInput = opts.outroId ? document.getElementById(opts.outroId) : null;
                var isOutros = !!outroInput && select.value === 'outros';
                var outroTexto = outroInput ? outroInput.value.trim() : '';

                if (!select.value) {
                    alert(opts.msgVazio);
                    select.focus();
                    return;
                }
                if (isOutros && !outroTexto) {
                    alert('Especifique o material.');
                    outroInput.focus();
                    return;
                }
                if (!quantidade || quantidade < 1) {
                    alert('Informe a quantidade.');
                    qtdInput.focus();
                    return;
                }

                empilharItem({
                    estoqueId: isOutros ? null : select.value,
                    materialOutro: isOutros ? outroTexto : null,
                    quantidade: quantidade,
                    label: isOutros ? outroTexto : select.options[select.selectedIndex].text,
                });

                select.value = '';
                qtdInput.value = '';
                if (outroInput) {
                    outroInput.value = '';
                    toggleMaterialOutro();
                }
            });
        }

        ligarMontador({ addId: 'acessorio_add', selectId: 'acessorio_estoque_id', qtdId: 'acessorio_quantidade',
            msgVazio: 'Selecione um acessório antes de adicionar.' });
        ligarMontador({ addId: 'material_add', selectId: 'material', qtdId: 'material_quantidade', outroId: 'material_outro',
            msgVazio: 'Selecione um material antes de adicionar.' });
        ligarMontador({ addId: 'pneu_add', selectId: 'pneu_estoque_id', qtdId: 'pneu_quantidade',
            msgVazio: 'Selecione um item antes de adicionar.' });

        desenharItens();

        // "Outros" em Material reage ao próprio select, não à categoria.
        function toggleMaterialOutro() {
            var select = document.getElementById('material');
            var isOutros = select && !select.disabled && select.value === 'outros';
            showRow('grupo_material_outro', isOutros);
        }

        // Motorista só busca depois que a Filial for escolhida.
        function atualizarDisponibilidadeMotorista() {
            var input = document.getElementById('motorista_busca');
            var grupo = document.getElementById('grupo_motorista');
            if (!input || !grupo || grupo.style.display === 'none') return;
            var filial = document.getElementById('filial').value;
            if (!filial) {
                input.disabled = true;
                input.placeholder = 'Selecione a filial primeiro…';
                limparMotorista();
            } else {
                input.disabled = false;
                input.placeholder = 'Digite o nome do motorista…';
            }
        }

        var categoriaAtual = null;

        function aplicarCategoria(slug) {
            var cat = CONFIG.categorias[slug];
            var campos = cat ? cat.campos : [];

            // Trocar de categoria zera a pilha de itens: os catálogos de
            // acessório / material / pneu são distintos, e um item escolhido
            // numa categoria não deve seguir reservado noutra.
            if (slug !== categoriaAtual) {
                categoriaAtual = slug;
                limparItens();
            }

            CONFIG.campos.forEach(function (campo) {
                var visivel = campos.indexOf(campo) !== -1;
                showRow('grupo_' + campo, visivel);
                if (!visivel && CLEARERS[campo]) CLEARERS[campo]();
            });
            toggleMaterialOutro();
            atualizarDisponibilidadeMotorista();
        }

        document.getElementById('categoria_acessorio').addEventListener('change', function () {
            aplicarCategoria(this.value);
        });
        document.getElementById('material').addEventListener('change', toggleMaterialOutro);
        document.getElementById('filial').addEventListener('change', atualizarDisponibilidadeMotorista);

        // Estado inicial (ex.: reenvio de formulário com erro de validação — old()).
        aplicarCategoria(document.getElementById('categoria_acessorio').value);

        // ── Autocomplete genérico (placa / motorista) — mesmo padrão usado em forms/logistica/nota.blade.php ──
        function criarAutocomplete(opts) {
            var input    = document.getElementById(opts.inputId);
            var hidden   = document.getElementById(opts.hiddenId);
            var dropdown = document.getElementById(opts.dropdownId);
            var badge    = document.getElementById(opts.badgeId);
            var badgeTxt = document.getElementById(opts.badgeTxtId);
            var badgeRm  = document.getElementById(opts.badgeRmId);
            var timer = null, list = [], cur = -1;

            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 clearSelecao() {
                hidden.value = '';
                badge.style.display = 'none';
                badgeTxt.textContent = '';
                input.style.display = '';
                input.value = '';
            }

            function pick(item) {
                hidden.value = item.id;
                badgeTxt.textContent = item[opts.rotuloKey];
                badge.style.display = 'flex';
                input.value = '';
                input.style.display = 'none';
                hide();
            }

            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">' + opts.semResultado + '</div>');
                    list = [];
                    return;
                }
                list = data;
                cur = -1;
                var html = '';
                data.forEach(function (item, i) {
                    html += '<div class="pd-item" data-i="' + i + '">' + esc(item[opts.rotuloKey]) + '</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) {
                var url = opts.buscarUrl(q);
                if (!url) { show('<div class="pd-msg">' + opts.indisponivel + '</div>'); return; }
                show('<div class="pd-msg">Buscando…</div>');
                fetch(url, { credentials: 'same-origin' })
                    .then(function (r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
                    .then(render)
                    .catch(function () { show('<div class="pd-msg" style="color:#dc2626;">Erro na busca.</div>'); });
            }

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

            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 () {
                clearSelecao();
                input.focus();
            });

            return { clearSelecao: clearSelecao };
        }

        window.__placaAuto = criarAutocomplete({
            inputId: 'placa_busca', hiddenId: 'placa', dropdownId: 'placa-dropdown',
            badgeId: 'placa-badge', badgeTxtId: 'placa-badge-txt', badgeRmId: 'placa-badge-rm',
            rotuloKey: 'placa',
            semResultado: 'Nenhuma placa encontrada.',
            indisponivel: 'Digite ao menos 2 caracteres.',
            buscarUrl: function (q) {
                return '{{ route('logistica.placas.buscar') }}?q=' + encodeURIComponent(q);
            },
        });

        window.__motoristaAuto = criarAutocomplete({
            inputId: 'motorista_busca', hiddenId: 'motorista_id', dropdownId: 'motorista-dropdown',
            badgeId: 'motorista-badge', badgeTxtId: 'motorista-badge-txt', badgeRmId: 'motorista-badge-rm',
            rotuloKey: 'nome',
            semResultado: 'Nenhum motorista encontrado nesta filial.',
            indisponivel: 'Selecione a filial primeiro.',
            buscarUrl: function (q) {
                var filial = document.getElementById('filial').value;
                if (!filial) return null;
                return '{{ route('logistica.motoristas.buscar') }}?filial_id=' + encodeURIComponent(filial) + '&q=' + encodeURIComponent(q);
            },
        });

        // ── Validação client-side dos campos de busca antes de enviar ──
        document.getElementById('contact-form').addEventListener('submit', function (e) {
            var checagens = [
                { grupo: 'grupo_placa', hidden: 'placa', foco: 'placa_busca', msg: 'Busque e selecione a placa antes de enviar.' },
                { grupo: 'grupo_motorista', hidden: 'motorista_id', foco: 'motorista_busca', msg: 'Busque e selecione o motorista antes de enviar.' },
            ];
            for (var i = 0; i < checagens.length; i++) {
                var c = checagens[i];
                var grupoEl = document.getElementById(c.grupo);
                if (grupoEl && grupoEl.style.display !== 'none' && !document.getElementById(c.hidden).value) {
                    e.preventDefault();
                    e.stopPropagation();
                    alert(c.msg);
                    document.getElementById(c.foco).focus();
                    return;
                }
            }

            var grupoItens = document.getElementById('grupo_itens');
            if (grupoItens && grupoItens.style.display !== 'none' && !itens.length) {
                e.preventDefault();
                e.stopPropagation();
                alert('Adicione ao menos um item à solicitação.');
                return;
            }
        });
    })();
    </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-tags"></i>
        <p>Os campos mudam conforme a categoria escolhida.</p>
    </li>
    <li>
        <i class="bi bi-box-seam"></i>
        <p>Itens de estoque (acessórios/materiais/pneus) são reservados ao enviar e debitados quando o chamado for solucionado.</p>
    </li>
    <li>
        <i class="bi bi-clock-history"></i>
        <p>Aguarde o retorno do setor de logística.</p>
    </li>
@endsection