{{-- resources/views/admin/orders/show.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Encomenda #' . $order->id)

@php
    // Ajusta labels aos estados reais do teu orders.status
    $labels = [
         'processing' => 'Em processamento',
  'completed'  => 'Concluída',
  'cancelled'  => 'Cancelada',
  'refunded'   => 'Reembolsada',
    ];

    $currentStatus = $order->status ?? 'pending';
@endphp

@section('content')
    <div class="azp-page">

        {{-- Header --}}
        <div class="azp-page-header">
            <div>
                <h1 class="azp-page-title">Encomenda #{{ $order->id }}</h1>
                <div class="azp-page-subtitle">
                    Clube: <strong>{{ optional($order->club)->name ?? '—' }}</strong>

                    <span style="margin:0 8px;color:rgba(0,0,0,.35)">/</span>

                    Cliente: <strong>{{ optional($order->user)->name ?? ('User #' . $order->user_id) }}</strong>

                    <span style="margin:0 8px;color:rgba(0,0,0,.35)">/</span>

                    Estado:
                    <span class="azp-badge-pill" style="display:inline-flex;align-items:center;gap:8px">
                    <span class="azp-dot"></span>
                    {{ $labels[$currentStatus] ?? $currentStatus }}
                </span>
                </div>
            </div>

            <div class="azp-actions">
                <a href="{{ url()->previous() }}" class="btn outline">Voltar</a>
            </div>
        </div>

        {{-- Flash --}}
        @if (session('status'))
            <div class="flash success">{{ session('status') }}</div>
        @endif
        @if (session('error'))
            <div class="flash error">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="flash error">
                <strong>Há erros no formulário.</strong>
                <ul style="margin:8px 0 0 18px">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Resumo --}}
        <div class="azp-card">
            <div class="azp-section-title">Resumo</div>

            <div class="azp-form-grid" style="margin-top:10px">

                <div class="field">
                    <div class="label">Criada em</div>
                    <div style="font-weight:650">
                        {{ $order->created_at ? \Carbon\Carbon::parse($order->created_at)->format('d/m/Y H:i') : '—' }}
                    </div>

                    <div class="hint">
                        @if(!empty($order->paid_at))
                            Paga em: {{ \Carbon\Carbon::parse($order->paid_at)->format('d/m/Y H:i') }}
                        @endif
                    </div>
                </div>

                <div class="field">
                    <div class="label">Totais</div>

                    <div style="display:grid;gap:6px;max-width:380px">
                        <div style="display:flex;justify-content:space-between;gap:12px;color:var(--muted)">
                            <span>Subtotal</span>
                            <span>€ {{ number_format((float)($order->subtotal ?? 0), 2, ',', '.') }}</span>
                        </div>

                        <div style="display:flex;justify-content:space-between;gap:12px;color:var(--muted)">
                            <span>Descontos</span>
                            <span>€ {{ number_format((float)($order->discount_total ?? 0), 2, ',', '.') }}</span>
                        </div>

                        <div style="display:flex;justify-content:space-between;gap:12px;color:var(--muted)">
                            <span>Portes</span>
                            <span>€ {{ number_format((float)($order->shipping_total ?? 0), 2, ',', '.') }}</span>
                        </div>

                        <div style="display:flex;justify-content:space-between;gap:12px;color:var(--muted)">
                            <span>IVA</span>
                            <span>€ {{ number_format((float)($order->tax_total ?? 0), 2, ',', '.') }}</span>
                        </div>

                        <div style="height:1px;background:rgba(0,0,0,.08);margin:2px 0"></div>

                        <div style="display:flex;justify-content:space-between;gap:12px;font-weight:800">
                            <span>Total</span>
                            <span>€ {{ number_format((float)($order->grand_total ?? $order->total ?? 0), 2, ',', '.') }}</span>
                        </div>
                    </div>

                    <div class="hint" style="margin-top:8px">
                        Valores conforme gravados na encomenda.
                    </div>
                </div>

                <div class="field">
                    <div class="label">Estado</div>

                    <form method="POST" action="{{ route('admin.orders.status', $order) }}">
                        @csrf
                        <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
                            <select name="status" style="min-width:240px">
                                @foreach($labels as $key => $lab)
                                    <option value="{{ $key }}" {{ $currentStatus===$key ? 'selected' : '' }}>
                                        {{ $lab }}
                                    </option>
                                @endforeach
                            </select>

                            <button type="submit" class="btn primary">Atualizar estado</button>
                        </div>

                        @error('status')
                        <div class="hint" style="color:#b00020;margin-top:6px">{{ $message }}</div>
                        @enderror
                    </form>

                    <div class="hint" style="margin-top:8px">
                        Alterar o estado ajuda a organizar listagens e fluxo operacional.
                    </div>
                </div>

            </div>

            @if(!empty($order->notes))
                <div style="margin-top:14px">
                    <div class="label">Notas</div>
                    <div style="margin-top:6px;color:var(--ink);background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);padding:10px 12px;border-radius:12px">
                        {{ $order->notes }}
                    </div>
                </div>
            @endif
        </div>

        {{-- Itens --}}
        <div class="azp-card" style="margin-top:12px">
            <div class="azp-section-title">Itens</div>

            <div style="overflow:auto;margin-top:10px">
                <table class="azp-table" style="min-width:920px">
                    <thead>
                    <tr>
                        <th>Produto</th>
                        <th style="width:140px;text-align:right">Preço</th>
                        <th style="width:120px;text-align:right">Qtd</th>
                        <th style="width:160px;text-align:right">Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($order->lines ?? [] as $ln)
                        @php
                            $p = $ln->product ?? null;

                            $mainImagePath = $p
                                ? ($p->image_url ?? optional($p->images->first())->path)
                                : null;

                            $mainImageUrl = $mainImagePath
                                ? asset('storage/' . ltrim($mainImagePath, '/'))
                                : null;
                        @endphp

                        <tr>
                            <td>
                                <div style="display:flex;align-items:center;gap:10px">
                                    <div style="width:44px;height:44px;border-radius:10px;overflow:hidden;background:#f2f2f2;border:1px solid rgba(0,0,0,.08);flex:0 0 auto;display:flex;align-items:center;justify-content:center">
                                        @if($mainImageUrl)
                                            <img src="{{ $mainImageUrl }}"
                                                 alt="{{ $ln->product_name ?? 'Produto' }}"
                                                 style="width:100%;height:100%;object-fit:cover;display:block">
                                        @else
                                            <div style="font-size:10px;color:#999;text-align:center;padding:2px">Sem imagem</div>
                                        @endif
                                    </div>

                                    <div style="min-width:0">
                                        <div style="font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56ch">
                                            {{ $ln->product_name ?? '—' }}
                                        </div>

                                        <div style="color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
                                            <span>ID produto: {{ $ln->product_id }}</span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td style="text-align:right;color:var(--muted)">
                                € {{ number_format((float)($ln->unit_price ?? 0), 2, ',', '.') }}
                            </td>

                            <td style="text-align:right;font-weight:700">
                                {{ (int)($ln->quantity ?? 0) }}
                            </td>

                            <td style="text-align:right;font-weight:800">
                                € {{ number_format((float)($ln->line_total ?? 0), 2, ',', '.') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" style="color:var(--muted)">Sem itens nesta encomenda.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection