@extends('layouts.app')
@section('title', $invoice->number)

@section('content')
@php $hasBank = ! empty($bank['iban']); @endphp

<div class="flex flex-wrap items-center gap-2 mb-4">
    <a href="{{ route('client.invoices.index') }}" class="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-xs font-medium">← {{ __('My invoices') }}</a>
</div>

<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6 space-y-5">
    <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-start px-3 py-2 font-medium">{{ __('Description') }}</th>
                    <th class="text-end px-3 py-2 font-medium w-32">{{ __('Unit') }}</th>
                    <th class="text-end 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-end">{{ number_format((float)$line->unit_amount, 2) }}</td>
                        <td class="px-3 py-2 text-end">{{ number_format((float)$line->amount, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr><td colspan="2" class="px-3 py-2 text-end">{{ __('Subtotal') }}</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->subtotal, 2) }} {{ $invoice->currency }}</td></tr>
                <tr><td colspan="2" class="px-3 py-2 text-end">{{ __('VAT') }} ({{ rtrim(rtrim(number_format((float)$invoice->vat_rate,2),'0'),'.') }}%)</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->vat_amount, 2) }}</td></tr>
                <tr class="font-semibold"><td colspan="2" class="px-3 py-2 text-end">{{ __('Total') }}</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->total, 2) }} {{ $invoice->currency }}</td></tr>
            </tfoot>
        </table>
    </div>

    @if($invoice->status === 'issued')
        <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4 space-y-3">
            <div class="font-semibold text-sm text-slate-900 dark:text-white">{{ __('How would you like to pay?') }}</div>
            <div class="flex flex-wrap gap-2">
                @if($stripe)
                    <button class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#635BFF] text-white text-xs font-semibold">
                        {{ __('Pay with Stripe') }}
                    </button>
                @endif
                @if($paypal)
                    <button class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#FFC439] text-[#003087] text-xs font-bold">
                        {{ __('Pay with PayPal') }}
                    </button>
                @endif
                @if($hasBank)
                    <a href="#bank" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-700 dark:text-slate-200 text-xs font-medium">
                        {{ __('Bank transfer') }} ↓
                    </a>
                @endif
            </div>
        </div>
    @endif

    @if($hasBank)
        <div id="bank" class="rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4 text-xs">
            <div class="font-semibold text-slate-700 dark:text-slate-200 mb-2">{{ __('Bank-transfer details') }}</div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 text-slate-600 dark:text-slate-300 font-mono">
                @if(! empty($bank['account_holder'])) <div><span class="text-slate-400">{{ __('Holder') }}:</span> {{ $bank['account_holder'] }}</div> @endif
                <div><span class="text-slate-400">{{ __('IBAN') }}:</span> {{ $bank['iban'] }}</div>
                @if(! empty($bank['bic'])) <div><span class="text-slate-400">BIC:</span> {{ $bank['bic'] }}</div> @endif
                @if(! empty($bank['bank_name'])) <div><span class="text-slate-400">{{ __('Bank') }}:</span> {{ $bank['bank_name'] }}</div> @endif
                <div><span class="text-slate-400">{{ __('Reference') }}:</span> {{ str_replace(':invoice_number', $invoice->number, $bank['reference_template'] ?? ':invoice_number') }}</div>
            </div>
            @if(! empty($bank['notes']))
                <p class="mt-2 text-slate-500 dark:text-slate-400">{{ $bank['notes'] }}</p>
            @endif
        </div>
    @endif
</div>
@endsection