@php
$title = 'Listagem de Lotes';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-secondary">Suprimentos</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Lotes</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-archive me-2 text-primary"></i>Lotes de Estoque
            </h1>
            <span class="text-muted small">Controle de lotes, rastreabilidade e FIFO/FEFO</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-primary" 
                    onclick="carregarConteudo(`{{ route('estoque.lotes.create') }}`)">
                <i class="bi bi-plus-circle me-2"></i>Novo Lote
            </button>
        </div>
    </div>

    <!-- Estatísticas -->
    <div class="row g-2 mb-3">
        <div class="col-md-3">
            <div class="card border-success shadow-sm">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Disponíveis</h6>
                            <h4 class="mb-0 text-success">{{ $estatisticas['disponiveis'] ?? 0 }}</h4>
                        </div>
                        <div class="text-success" style="font-size: 2rem;">
                            <i class="bi bi-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning shadow-sm">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Próximos a Vencer</h6>
                            <h4 class="mb-0 text-warning">{{ $estatisticas['proximos_vencer'] ?? 0 }}</h4>
                        </div>
                        <div class="text-warning" style="font-size: 2rem;">
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger shadow-sm">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Vencidos</h6>
                            <h4 class="mb-0 text-danger">{{ $estatisticas['vencidos'] ?? 0 }}</h4>
                        </div>
                        <div class="text-danger" style="font-size: 2rem;">
                            <i class="bi bi-calendar-x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-secondary shadow-sm">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Bloqueados</h6>
                            <h4 class="mb-0 text-secondary">{{ $estatisticas['bloqueados'] ?? 0 }}</h4>
                        </div>
                        <div class="text-secondary" style="font-size: 2rem;">
                            <i class="bi bi-lock-fill"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow border-0">
        <div class="card-body">
            <div class="filter-section mb-4">
                <div class="row">
                    <div class="col-md-5 mb-2">
                        <div class="input-group-with-loader">
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="text" class="form-control" id="buscarLote" 
                                       placeholder="Buscar por código do lote..." 
                                       oninput="buscarRegistros('buscarLote', `{{ route('estoque.lotes.index') }}`)">
                            </div>
                            <div id="buscarLote-loader" class="search-loader-container">
                                <div class="search-loader">
                                    <div class="search-loader-dot"></div>
                                    <div class="search-loader-dot"></div>
                                    <div class="search-loader-dot"></div>
                                </div>
                            </div>
                        </div>
                        <small class="text-muted">Digite no mínimo 2 caracteres para buscar</small>
                    </div>
                    <div class="col-md-3 mb-2">
                        <select class="form-select" id="filtroProduto">
                            <option value="">Todos os produtos</option>
                            @if(isset($produtos))
                                @foreach($produtos as $produto)
                                    <option value="{{ $produto->id }}">{{ $produto->nome }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <select class="form-select" id="filtroStatus" onchange="filtrarLotes()">
                            <option value="">Todos os status</option>
                            <option value="DISPONIVEL">Disponível</option>
                            <option value="QUARENTENA">Quarentena</option>
                            <option value="BLOQUEADO">Bloqueado</option>
                            <option value="REPROVADO">Reprovado</option>
                            <option value="ESGOTADO">Esgotado</option>
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <select class="form-select" id="filtroVencimento" onchange="filtrarLotes()">
                            <option value="">Filtros rápidos</option>
                            <option value="vencidos">Vencidos</option>
                            <option value="proximos">Próximos a Vencer</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover table-fixed-column" id="tabelaLotes">
                    <thead>
                        <tr>
                            <th class="sortable">Código</th>
                            <th class="sortable">Produto</th>
                            <th class="text-end sortable">Quantidade Atual</th>
                            <th class="sortable">Data Entrada</th>
                            <th class="sortable">Validade</th>
                            <th class="sortable">Status</th>
                            <th class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($lotes) && $lotes->count() > 0)
                            @foreach($lotes as $lote)
                            <tr class="{{ $lote->isVencido() ? 'table-danger' : ($lote->diasParaVencer() <= 30 && $lote->diasParaVencer() > 0 ? 'table-warning' : '') }}">
                                <td>
                                    <strong>{{ $lote->codigo_lote }}</strong>
                                </td>
                                <td>{{ $lote->produto->nome }}</td>
                                <td class="text-end">
                                    <strong>{{ number_format($lote->quantidade_atual, 0, ',', '.') }}</strong>
                                </td>
                                <td>{{ $lote->data_entrada->format('d/m/Y') }}</td>
                                <td>
                                    @if($lote->data_validade)
                                        {{ $lote->data_validade->format('d/m/Y') }}
                                        @if($lote->isVencido())
                                            <br><small class="text-danger fw-bold">VENCIDO</small>
                                        @elseif($lote->diasParaVencer() <= 30 && $lote->diasParaVencer() > 0)
                                            <br><small class="text-warning">{{ $lote->diasParaVencer() }} dias</small>
                                        @endif
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($lote->status == 'DISPONIVEL')
                                        <span class="badge bg-success">Disponível</span>
                                    @elseif($lote->status == 'BLOQUEADO')
                                        <span class="badge bg-danger">Bloqueado</span>
                                    @elseif($lote->status == 'QUARENTENA')
                                        <span class="badge bg-warning text-dark">Quarentena</span>
                                    @elseif($lote->status == 'ESGOTADO')
                                        <span class="badge bg-secondary">Esgotado</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $lote->status }}</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="#" onclick="carregarConteudo(`{{ route('estoque.lotes.show', $lote->id) }}`)" class="text-decoration-none me-2">
                                        <i class="bi bi-eye icon-action view" data-bs-toggle="tooltip" title="Visualizar"></i>
                                    </a>
                                    <a href="#" onclick="carregarConteudo(`{{ route('rastreabilidade.lote') }}?lote_id={{ $lote->id }}`)" class="text-decoration-none me-2">
                                        <i class="bi bi-diagram-3 icon-action text-info" data-bs-toggle="tooltip" title="Rastreabilidade"></i>
                                    </a>
                                    @if($lote->status == 'DISPONIVEL')
                                        <a href="#" onclick="bloquearLote({{ $lote->id }})" class="text-decoration-none">
                                            <i class="bi bi-lock icon-action text-danger" data-bs-toggle="tooltip" title="Bloquear Lote"></i>
                                        </a>
                                    @elseif($lote->status == 'BLOQUEADO')
                                        <a href="#" onclick="liberarLote({{ $lote->id }})" class="text-decoration-none">
                                            <i class="bi bi-unlock icon-action text-success" data-bs-toggle="tooltip" title="Liberar Lote"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        @else
                            <x-empty-state 
                                icon="bi-archive"
                                title="Nenhum lote encontrado"
                                message="Os lotes são criados automaticamente ao receber compras"
                                buttonText="Ver Compras"
                                buttonRoute="{{ route('suprimentos.compras') }}"
                                colspan="7"
                            />
                        @endif
                    </tbody>
                </table>
            </div>

            @if(isset($lotes) && $lotes->hasPages())
                <div class="mt-3">
                    {{ $lotes->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<script src="{{ asset('js/lotes.js') }}"></script>