@extends('layouts.tecnico.app')

@section('content')
<div class="container-fluid py-4">

    {{-- HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">

        <a href="{{ route('dashboard.tecnico.encomendas.index') }}"
           class="btn btn-outline-secondary rounded-pill px-3">
            ← Voltar
        </a>

        <div class="text-end">
            <h5 class="fw-bold mb-0 text-light">
                Pedido #{{ $order->numero }}
            </h5>
            <small class="text-light">
                {{ $order->created_at?->format('d/m/Y H:i') ?? '-' }}
            </small>
        </div>

    </div>

    {{-- CARD PRINCIPAL --}}
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">

        <div class="card-body p-4">

            {{-- TOP INFO --}}
            <div class="row align-items-center mb-4">

                <div class="col-md-6">

                    <span id="order-status-badge"
                          class="badge px-3 py-2 fs-6 rounded-pill
                          @if($order->status === 'pendente') bg-warning text-dark
                          @elseif($order->status === 'aprovado') bg-success
                          @elseif($order->status === 'reprovado') bg-danger
                          @else bg-secondary
                          @endif">

                        {{ ucfirst($order->status) }}
                    </span>

                </div>

                <div class="col-md-6 text-md-end mt-3 mt-md-0">
                    <h3 class="fw-bold text-success mb-0">
                        {{ number_format($order->total,2,',','.') }} Kz
                    </h3>
                    <small class="text-muted">Total do pedido</small>
                </div>

            </div>

            <hr>

            {{-- CLIENTE + DADOS --}}
            <div class="row g-4 mb-4">

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

                    <div class="text-dark p-3 bg-light rounded-4 h-100">

                        <h6 class="fw-bold mb-3"> Dados do Cliente</h6>

                        <p class="mb-1">
                            <strong>Nome:</strong> {{ $order->cliente_nome }}
                        </p>

                        <p class="mb-1">
                            <strong>NIF:</strong> {{ $order->cliente_nif ?? '-' }}
                        </p>

                        <p class="mb-1">
                            <strong>Telefone:</strong> {{ $order->cliente_telefone ?? '-' }}
                        </p>

                        <p class="mb-0">
                            <strong>Endereço:</strong> {{ $order->cliente_endereco ?? '-' }}
                        </p>

                    </div>

                </div>

                {{-- PAGAMENTO + COMPROVATIVO --}}
                <div class="col-lg-6">

                    <div class="text-dark p-3 bg-light rounded-4 h-100">

                        <h6 class="fw-bold mb-3">💳 Pagamento</h6>

                        <p class="mb-2">
                            <strong>Método:</strong>
                            <span class="badge bg-info text-dark rounded-pill">
                                {{ ucfirst($order->payment_method) }}
                            </span>
                        </p>

                        <h6 class="fw-bold mt-3">📎 Comprovativo</h6>

                        @if($order->proof_path)

                            <a href="{{ asset('storage/'.$order->proof_path) }}"
                               target="_blank"
                               class="btn btn-success btn-sm rounded-pill mb-2">
                                Ver comprovativo
                            </a>

                            <div class="proof-box mt-2">
                                <iframe src="{{ asset('storage/'.$order->proof_path) }}"></iframe>
                            </div>

                        @else
                            <p class="text-muted">Sem comprovativo disponível</p>
                        @endif

                    </div>

                </div>

            </div>

            {{-- AÇÕES --}}
            @if($order->status === 'pendente')
            <div class="d-flex gap-2 mb-4">

                <button class="btn btn-success rounded-pill px-4"
                        onclick="aprovarPedido({{ $order->id }})">
                    ✔ Aprovar
                </button>

                <button class="btn btn-danger rounded-pill px-4"
                        onclick="reprovarPedido({{ $order->id }})">
                    ✖ Reprovar
                </button>

            </div>
            @endif

            <hr>

            {{-- ITENS --}}
            <h6 class="fw-bold mb-3">🛒 Produtos do Pedido</h6>

            <div class="table-responsive">

                <table class="table align-middle table-hover">

                    <thead class="table-dark">
                        <tr>
                            <th>Produto</th>
                            <th>Qtd</th>
                            <th>Preço</th>
                            <th>Subtotal</th>
                        </tr>
                    </thead>

                    <tbody>

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

                            @php
                                $image = optional($item->product?->primaryImage)->image
                                    ?? optional($item->product?->images?->first())->image;

                                $imageUrl = $image
                                    ? asset('storage/'.$image)
                                    : asset('images/no-image.png');
                            @endphp

                            <tr>

                                <td>
                                    <div class="d-flex align-items-center gap-3">

                                        <img src="{{ $imageUrl }}"
                                             class="rounded border"
                                             width="50"
                                             height="50"
                                             style="object-fit:cover">

                                        <div>
                                            <div class="fw-semibold">
                                                {{ $item->product->name ?? 'Produto removido' }}
                                            </div>
                                        </div>

                                    </div>
                                </td>

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

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

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

                            </tr>

                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    Nenhum produto encontrado
                                </td>
                            </tr>
                        @endforelse

                    </tbody>

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

                </table>

            </div>

        </div>
    </div>
</div>

{{-- CSS PREMIUM --}}
<style>
.proof-box{
    width:100%;
    height:260px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    background:#f8fafc;
}

.proof-box iframe{
    width:100%;
    height:100%;
    border:0;
}
</style>

@endsection
<script>
async function aprovarPedido(id)
{
    if (!confirm('Confirmar aprovação do pedido?')) return;

    const res = await fetch(`{{ url('/dashboard/admin/encomendas') }}/${id}/aprovar`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    });

    const data = await res.json();

    if (data.success) {
        atualizarStatus(data.status);
    }
}

async function reprovarPedido(id)
{
    if (!confirm('Confirmar reprovação do pedido?')) return;

    const res = await fetch(`{{ url('/dashboard/admin/encomendas') }}/${id}/reprovar`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    });

    const data = await res.json();

    if (data.success) {
        atualizarStatus(data.status);
    }
}

function atualizarStatus(status)
{
    const badge = document.getElementById('order-status-badge');

    let color = 'secondary';

    if (status === 'aprovado') color = 'success';
    if (status === 'reprovado') color = 'danger';
    if (status === 'pendente') color = 'warning';

    badge.className = `badge px-3 py-2 fs-6 rounded-pill bg-${color}`;
    badge.innerText = status.charAt(0).toUpperCase() + status.slice(1);

    document.querySelectorAll('.btn-success, .btn-danger').forEach(b => b.remove());
}
</script>