@extends('layouts.app')

@section('content')

<section class="order-section py-5">

<div class="container">

{{-- BACK --}}
<div class="mb-4">
    <a href="{{ route('public.consultar.index') }}" class="btn btn-back">
        ← Nova consulta
    </a>
</div>

@php
    $status = $order->status ?? 'pendente';

    $statusConfig = match($status) {
        'aprovado' => ['success', 'Aprovado'],
        'reprovado' => ['danger', 'Rejeitado'],
        default => ['warning', 'Pendente']
    };
@endphp

{{-- HEADER CARD --}}
<div class="order-header mb-4">

    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">

        <div>
            <h3 class="fw-bold mb-1 text-white">
                Pedido #{{ $order->numero }}
            </h3>

            <p class="text-light mb-0">
                {{ $order->created_at->format('d/m/Y H:i') }}
            </p>
        </div>

        <div class="status-badge status-{{ $statusConfig[0] }}">
            {{ $statusConfig[1] }}
        </div>

    </div>

</div>

<div class="row g-4">

    {{-- CLIENTE --}}
    <div class="col-lg-5">

        <div class="glass-card h-100">

            <h5 class="section-title"> Dados do Cliente</h5>

            <div class="info-box">
                <span>Nome</span>
                <p>{{ $order->cliente_nome }}</p>
            </div>

            <div class="info-box">
                <span>NIF</span>
                <p>{{ $order->cliente_nif }}</p>
            </div>

            <div class="info-box">
                <span>Telefone</span>
                <p>{{ $order->cliente_telefone }}</p>
            </div>

            <div class="info-box">
                <span>Endereço</span>
                <p>{{ $order->cliente_endereco }}</p>
            </div>

            @if($order->proof_path)
                <a href="{{ asset('storage/'.$order->proof_path) }}"
                   target="_blank"
                   class="btn-proof mt-3">
                    📎 Ver comprovativo
                </a>
            @endif

        </div>

    </div>

    {{-- ITENS --}}
    <div class="col-lg-7">

        <div class="glass-card">

            <h5 class="section-title"> Itens do Pedido</h5>

            <div class="table-responsive">

                <table class="modern-table">

                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Qtd</th>
                            <th>Preço</th>
                            <th>Total</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse($order->items as $item)

                            <tr>
                                <td class="product-name">
                                    {{ $item->product->name ?? 'Produto removido' }}
                                </td>

                                <td>{{ $item->quantity }}</td>

                                <td>{{ number_format($item->price,0,',','.') }} Kz</td>

                                <td class="text-success fw-bold">
                                    {{ number_format($item->subtotal,0,',','.') }} Kz
                                </td>
                            </tr>

                        @empty

                            <tr>
                                <td colspan="4" class="empty">
                                    Nenhum item encontrado
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                    <tfoot>
                        <tr>
                            <th colspan="3" class="text-end">Total</th>
                            <th class="total-value">
                                {{ number_format($order->total,0,',','.') }} Kz
                            </th>
                        </tr>
                    </tfoot>

                </table>

            </div>

        </div>

    </div>

</div>

</div>

</section>

@endsection
<style>

.order-section{
    background:#020617;
    min-height:100vh;
}

/* BACK BUTTON */
.btn-back{
    display:inline-flex;
    align-items:center;
    gap:6px;

    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color:#fff;

    padding:10px 16px;
    border-radius:12px;

    font-weight:600;
    text-decoration:none;

    border:1px solid rgba(255,255,255,0.1);

    box-shadow:0 10px 25px rgba(56,189,248,0.25);

    transition:all .25s ease;
}

/* HOVER MAIS FORTE */
.btn-back:hover{
    transform: translateY(-2px);
    box-shadow:0 15px 35px rgba(99,102,241,0.35);
    filter: brightness(1.05);
    color:#fff;
}

/* ACTIVE (clique) */
.btn-back:active{
    transform: scale(0.98);
}

/* FOCO (acessibilidade) */
.btn-back:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(56,189,248,0.4);
}
/* HEADER */
.order-header{
    background: linear-gradient(135deg,#0f172a,#111827);
    padding:20px;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
}

/* STATUS */
.status-badge{
    padding:8px 16px;
    border-radius:999px;
    font-weight:600;
    font-size:13px;
}

.status-success{
    background:#16a34a;
    color:#fff;
}
.status-danger{
    background:#ef4444;
    color:#fff;
}
.status-warning{
    background:#f59e0b;
    color:#111827;
}

/* GLASS CARD */
.glass-card{
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    border-radius:18px;
    padding:22px;
    border:1px solid rgba(255,255,255,0.05);
    color:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
}

/* SECTION TITLE */
.section-title{
    font-weight:700;
    margin-bottom:18px;
}

/* INFO BOX */
.info-box{
    margin-bottom:14px;
}

.info-box span{
    font-size:12px;
    color:#94a3b8;
}

.info-box p{
    margin:0;
    font-weight:600;
}

/* BUTTON */
.btn-proof{
    display:block;
    text-align:center;
    background:linear-gradient(135deg,#38bdf8,#6366f1);
    color:#fff;
    padding:10px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-proof:hover{
    transform:translateY(-2px);
}

/* TABLE */
.modern-table{
    width:100%;
    border-collapse:collapse;
    color:#fff;
}

.modern-table thead{
    background:#0b1220;
}

.modern-table th,
.modern-table td{
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:14px;
}

.product-name{
    font-weight:600;
}

.total-value{
    color:#22c55e;
    font-size:16px;
}

/* EMPTY */
.empty{
    text-align:center;
    color:#94a3b8;
    padding:20px;
}

/* MOBILE */
@media (max-width: 768px){
    .glass-card{
        padding:16px;
    }
}

</style>