@extends('admin.layouts.app')

@push('styles')
@endpush

@section('title', 'Detalhes do Artigo ')

@section('content')
    <main class="page-content">
        @canany(['ler-itens', 'gerir-itens'])
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Artigos</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"><a href="{{ route('itens.index') }}">Itens</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Detalhes</li>
                        </ol>
                    </nav>
                </div>
                <div class="ms-auto">
                    @can('escrever-itens')
                        <a href="{{ route('itens.edit', Crypt::encryptString($item->id)) }}" class="btn btn-warning btn-sm">
                            <i class="bi bi-pencil"></i> Editar
                        </a>
                    @endcan
                    <a href="{{ route('itens.index') }}" class="btn btn-secondary btn-sm">
                        <i class="bi bi-arrow-left"></i> Voltar
                    </a>
                </div>
            </div>
            <!--end breadcrumb-->

            <!-- Card Principal com Imagem e Info Básica -->
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <div class="card shadow-sm radius-10 border-0 h-100">
                        <div class="card-body text-center">
                            <img src="{{ $item->imagem_url }}" alt="{{ $item->nome }}"
                                class="img-fluid rounded mb-3"
                                style="max-height: 300px; object-fit: cover; box-shadow: 0 4px 6px rgba(0,0,0,0.1);" />

                            <h4 class="mb-2">{{ $item->nome }}</h4>
                            <p class="text-muted mb-3">
                                <i class="bi bi-tag"></i> {{ $item->numero_item }}
                            </p>

                            <div class="d-flex justify-content-center gap-2 mb-3">
                                <span class="badge bg-{{ $item->estado === 'activo' ? 'success' : 'secondary' }} px-3 py-2">
                                    <i class="bi bi-{{ $item->estado === 'activo' ? 'check-circle' : 'x-circle' }}"></i>
                                    {{ ucfirst($item->estado) }}
                                </span>
                                <span class="badge bg-info text-dark px-3 py-2">
                                    <i class="bi bi-bookmark"></i>
                                    {{ $item->categoria->nome ?? 'N/A' }}
                                </span>
                            </div>

                            <div class="p-3 bg-light rounded">
                                <div class="row text-center">
                                    <div class="col-6 border-end">
                                        <small class="text-muted d-block">Stock Total</small>
                                        <h3 class="mb-0 text-primary">{{ number_format($item->quantidadeTotal(), 0, ',', '.') }}</h3>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted d-block">Custo Total Gasto</small>
                                        <h5 class="mb-0 text-success">{{ number_format($item->custo_total_gasto, 2, ',', '.') }} Kz</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8 mb-3">
                    <!-- Informações Detalhadas -->
                    <div class="card shadow-sm radius-10 border-0 mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="bi bi-info-circle"></i> Informações Detalhadas</h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-laptop"></i> Modelo
                                    </label>
                                    <p class="form-control-plaintext">{{ $item->modelo ?: 'N/A' }}</p>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-award"></i> Marca
                                    </label>
                                    <p class="form-control-plaintext">{{ $item->marca ?: 'N/A' }}</p>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-upc-scan"></i> Código de Barras
                                    </label>
                                    <p class="form-control-plaintext">{{ $item->codigo_barras ?: 'N/A' }}</p>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-calendar-x"></i> Data Limite Desvalorização
                                    </label>
                                    <p class="form-control-plaintext">
                                        @if($item->data_limite_desvalorizacao)
                                            <span class="badge {{ $item->data_limite_desvalorizacao->isPast() ? 'bg-danger' : 'bg-info' }}">
                                                {{ $item->data_limite_desvalorizacao->format('d/m/Y') }}
                                            </span>
                                        @else
                                            N/A
                                        @endif
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-rulers"></i> Unidade de Medida
                                    </label>
                                    <p class="form-control-plaintext">{{ $item->unidade_medida }}</p>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-arrow-repeat"></i> Ponto de Reposição
                                    </label>
                                    <p class="form-control-plaintext">
                                        @if($item->ponto_reposicao)
                                            <span class="badge bg-warning text-dark">{{ $item->ponto_reposicao }} unidades</span>
                                        @else
                                            N/A
                                        @endif
                                    </p>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold text-muted small">
                                        <i class="bi bi-text-paragraph"></i> Descrição
                                    </label>
                                    <p class="form-control-plaintext">{{ $item->descricao ?: 'Sem descrição' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Metadados -->
                    <div class="card shadow-sm radius-10 border-0">
                        <div class="card-body bg-light">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="bi bi-clock"></i> Cadastrado em: {{ $item->created_at->format('d/m/Y H:i:s') }}
                                    </small>
                                </div>
                                @if($item->created_at != $item->updated_at)
                                    <div class="col-md-6 text-end">
                                        <small class="text-muted">
                                            <i class="bi bi-pencil"></i> Última atualização: {{ $item->updated_at->format('d/m/Y H:i:s') }}
                                        </small>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Histórico de Preços -->
            <div class="card shadow-sm radius-10 border-0">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Preços</h6>
                </div>
                <div class="card-body">
                    @if ($item->historicoPrecos->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Data</th>
                                        <th>Preço Anterior</th>
                                        <th>Preço Novo</th>
                                        <th>Variação</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($item->historicoPrecos->sortByDesc('data_registro') as $historico)
                                        <tr>
                                            <td>{{ $historico->data_registro->format('d/m/Y H:i') }}</td>
                                            <td>{{ number_format($historico->preco_anterior ?? 0, 2, ',', '.') }} Kz</td>
                                            <td>{{ number_format($historico->preco_unitario, 2, ',', '.') }} Kz</td>
                                            <td>
                                                @php
                                                    $precoAnt = $historico->preco_anterior ?? 0;
                                                    $variacao = $historico->preco_unitario - $precoAnt;
                                                    $percentual = $precoAnt > 0 ? ($variacao / $precoAnt) * 100 : 0;
                                                @endphp
                                                @if ($precoAnt > 0)
                                                    <span class="badge bg-{{ $variacao >= 0 ? 'success' : 'danger' }}">
                                                        {{ $variacao >= 0 ? '+' : '' }}{{ number_format($variacao, 2, ',', '.') }}
                                                        Kz
                                                        ({{ $variacao >= 0 ? '+' : '' }}{{ number_format($percentual, 1, ',', '.') }}%)
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary">Primeiro registro</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info mb-0">
                            <i class="bi bi-info-circle"></i> Nenhum histórico de preços registrado para este artigo .
                        </div>
                    @endif
                </div>
            </div>
        @else
            <div class="alert alert-danger">
                Não tem permissão para visualizar esta página.
            </div>
        @endcanany
    </main>
@endsection

@push('scripts')
@endpush