@extends('layouts.app')
@section('title', $invoice->number)
@section('page-title', $invoice->number)
@section('page-subtitle', $invoice->tenant?->name.' — '.$invoice->period_start->format('F Y'))

@section('content')
@php
    $gateways    = app(\App\Services\Payments\PaymentGatewayService::class);
    $stripeOn    = $gateways->isEnabled(\App\Models\Transaction::GATEWAY_STRIPE);
    $paypalOn    = $gateways->isEnabled(\App\Models\Transaction::GATEWAY_PAYPAL);
    $payable     = $invoice->status === 'issued' && (float) $invoice->total > 0;
    $qrSvc       = app(\App\Services\InvoiceQrService::class);
    $qrUrl       = $qrSvc->urlFor($invoice);
    $qrSvg       = $qrSvc->svg($invoice, 200);
@endphp

@if(session('status'))
    <div class="mb-4 px-4 py-2 rounded-lg bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200 text-sm">
        {{ session('status') }}
    </div>
@endif

@if($errors->any())
    <div class="mb-4 px-4 py-2 rounded-lg bg-rose-50 text-rose-800 dark:bg-rose-900/30 dark:text-rose-200 text-sm">
        {{ $errors->first() }}
    </div>
@endif

<div class="flex flex-wrap items-center gap-2 mb-4">
    <a href="{{ route('super-admin.invoices.index') }}" class="btn-secondary text-xs">← {{ __('All invoices') }}</a>
    <a href="{{ route('super-admin.invoices.download', $invoice) }}" class="btn-primary text-xs">
        <x-icon name="download" class="w-4 h-4"/> {{ __('Download PDF') }}
    </a>
    @if($payable && $stripeOn)
        <a href="{{ route('invoices.pay', ['invoice' => $invoice, 'gateway' => 'stripe']) }}"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#635BFF] hover:bg-[#544DDB] text-white text-xs font-semibold shadow-sm transition">
            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M13.479 9.883c-1.626-.604-2.512-1.067-2.512-1.803 0-.622.511-.977 1.422-.977 1.667 0 3.379.642 4.558 1.22l.666-4.111C16.698 3.731 14.583 3 12.04 3c-1.797 0-3.296.469-4.36 1.331-1.118.91-1.696 2.219-1.696 3.798 0 2.871 1.755 4.105 4.625 5.144 1.846.659 2.467 1.131 2.467 1.842 0 .691-.595 1.092-1.674 1.092-1.422 0-3.745-.704-5.211-1.582l-.708 4.169c1.272.713 3.611 1.453 6.025 1.453 1.918 0 3.512-.452 4.625-1.302 1.241-.954 1.879-2.36 1.879-4.087 0-2.939-1.798-4.166-4.533-5.175z"/></svg>
            {{ __('Pay with Stripe') }}
        </a>
    @endif
    @if($payable && $paypalOn)
        <a href="{{ route('invoices.pay', ['invoice' => $invoice, 'gateway' => 'paypal']) }}"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#FFC439] hover:bg-[#F0B72E] text-[#003087] text-xs font-bold shadow-sm transition">
            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.59 3.025-2.566 4.65-5.96 4.65h-1.96a.483.483 0 0 0-.477.41l-1.12 7.106-.317 2.012a.434.434 0 0 0 .43.503h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.93.93 0 0 1 .923-.787h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.736-4.473z"/></svg>
            {{ __('Pay with PayPal') }}
        </a>
    @endif
    @if($invoice->status === 'issued')
        <form method="POST" action="{{ route('super-admin.invoices.mark-paid', $invoice) }}" class="inline">
            @csrf
            <button class="btn-secondary text-xs">{{ __('Mark as paid') }}</button>
        </form>
    @endif
    @if($invoice->status !== 'void')
        <form method="POST" action="{{ route('super-admin.invoices.void', $invoice) }}" class="inline"
              onsubmit="return confirm('{{ __('Void this invoice?') }}')">
            @csrf
            <button class="btn-danger text-xs">{{ __('Void') }}</button>
        </form>
    @endif
</div>

@if($payable && ! $stripeOn && ! $paypalOn)
    <div class="mb-4 px-4 py-2 rounded-lg bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 text-xs">
        {{ __('No payment gateway enabled. Configure Stripe or PayPal in') }}
        <a href="{{ route('super-admin.payment-gateways.edit') }}" class="underline font-semibold">{{ __('Payment gateways') }}</a>.
    </div>
@endif

