@php
$title = 'Detalhes do Saldo';
@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="#" onclick="carregarConteudo(`{{ route('suprimentos.saldos') }}`)" class="text-decoration-none text-secondary">Saldos</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Detalhes do Saldo</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-eye me-2 text-primary"></i>Detalhes
            </h1>
            <span class="text-muted small">Visualize as informações completas do saldo</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('suprimentos.saldos') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold">Informações do Saldo</span>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p class="mb-1"><strong>Produto:</strong></p>
                            <p>{{ $saldo->produto->nome }}</p>
                            <small class="text-muted">Código: {{ $saldo->produto->codigo }}</small>
                        </div>
                        <div class="col-md-3">
                            <p class="mb-1"><strong>Localização:</strong></p>
                            <p>{{ $saldo->localizacao->nome }}</p>
                            <small class="text-muted">{{ $saldo->localizacao->tipo }}</small>
                        </div>
                        <div class="col-md-3">
                            <p class="mb-1"><strong>Quantidade Atual:</strong></p>
                            <p class="fs-4 fw-bold">
                                @if($saldo->quantidade_atual > 0)
                                    <span class="text-success">{{ number_format($saldo->quantidade_atual, 0, ',', '.') }}</span>
                                @elseif($saldo->quantidade_atual < 0)
                                    <span class="text-danger">{{ number_format($saldo->quantidade_atual, 0, ',', '.') }}</span>
                                @else
                                    <span class="text-secondary">0</span>
                                @endif
                                <small class="text-muted">{{ $saldo->produto->unidadeMedida->unidade ?? '' }}</small>
                            </p>
                        </div>
                    </div>
                    @if($saldo->produto->estoque_minimo)
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <p class="mb-1"><strong>Estoque Mínimo:</strong></p>
                            <p>{{ number_format($saldo->produto->estoque_minimo, 0, ',', '.') }} {{ $saldo->produto->unidadeMedida->unidade ?? '' }}</p>
                        </div>
                        <div class="col-md-3">
                            <p class="mb-1"><strong>Status:</strong></p>
                            <p>
                                @if($saldo->quantidade_atual < $saldo->produto->estoque_minimo)
                                    <span class="badge bg-danger">Abaixo do Mínimo</span>
                                @else
                                    <span class="badge bg-success">Normal</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold">Histórico de Movimentações</span>
                </div>
                <div class="card-body">
                    @if($movimentacoes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Data</th>
                                        <th>Tipo</th>
                                        <th>Quantidade</th>
                                        <th>Origem</th>
                                        <th>Usuário</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($movimentacoes as $mov)
                                        <tr>
                                            <td>{{ $mov->created_at->format('d/m/Y H:i:s') }}</td>
                                            <td>
                                                @if($mov->tipo == 'ENTRADA')
                                                    <span class="badge bg-success">Entrada</span>
                                                @elseif($mov->tipo == 'SAIDA')
                                                    <span class="badge bg-danger">Saída</span>
                                                @elseif($mov->tipo == 'AJUSTE')
                                                    <span class="badge bg-info">Ajuste</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ $mov->tipo }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($mov->tipo == 'ENTRADA')
                                                    <span class="text-success">+{{ number_format($mov->quantidade, 0, ',', '.') }}</span>
                                                @elseif($mov->tipo == 'SAIDA')
                                                    <span class="text-danger">-{{ number_format($mov->quantidade, 0, ',', '.') }}</span>
                                                @else
                                                    <span>{{ number_format($mov->quantidade, 0, ',', '.') }}</span>
                                                @endif
                                                {{ $saldo->produto->unidadeMedida->unidade ?? '' }}
                                            </td>
                                            <td>{{ $mov->origem ?? '-' }}</td>
                                            <td>{{ $mov->usuarioInclusao->name ?? $mov->usuario->name ?? '-' }}</td>
                                            <td class="text-center">
                                                <a href="#" onclick="carregarConteudo(`{{ route('suprimentos.movimentacoes.visualizar', $mov->id) }}`)" class="text-decoration-none">
                                                    <i class="bi bi-eye icon-action view" data-bs-toggle="tooltip" title="Visualizar"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center text-muted py-4">
                            <i class="bi bi-inbox fs-1"></i>
                            <p class="mt-2">Nenhuma movimentação encontrada para este produto nesta localização.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>