@extends('layouts.cliente.app')

@section('title','Detalhes da Proforma')

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

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

    <div>
        <h4 class="fw-bold mb-0">
            Proforma {{ $proforma->numero }}
        </h4>
        <small class="text-muted">
            Emitida em {{ $proforma->created_at->format('d/m/Y H:i') }}
        </small>
    </div>

    <div class="d-flex gap-2 flex-wrap">

        {{-- 👁️ VER PDF --}}
        <a href="{{ route('dashboard.cliente.proformas.pdf',$proforma) }}"
           target="_blank"
           class="btn btn-primary">
            Ver PDF
        </a>

        <a href="{{ route('dashboard.cliente.proformas.index') }}"
           class="btn btn-light">
            ← Voltar
        </a>

    </div>

</div>

{{-- CARD INFO --}}
<div class="card border-0 shadow-sm">
<div class="card-body">

<div class="row g-4">

<div class="col-md-6">
    <div class="border rounded p-3 h-100">
        <small class="text-muted d-block mb-1">Cliente</small>
        <div class="fw-semibold">
            {{ $proforma->cliente_nome }}
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="border rounded p-3 h-100">
        <small class="text-muted d-block mb-1">NIF</small>
        <div class="fw-semibold">
            {{ $proforma->cliente_nif ?? '—' }}
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="border rounded p-3 h-100">
        <small class="text-muted d-block mb-1">Telefone</small>
        <div class="fw-semibold">
            {{ $proforma->cliente_telefone ?? '—' }}
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="border rounded p-3 h-100 bg-light">
        <small class="text-muted d-block mb-1">Total da Proforma</small>
        <div class="fw-bold text-success fs-5">
            {{ number_format($proforma->total,2,',','.') }} Kz
        </div>
    </div>
</div>

<div class="col-12">
    <div class="border rounded p-3">
        <small class="text-muted d-block mb-1">Endereço</small>
        <div class="fw-semibold">
            {{ $proforma->cliente_endereco ?? '—' }}
        </div>
    </div>
</div>

</div>

</div>
</div>

{{-- PREVIEW EMBED (UX PREMIUM) --}}
<div class="card border-0 shadow-sm mt-4">
<div class="card-header bg-white fw-semibold">
Visualização rápida
</div>

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

<iframe
    src="{{ route('dashboard.cliente.proformas.pdf',$proforma) }}"
    width="100%"
    height="600"
    style="border:0;">
</iframe>

</div>
</div>

</div>
@endsection