<div class="card card-pad space-y-4">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Number') }}</div><div class="font-mono">{{ $invoice->number }}</div></div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Period') }}</div>{{ $invoice->period_start->format('Y-m-d') }} → {{ $invoice->period_end->format('Y-m-d') }}</div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Issued') }}</div>{{ $invoice->issued_at?->format('Y-m-d') ?? '—' }}</div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Status') }}</div>{{ ucfirst($invoice->status) }}</div>
    </div>

    <div class="overflow-x-auto rounded-xl ring-1 ring-slate-200 dark:ring-slate-700">
        <table class="w-full text-sm">
            <thead class="text-[11px] uppercase tracking-wider text-slate-400 bg-slate-50 dark:bg-slate-800/60">
                <tr>
                    <th class="text-left px-3 py-2 font-medium">{{ __('Description') }}</th>
                    <th class="text-right px-3 py-2 font-medium w-24">{{ __('Qty') }}</th>
                    <th class="text-right px-3 py-2 font-medium w-32">{{ __('Unit') }}</th>
                    <th class="text-right px-3 py-2 font-medium w-32">{{ __('Amount') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                @foreach($invoice->lines as $line)
                    <tr>
                        <td class="px-3 py-2">{{ $line->description }}</td>
                        <td class="px-3 py-2 text-right">{{ $line->quantity }}</td>
                        <td class="px-3 py-2 text-right">{{ number_format((float)$line->unit_amount, 2) }}</td>
                        <td class="px-3 py-2 text-right">{{ number_format((float)$line->amount, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot class="text-sm">
                <tr><td colspan="3" class="px-3 py-2 text-right">{{ __('Subtotal') }}</td><td class="px-3 py-2 text-right">{{ number_format((float)$invoice->subtotal, 2) }} {{ $invoice->currency }}</td></tr>
                @if((float)$invoice->discount > 0)
                    <tr><td colspan="3" class="px-3 py-2 text-right text-slate-500">{{ __('Free allowance') }}</td><td class="px-3 py-2 text-right text-slate-500">-{{ number_format((float)$invoice->discount, 2) }}</td></tr>
                @endif
                <tr><td colspan="3" class="px-3 py-2 text-right">{{ __('VAT') }} ({{ rtrim(rtrim(number_format((float)$invoice->vat_rate,2),'0'),'.') }}%)</td><td class="px-3 py-2 text-right">{{ number_format((float)$invoice->vat_amount, 2) }}</td></tr>
                <tr class="font-semibold"><td colspan="3" class="px-3 py-2 text-right">{{ __('Total') }}</td><td class="px-3 py-2 text-right">{{ number_format((float)$invoice->total, 2) }} {{ $invoice->currency }}</td></tr>
            </tfoot>
        </table>
    </div>

    @if($invoice->reverse_charge)
        <p class="text-xs text-slate-500">{{ __('VAT reverse-charged — Article 21 §2 of Belgian VAT Code (intra-EU B2B).') }}</p>
    @endif
</div>

{{-- Pay-by-QR card --}}
<div class="card card-pad mt-4 flex flex-col sm:flex-row items-center sm:items-start gap-5">
    <div class="shrink-0 p-3 rounded-xl bg-white dark:bg-slate-100 ring-1 ring-slate-200 dark:ring-slate-700">
        {!! $qrSvg !!}
    </div>
    <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-slate-900 dark:text-white text-sm flex items-center gap-2">
            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg>
            {{ __('Pay by QR') }}
        </h3>
        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-relaxed">
            {{ __('Scan with a phone camera to open the secure payment page for invoice :n.', ['n' => $invoice->number]) }}
        </p>
        <div class="mt-3 flex flex-wrap items-center gap-2">
            @if(str_starts_with($qrUrl, 'http'))
                <a href="{{ $qrUrl }}" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-xs font-semibold hover:bg-slate-800 dark:hover:bg-white">
                    {{ __('Open payment page') }} →
                </a>
            @endif
            <span class="font-mono text-[11px] text-slate-500 dark:text-slate-400 break-all max-w-full">{{ $qrUrl }}</span>
        </div>
        @if(! $stripeOn && ! $paypalOn)
            <p class="text-[11px] text-amber-600 dark:text-amber-400 mt-2">
                {{ __('No payment gateway is enabled — the QR encodes the invoice reference for manual transfer. Configure Stripe or PayPal for online payment.') }}
            </p>
        @endif
    </div>
</div>
@endsection