@extends('layouts.app')

@section('title', 'Confirmar Entrada de Estoque')

@section('content')
<style>
.action-pills { display:flex; gap:.4rem; }
.action-pill  {
    padding:.3rem .75rem; border-radius:20px; font-size:.8rem; font-weight:600;
    border:2px solid var(--border); background:#fff; cursor:pointer; white-space:nowrap;
    transition:.12s;
}
.action-pill.selected-entrada  { border-color:var(--success); background:#f0fdf4; color:#15803d; }
.action-pill.selected-criar    { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.action-pill.selected-ignorar  { border-color:#e2e8f0; background:#f8fafc; color:#94a3b8; }
.item-row { transition:opacity .15s; }
.item-row.ignored { opacity:.45; }
.produto-select { width:100%; border:1px solid var(--border); border-radius:6px; padding:.4rem .5rem; font-size:.85rem; }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">Confirmar Entrada de Estoque</h1>
        <p class="page-subtitle">Revise os itens e defina a ação para cada produto antes de confirmar</p>
    </div>
    <a href="{{ route('stock.xml.index') }}" class="btn btn-ghost">← Voltar</a>
</div>

{{-- Cabeçalho da Nota --}}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-body" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;padding:1rem;">
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Emitente</div>
            <div style="font-weight:600;margin-top:2px;">{{ $nota['emitente'] ?: '—' }}</div>
            <div style="font-size:.8rem;color:var(--text-muted);">{{ $nota['cnpj_emit'] ? preg_replace('/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/', '$1.$2.$3/$4-$5', $nota['cnpj_emit']) : '' }}</div>
        </div>
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Nº / Série</div>
            <div style="font-weight:600;margin-top:2px;">{{ $nota['numero'] ?: '—' }} / {{ $nota['serie'] ?: '—' }}</div>
        </div>
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Emissão</div>
            <div style="font-weight:600;margin-top:2px;">{{ $nota['data_emissao'] ?: '—' }}</div>
        </div>
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Total NF-e</div>
            <div style="font-weight:700;color:var(--primary);margin-top:2px;font-size:1.1rem;">
                R$ {{ number_format($nota['total'] ?? 0, 2, ',', '.') }}
            </div>
        </div>
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Itens</div>
            <div style="font-weight:600;margin-top:2px;">{{ count($items) }} produto(s)</div>
        </div>
        @if(isset($nfeDocument) && $nfeDocument->stock_imported_at)
        <div>
            <div style="font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;">Importado anteriormente</div>
            <div style="font-weight:600;margin-top:2px;color:#d97706;">{{ $nfeDocument->stock_imported_at->format('d/m/Y H:i') }}</div>
        </div>
        @endif
    </div>
</div>

{{-- Legenda --}}
<div style="display:flex;gap:.75rem;align-items:center;margin-bottom:1rem;font-size:.82rem;flex-wrap:wrap;">
    <span style="font-weight:600;color:var(--text-muted);">Ação por item:</span>
    <span style="display:flex;align-items:center;gap:.3rem;"><span style="width:10px;height:10px;border-radius:50%;background:#22c55e;display:inline-block;"></span> <strong>Entrada</strong> — produto já cadastrado</span>
    <span style="display:flex;align-items:center;gap:.3rem;"><span style="width:10px;height:10px;border-radius:50%;background:#2563eb;display:inline-block;"></span> <strong>Criar</strong> — cadastra e dá entrada</span>
    <span style="display:flex;align-items:center;gap:.3rem;"><span style="width:10px;height:10px;border-radius:50%;background:#cbd5e1;display:inline-block;"></span> <strong>Ignorar</strong> — não lança nada</span>
    <button type="button" onclick="setAll('entrada')" class="btn btn-sm btn-ghost">Todos: Entrada</button>
    <button type="button" onclick="setAll('ignorar')"  class="btn btn-sm btn-ghost">Todos: Ignorar</button>
</div>

<form method="POST" action="{{ route('stock.xml.process') }}">
    @csrf

    <div class="card">
        <div class="card-body" style="padding:0;overflow-x:auto;">
            <table class="data-table" style="min-width:900px;">
                <thead>
                    <tr>
                        <th style="width:40px;">#</th>
                        <th>Produto na Nota</th>
                        <th style="width:120px;">NCM</th>
                        <th style="width:80px;">Unid.</th>
                        <th style="width:90px;text-align:right;">Qtd.</th>
                        <th style="width:110px;text-align:right;">Custo Unit.</th>
                        <th>Ação / Produto</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $idx => $item)
                    <tr class="item-row" id="row-{{ $idx }}" data-idx="{{ $idx }}">
                        <td>{{ $item['item'] }}</td>
                        <td>
                            <div style="font-weight:500;font-size:.9rem;">{{ $item['name'] }}</div>
                            <div style="font-size:.75rem;color:var(--text-muted);">
                                Cód: {{ $item['code'] ?: '—' }}
                                @if($item['barcode']) · EAN: {{ $item['barcode'] }} @endif
                            </div>
                        </td>
                        <td style="font-size:.82rem;">{{ $item['ncm'] ?: '—' }}</td>
                        <td>{{ $item['unit'] }}</td>
                        <td style="text-align:right;">
                            <input type="number" name="qty[{{ $idx }}]"
                                   value="{{ $item['qty'] }}" step="0.0001" min="0"
                                   class="form-control" style="width:80px;text-align:right;font-size:.85rem;padding:.3rem .5rem;">
                        </td>
                        <td style="text-align:right;">
                            <input type="number" name="unit_cost[{{ $idx }}]"
                                   value="{{ number_format($item['unit_cost'], 4, '.', '') }}" step="0.0001" min="0"
                                   class="form-control" style="width:100px;text-align:right;font-size:.85rem;padding:.3rem .5rem;">
                        </td>
                        <td>
                            {{-- Selector de ação --}}
                            <div class="action-pills" style="margin-bottom:.5rem;">
                                @if($item['product_id'])
                                <button type="button"
                                        class="action-pill selected-entrada"
                                        onclick="setAction({{ $idx }}, 'entrada')"
                                        id="pill-entrada-{{ $idx }}">
                                    ✓ Entrada
                                </button>
                                @endif
                                <button type="button"
                                        class="action-pill {{ !$item['product_id'] ? 'selected-criar' : '' }}"
                                        onclick="setAction({{ $idx }}, 'criar')"
                                        id="pill-criar-{{ $idx }}">
                                    + Criar produto
                                </button>
                                <button type="button"
                                        class="action-pill"
                                        onclick="setAction({{ $idx }}, 'ignorar')"
                                        id="pill-ignorar-{{ $idx }}">
                                    ✕ Ignorar
                                </button>
                            </div>

                            <input type="hidden" name="action[{{ $idx }}]"
                                   id="action-{{ $idx }}"
                                   value="{{ $item['product_id'] ? 'entrada' : 'criar' }}">

                            {{-- Seletor de produto existente --}}
                            <div id="select-wrapper-{{ $idx }}"
                                 style="{{ !$item['product_id'] ? 'display:none;' : '' }}">
                                <select name="product_id[{{ $idx }}]"
                                        id="product-select-{{ $idx }}"
                                        class="produto-select">
                                    <option value="">— selecione o produto —</option>
                                    @foreach($products as $p)
                                    <option value="{{ $p->id }}"
                                            @selected($p->id === $item['product_id'])>
                                        {{ $p->name }}
                                        @if($p->code) ({{ $p->code }}) @endif
                                    </option>
                                    @endforeach
                                </select>
                                @if($item['product_name_found'])
                                <div style="font-size:.75rem;color:var(--success);margin-top:3px;">
                                    ✓ Produto encontrado: <strong>{{ $item['product_name_found'] }}</strong>
                                </div>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div style="margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
        <div style="font-size:.875rem;color:var(--text-muted);">
            <span id="summary-text"></span>
        </div>
        <div style="display:flex;gap:.75rem;">
            <a href="{{ route('stock.xml.index') }}" class="btn btn-ghost">Cancelar</a>
            <button type="submit" class="btn btn-primary" style="padding:.75rem 2rem;">
                Confirmar Entrada no Estoque
            </button>
        </div>
    </div>
</form>

<script>
var states = {};

@foreach($items as $idx => $item)
states[{{ $idx }}] = '{{ $item['product_id'] ? 'entrada' : 'criar' }}';
@endforeach

function setAction(idx, action) {
    states[idx] = action;
    document.getElementById('action-' + idx).value = action;

    // Atualiza pills
    ['entrada','criar','ignorar'].forEach(function(a) {
        var pill = document.getElementById('pill-' + a + '-' + idx);
        if (!pill) return;
        pill.classList.remove('selected-entrada','selected-criar','selected-ignorar');
        if (a === action) pill.classList.add('selected-' + action);
    });

    // Mostra/oculta seletor de produto
    var wrapper = document.getElementById('select-wrapper-' + idx);
    if (wrapper) wrapper.style.display = action === 'entrada' ? 'block' : 'none';

    // Dimmer a linha se ignorado
    var row = document.getElementById('row-' + idx);
    if (row) row.classList.toggle('ignored', action === 'ignorar');

    updateSummary();
}

function setAll(action) {
    Object.keys(states).forEach(function(idx) {
        setAction(parseInt(idx), action);
    });
}

function updateSummary() {
    var entrada = 0, criar = 0, ignorar = 0;
    Object.values(states).forEach(function(a) {
        if (a === 'entrada') entrada++;
        else if (a === 'criar') criar++;
        else ignorar++;
    });
    var parts = [];
    if (entrada) parts.push(entrada + ' entrada(s)');
    if (criar)   parts.push(criar   + ' a criar');
    if (ignorar) parts.push(ignorar + ' ignorado(s)');
    document.getElementById('summary-text').textContent = parts.length ? 'Resumo: ' + parts.join(' · ') : '';
}

updateSummary();
</script>
@endsection