{{-- MODAL: Atribuir estoque --}}
<div class="modal-header conteudo-modal-header">
    <h5
        style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0;color:var(--dm-text-muted);">
        <span style="color:#e6ab09;font-family:'Courier New',monospace;">#{{ $chamado->id }}</span>
        &nbsp;·&nbsp; {{ $chamado->types->name }}
        <span style="font-weight:400;margin-left:.4rem;">— Atribuir estoque</span>
    </h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
        style="color:var(--dm-text-muted);opacity:1;font-size:1.2rem;line-height:1;">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="modal-body row g-0" style="min-height:300px;">
    <div class="col-md-6 conteudo-col-left" style="display:flex;flex-direction:column;">
        <div class="conteudo-col-header">
            <span
                style="font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--dm-text-muted);">
                <i class="bi bi-box-seam me-1"></i> Atribuir item(s) ao chamado
            </span>
        </div>

        <form action="{{ route('acompadmin', ['type' => 'assign_stock']) }}" method="post"
            enctype="multipart/form-data" id="form_assign_stock"
            style="flex:1;display:flex;flex-direction:column;padding:1rem;gap:.75rem;">
            @csrf
            <input type="hidden" name="id" value="{{ $chamado->id }}">

            <div id="estoque_assign_rows" style="display:grid;gap:.75rem;">
                <div class="estoque-assign-row"
                    style="display:grid;grid-template-columns:1.8fr .7fr auto;gap:.5rem;align-items:end;">
                    <div class="estoque-select-wrap" style="position:relative;">
                        <label
                            style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                            Item
                        </label>
                        <div class="estoque-select-trigger" tabindex="0"
                            style="display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);border-radius:6px;padding:.45rem .7rem;font-size:.82rem;cursor:pointer;user-select:none;">
                            <span class="estoque-select-label" style="color:var(--dm-text-muted);">Selecionar...</span>
                            <i class="bi bi-chevron-down" style="font-size:.7rem;color:var(--dm-text-muted);"></i>
                        </div>
                        <div class="estoque-select-dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;z-index:999;margin-top:2px;background:var(--dm-surface-2);border:1px solid var(--dm-border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:220px;overflow:hidden;">
                            <input type="text" class="estoque-select-search" placeholder="Pesquisar..."
                                style="width:100%;border:none;border-bottom:1px solid var(--dm-border);background:transparent;color:var(--dm-text);padding:.5rem .7rem;font-size:.82rem;outline:none;">
                            <div class="estoque-select-options" style="max-height:170px;overflow-y:auto;">
                                <div class="estoque-option" data-value="" data-pack=""
                                    style="padding:.4rem .7rem;font-size:.82rem;cursor:pointer;color:var(--dm-text-muted);">Selecionar...</div>
                                @foreach ($estoque as $e)
                                    @php
                                        $packData = null;
                                        if ($e->principalPack) {
                                            $packData = json_encode([
                                                'id'    => $e->principalPack->id,
                                                'nome'  => $e->principalPack->nome,
                                                'items' => $e->principalPack->items->map(fn($pi) => [
                                                    'estoque_id'    => $pi->estoque_id,
                                                    'item_material' => $pi->estoque?->item_material ?? 'Item removido',
                                                    'quantidade'    => $pi->quantidade,
                                                ])->values()->toArray(),
                                            ]);
                                        }
                                    @endphp
                                    <div class="estoque-option"
                                        data-value="{{ $e['id'] }}"
                                        data-pack="{{ $packData ?? '' }}"
                                        style="padding:.4rem .7rem;font-size:.82rem;cursor:pointer;color:var(--dm-text);">
                                        {{ $e['item_material'] }}
                                        @if ($e->principalPack)
                                            <span style="font-size:.63rem;color:#4d7cf5;margin-left:.3rem;">(Pack: {{ $e->principalPack->nome }})</span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <select name="estoque_item[]" style="display:none;">
                            <option value=""></option>
                            @foreach ($estoque as $e)
                                <option value="{{ $e['id'] }}">{{ $e['item_material'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label
                            style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                            Qtd.
                        </label>
                        <div class="estoque-qty-wrap" style="display:flex;align-items:stretch;gap:0;">
                            <button type="button" class="estoque-qty-btn estoque-qty-minus" tabindex="-1"
                                style="width:36px;border:1px solid var(--dm-border);border-right:none;border-radius:6px 0 0 6px;background:var(--dm-surface-2);color:var(--dm-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;padding:0;">−</button>
                            <input type="number" name="qnt_sub[]" value="1" min="1"
                                style="flex:1;min-width:0;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);padding:.375rem 0;font-size:.85rem;outline:none;text-align:center;-moz-appearance:textfield;appearance:textfield;">
                            <button type="button" class="estoque-qty-btn estoque-qty-plus" tabindex="-1"
                                style="width:36px;border:1px solid var(--dm-border);border-left:none;border-radius:0 6px 6px 0;background:var(--dm-surface-2);color:var(--dm-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;padding:0;">+</button>
                        </div>
                        <style>
                            .estoque-qty-wrap input[type=number]::-webkit-outer-spin-button,
                            .estoque-qty-wrap input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
                            .estoque-qty-btn:hover { background: var(--dm-border) !important; }
                        </style>
                    </div>
                    <button type="button" class="remove-assign-row saas-btn secondary"
                        style="min-width:2.5rem;padding:.45rem;border-radius:6px;">&times;</button>
                </div>
            </div>

            <button type="button" id="add_assign_item" class="saas-btn secondary"
                style="width:100%;justify-content:center;padding:.55rem;">Adicionar item</button>

            {{-- Pack preview --}}
            <div id="pack_preview_section"
                style="display:none;background:rgba(77,124,245,.07);border:1px solid rgba(77,124,245,.22);border-radius:8px;padding:.75rem;">
                <div style="font-size:.72rem;font-weight:700;color:#4d7cf5;margin-bottom:.45rem;display:flex;align-items:center;gap:.35rem;">
                    <i class="bi bi-collection"></i>
                    Pack: <span id="pack_preview_nome"></span>
                </div>
                <div style="font-size:.68rem;color:var(--dm-text-muted);margin-bottom:.5rem;">
                    Estes itens serão atribuídos automaticamente. Desmarque para excluir.
                </div>
                <div id="pack_preview_items" style="display:grid;gap:.3rem;"></div>
            </div>

            <div>
                <label
                    style="font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--dm-text-muted);display:block;margin-bottom:.3rem;">
                    Observação
                </label>
                <textarea name="msg" rows="3" placeholder="Observação sobre o item atribuído..."
                    style="width:100%;background:var(--dm-surface-2);border:1px solid var(--dm-border);color:var(--dm-text);border-radius:6px;padding:.5rem .75rem;font-size:.82rem;resize:vertical;outline:none;"></textarea>
            </div>

            <div style="margin-top:auto;padding-top:.5rem;">
                <button type="submit" class="saas-btn gg"
                    style="width:100%;justify-content:center;padding:.55rem;background:#22c97b!important;color:#fff!important;border-color:#22c97b!important;">
                    <i class="bi bi-check-circle me-1"></i> Atribuir estoque
                </button>
            </div>
        </form>
    </div>

    <div class="col-md-6" style="display:flex;flex-direction:column;">
        @include('admin.modal.page_content._detalhes_header', ['chamado' => $chamado])

        @include('admin.modal.page_content._chamado_header', ['chamado' => $chamado])

        <div style="flex:1;overflow-y:auto;">

            @include('admin.modal.page_content._payload_cards', ['chamado' => $chamado])

            @if ($chamado->estoqueAssignments->whereNull('fulfilled_at')->isNotEmpty())
                <div
                    style="margin-top:1rem;padding:1rem;background:rgba(34,201,123,.06);border:1px solid rgba(34,201,123,.2);border-radius:8px;">
                    <div style="font-size:.8rem;font-weight:700;color:#166c46;margin-bottom:.65rem;">Itens de estoque
                        atribuídos</div>
                    @foreach ($chamado->estoqueAssignments->whereNull('fulfilled_at') as $assignment)
                        <div
                            style="display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.35rem;padding:.4rem;background:rgba(255,255,255,.02);border-radius:4px;">
                            <div style="flex:1;">
                                <div style="font-size:.82rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;">
                                    {{ $assignment->estoque?->item_material ?? 'Item removido' }}
                                    @if ($assignment->from_pack_id && $assignment->fromPack)
                                        <span style="display:inline-flex;align-items:center;gap:.2rem;font-size:.63rem;font-weight:600;padding:.1rem .4rem;border-radius:999px;background:rgba(77,124,245,.12);color:#4d7cf5;border:1px solid rgba(77,124,245,.22);">
                                            <i class="bi bi-collection" style="font-size:.6rem;"></i> {{ $assignment->fromPack->nome }}
                                        </span>
                                    @endif
                                </div>
                                <div style="font-size:.75rem;color:#666;margin-top:.2rem;">Qtd:
                                    <strong>{{ $assignment->quantidade }}</strong></div>
                            </div>
                            <button type="button" class="remove-estoque-item saas-btn secondary"
                                data-assignment-id="{{ $assignment->id }}"
                                style="padding:.25rem .4rem;font-size:.85rem;min-width:2.2rem;justify-content:center;">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    @endforeach
                    <div style="font-size:.75rem;color:#245b3a;margin-top:.5rem;">Será baixado quando o chamado for
                        solucionado.</div>
                </div>
            @endif

            <div class="conteudo-date-footer">
                Aberto em <strong>{{ date('d/m/Y H:i', strtotime($chamado->date_creation)) }}</strong>
            </div>
        </div>
    </div>
</div>

<div class="modal-footer conteudo-modal-footer">
    <div>
        @include('admin.modal._status_badge', ['chamado' => $chamado])
    </div>
    {{-- Ações --}}
    @include('admin.modal._acoes-dropdown', ['chamado' => $chamado])
</div>

<script>
    // ---- custom dropdown ----
    $(document).off('click', '.estoque-select-trigger').on('click', '.estoque-select-trigger', function(e) {
        e.stopPropagation();
        var wrap = $(this).closest('.estoque-select-wrap');
        var dropdown = wrap.find('.estoque-select-dropdown');
        var isOpen = dropdown.is(':visible');
        $('.estoque-select-dropdown').hide();
        if (!isOpen) {
            dropdown.show();
            wrap.find('.estoque-select-search').focus();
        }
    });

    $(document).off('input', '.estoque-select-search').on('input', '.estoque-select-search', function() {
        var search = $(this).val().toLowerCase();
        $(this).closest('.estoque-select-dropdown').find('.estoque-option').each(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
        });
    });

    $(document).off('click', '.estoque-option').on('click', '.estoque-option', function() {
        var wrap = $(this).closest('.estoque-select-wrap');
        var value = $(this).data('value');
        var rawText = $(this).clone().children().remove().end().text().trim();
        var packRaw = $(this).attr('data-pack');

        wrap.find('select').val(value);
        wrap.find('.estoque-select-label').text(rawText || 'Selecionar...').css('color', value ? 'var(--dm-text)' : 'var(--dm-text-muted)');
        wrap.find('.estoque-select-dropdown').hide();

        // Pack preview only for the first assign row
        if (wrap.closest('.estoque-assign-row').is($('#estoque_assign_rows .estoque-assign-row:first'))) {
            if (value && packRaw) {
                try {
                    renderPackPreview(JSON.parse(packRaw));
                } catch(err) {
                    clearPackPreview();
                }
            } else {
                clearPackPreview();
            }
        }
    });

    $(document).off('click.estoqueOutside').on('click.estoqueOutside', function(e) {
        if (!$(e.target).closest('.estoque-select-wrap').length) {
            $('.estoque-select-dropdown').hide();
        }
    });

    // ---- add/remove rows ----
    $(document).off('click', '#add_assign_item').on('click', '#add_assign_item', function() {
        var row = $('.estoque-assign-row:first').clone();
        row.find('.estoque-select-label').text('Selecionar...').css('color', 'var(--dm-text-muted)');
        row.find('select').val('');
        row.find('.estoque-select-search').val('');
        row.find('.estoque-option').show();
        row.find('input[type="number"]').val(1);
        $('#estoque_assign_rows').append(row);
    });

    $(document).off('click', '.remove-assign-row').on('click', '.remove-assign-row', function() {
        if ($('#estoque_assign_rows .estoque-assign-row').length > 1) {
            $(this).closest('.estoque-assign-row').remove();
        }
    });

    // ---- qty controls ----
    $(document).off('click', '.estoque-qty-minus').on('click', '.estoque-qty-minus', function() {
        var input = $(this).closest('.estoque-qty-wrap').find('input[type=number]');
        var val = parseInt(input.val()) || 1;
        if (val > 1) input.val(val - 1);
    });

    $(document).off('click', '.estoque-qty-plus').on('click', '.estoque-qty-plus', function() {
        var input = $(this).closest('.estoque-qty-wrap').find('input[type=number]');
        var val = parseInt(input.val()) || 1;
        input.val(val + 1);
    });

    // ---- pack preview ----
    function clearPackPreview() {
        $('#pack_preview_section').hide();
        $('#pack_preview_items').empty();
        $('#form_assign_stock .pack-hidden-item').remove();
    }

    function renderPackPreview(pack) {
        if (!pack || !pack.items || pack.items.length === 0) {
            clearPackPreview();
            return;
        }

        $('#pack_preview_nome').text(pack.nome);
        $('#pack_preview_items').empty();
        $('#form_assign_stock .pack-hidden-item').remove();

        // Sentinel: tells the server the pack preview was shown (so it knows to filter by pack_sub_ids[])
        $('#form_assign_stock').append('<input type="hidden" class="pack-hidden-item" name="pack_preview" value="1">');

        pack.items.forEach(function(item) {
            var cbId = 'pack_cb_' + item.estoque_id;
            var $row = $('<div style="display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;background:var(--dm-surface-2);border-radius:5px;">' +
                '<label style="display:flex;align-items:center;gap:.45rem;cursor:pointer;flex:1;margin:0;">' +
                '<input type="checkbox" id="' + cbId + '" checked style="cursor:pointer;accent-color:#4d7cf5;">' +
                '<span style="font-size:.8rem;color:var(--dm-text);">' + item.item_material + '</span>' +
                '<span style="font-size:.7rem;color:var(--dm-text-muted);">&times;' + item.quantidade + '</span>' +
                '</label></div>');
            $('#pack_preview_items').append($row);

            // Submit as pack_sub_ids[], NOT as estoque_item[] — server handles qty calculation and from_pack_id
            var $hidItem = $('<input type="hidden" class="pack-hidden-item" name="pack_sub_ids[]">').val(item.estoque_id);
            $('#form_assign_stock').append($hidItem);

            $('#' + cbId).on('change', function() {
                $hidItem.prop('disabled', !this.checked);
            });
        });

        $('#pack_preview_section').show();
    }

    // ---- remove assigned stock item ----
    $(document).off('click', '.remove-estoque-item').on('click', '.remove-estoque-item', function() {
        var assignmentId = $(this).attr('data-assignment-id');
        var btn = $(this);

        if (!confirm('Remover este item de estoque?')) return;

        $.ajax({
            url: '{{ route('remove_stock_assignment') }}',
            type: 'POST',
            data: { assignment_id: assignmentId, "_token": "{{ csrf_token() }}" },
            success: function() {
                btn.closest('[style*="display:flex"]').slideUp(300, function() { $(this).remove(); });
            },
            error: function() { alert('Erro ao remover item de estoque'); }
        });
    });
</script>