@extends('admin.layouts.app')

@push('styles')
<style>
    .alert-card {
        border-left: 4px solid;
        transition: transform 0.2s;
    }
    .alert-card:hover {
        transform: translateX(5px);
    }
    .alert-danger-custom {
        border-left-color: #dc3545;
    }
    .alert-warning-custom {
        border-left-color: #ffc107;
    }
</style>
@endpush

@section('title', 'Alertas de Stock')

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Alertas de Stock</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('inicio') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Alertas</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!--end breadcrumb-->

        <!-- Resumo de Alertas -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
            <div class="col">
                <div class="card radius-10 border-0 shadow-sm bg-danger text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0">Artigos Sem Stock</p>
                                <h4 class="my-1">{{ count($itensSemStock) }}</h4>
                                <small>Requer atenção imediata</small>
                            </div>
                            <div class="ms-auto fs-1">
                                <i class="bi bi-exclamation-circle"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card radius-10 border-0 shadow-sm bg-warning text-dark">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0">Artigos com Baixo Stock</p>
                                <h4 class="my-1">{{ count($itensBaixoStock) }}</h4>
                                <small>Necessário reposição</small>
                            </div>
                            <div class="ms-auto fs-1">
                                <i class="bi bi-exclamation-triangle"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card radius-10 border-0 shadow-sm bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0">Total de Alertas</p>
                                <h4 class="my-1">{{ count($itensSemStock) + count($itensBaixoStock) }}</h4>
                                <small>Artigos requerem atenção</small>
                            </div>
                            <div class="ms-auto fs-1">
                                <i class="bi bi-bell"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Artigos Sem Stock -->
        @if(count($itensSemStock) > 0)
            <div class="card shadow-sm radius-10 border-0 mb-4">
                <div class="card-header bg-danger text-white">
                    <h6 class="mb-0"><i class="bi bi-exclamation-circle"></i> Artigos Sem Stock ({{ count($itensSemStock) }})</h6>
                </div>
                <div class="card-body">
                    @foreach($itensSemStock as $stock)
                        <div class="alert alert-card alert-danger-custom mb-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $stock->item->nome }}</strong> no depósito <strong>{{ $stock->deposito->nome }}</strong>
                                    <br>
                                    <small class="text-muted">Código: {{ $stock->item->codigo }} | Categoria: {{ $stock->item->categoria->nome ?? 'N/A' }}</small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-danger">0 unidades</span>
                                    <br>
                                    <small class="text-muted">Reposição: {{ $stock->item->ponto_reposicao }}</small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Artigos com Baixo Stock -->
        @if(count($itensBaixoStock) > 0)
            <div class="card shadow-sm radius-10 border-0 mb-4">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Artigos com Baixo Stock ({{ count($itensBaixoStock) }})</h6>
                </div>
                <div class="card-body">
                    @foreach($itensBaixoStock as $stock)
                        <div class="alert alert-card alert-warning-custom mb-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $stock->item->nome }}</strong> no depósito <strong>{{ $stock->deposito->nome }}</strong>
                                    <br>
                                    <small class="text-muted">Código: {{ $stock->item->codigo }} | Categoria: {{ $stock->item->categoria->nome ?? 'N/A' }}</small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-warning text-dark">{{ $stock->quantidade }} unidades</span>
                                    <br>
                                    <small class="text-muted">Reposição: {{ $stock->item->ponto_reposicao }}</small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Nenhum Alerta -->
        @if(count($itensSemStock) == 0 && count($itensBaixoStock) == 0)
            <div class="card shadow-sm radius-10 border-0">
                <div class="card-body text-center py-5">
                    <i class="bi bi-check-circle text-success" style="font-size: 4rem;"></i>
                    <h4 class="mt-3">Tudo Certo!</h4>
                    <p class="text-muted">Não há alertas de stock no momento.</p>
                </div>
            </div>
        @endif

        <!-- Ações Recomendadas -->
        @if(count($itensSemStock) > 0 || count($itensBaixoStock) > 0)
            <div class="card shadow-sm radius-10 border-0">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-lightbulb"></i> Ações Recomendadas</h6>
                </div>
                <div class="card-body">
                    <ul>
                        @if(count($itensSemStock) > 0)
                            <li>Registar <strong>entradas</strong> para os {{ count($itensSemStock) }} artigos sem stock</li>
                        @endif
                        @if(count($itensBaixoStock) > 0)
                            <li>Planejar reposição para os {{ count($itensBaixoStock) }} artigos com baixo stock</li>
                        @endif
                        <li>Revisar os <strong>pontos de reposição</strong> configurados</li>
                        <li>Verificar se há <strong>transferências pendentes</strong> que possam resolver a situação</li>
                    </ul>

                    <div class="mt-3">
                        @can('escrever-movimentacoes')
                        <a href="{{ route('movimentacoes.create') }}" class="btn btn-success">
                            <i class="bi bi-plus-circle"></i> Registar Entrada
                        </a>
                        @endcan
                        @can('escrever-transferencias')
                        <a href="{{ route('transferencias.create') }}" class="btn btn-primary">
                            <i class="bi bi-arrow-left-right"></i> Nova Transferência
                        </a>
                        @endcan
                        <a href="{{ route('stock.dashboard') }}" class="btn btn-info">
                            <i class="bi bi-graph-up"></i> Ver Dashboard
                        </a>
                    </div>
                </div>
            </div>
        @endif

    </main>
@endsection

@push('scripts')
@endpush