@extends('layouts.app')

@section('title', $invoice->invoice_number)
@section('page-title', 'Invoice ' . $invoice->invoice_number)
@section('page-subtitle', $invoice->title)

@section('content')
    <div class="max-w-3xl mx-auto">
        <div class="flex gap-3 mb-6">
            <a href="{{ route('invoices.edit', $invoice) }}" class="btn-sakura">Edit</a>
            <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-pink-200 text-pink-500 hover:bg-pink-50">📥
                Download PDF</a>
            <form action="{{ route('invoices.destroy', $invoice) }}" method="POST"
                onsubmit="return confirm('Delete this invoice?')">
                @csrf @method('DELETE')
                <button
                    class="btn-sakura text-sm px-4 py-2.5 rounded-full border border-red-200 text-red-500 hover:bg-red-50">Delete</button>
            </form>
        </div>

        <div class="cat-card p-8">
            {{-- Invoice Header --}}
            <div class="flex justify-between items-start mb-8">
                <div class="flex items-center gap-3">
                    @if($invoiceSettings->header_logo)
                        <img src="{{ asset('storage/' . $invoiceSettings->header_logo) }}" alt="Logo"
                            class="h-14 w-14 object-cover rounded-2xl border border-pink-100 shrink-0">
                    @endif
                    <div>
                        <div class="text-xl font-extrabold" style="color:{{ $invoiceSettings->accent_color ?? '#FFB7C5' }}">
                            {{ $invoiceSettings->header_name ?: '🐱 Cathy' }}
                        </div>
                        <div class="text-sm text-gray-400 mt-0.5">
                            {{ $invoiceSettings->header_title ?: 'Personal Talent Assistant' }}
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-gray-800">{{ $invoice->invoice_number }}</div>
                    <span class="badge {{ $invoice->status->badgeClass() }} mt-1">{{ $invoice->status->label() }}</span>
                </div>
            </div>

            {{-- Billing Info --}}
            <div class="grid grid-cols-2 gap-8 mb-8">
                <div>
                    <h4 class="text-xs font-bold text-gray-400 uppercase mb-2">Bill To</h4>
                    @if($invoice->client)
                        <div class="font-semibold text-gray-800">{{ $invoice->client->name }}</div>
                        @if($invoice->client->company)
                        <div class="text-sm text-gray-500">{{ $invoice->client->company }}</div> @endif
                        @if($invoice->client->email)
                        <div class="text-sm text-gray-500">{{ $invoice->client->email }}</div> @endif
                        @if($invoice->client->full_address)
                        <div class="text-sm text-gray-400">{!! nl2br(e($invoice->client->full_address)) !!}</div> @endif
                    @else
                        <div class="text-gray-500 text-sm">No client</div>
                    @endif
                </div>
                <div class="text-right">
                    <div class="text-xs font-bold text-gray-400 uppercase mb-2">Invoice Details</div>
                    <div class="text-sm space-y-1">
                        <div><span class="text-gray-400">Issue:</span> {{ $invoice->issue_date->format('d M Y') }}</div>
                        <div><span class="text-gray-400">Due:</span> <span
                                class="{{ $invoice->due_date->isPast() && $invoice->status->value !== 'paid' ? 'text-red-500 font-bold' : '' }}">{{ $invoice->due_date->format('d M Y') }}</span>
                        </div>
                        @if($invoice->paid_date)
                            <div><span class="text-gray-400">Paid:</span> {{ $invoice->paid_date->format('d M Y') }}</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Line Items --}}
            @php
                $accent = $invoiceSettings->accent_color ?? '#FFB7C5';
                $hex = ltrim($accent, '#');
                $r = hexdec(substr($hex, 0, 2));
                $g = hexdec(substr($hex, 2, 2));
                $b = hexdec(substr($hex, 4, 2));
                $tint = sprintf(
                    '#%02X%02X%02X',
                    (int) (255 * 0.92 + $r * 0.08),
                    (int) (255 * 0.92 + $g * 0.08),
                    (int) (255 * 0.92 + $b * 0.08)
                );
            @endphp
            <table class="w-full mb-6">
                <thead>
                    <tr class="text-xs text-gray-500 uppercase" style="background:{{ $tint }}">
                        <th class="text-left py-3 px-4 rounded-l-2xl">Description</th>
                        <th class="text-right py-3 px-4">Unit Price</th>
                        <th class="text-center py-3 px-4">Qty</th>
                        <th class="text-right py-3 px-4 rounded-r-2xl">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoice->items as $item)
                        <tr class="border-b border-pink-50">
                            <td class="py-3 px-4 text-sm text-gray-700">
                                {{ $item->description }}
                                @if(!$item->is_taxable)
                                    <span
                                        class="ml-1.5 text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full font-medium">Non-Taxable</span>
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm text-right text-gray-600">Rp
                                {{ number_format($item->unit_price, 0, ',', '.') }}</td>
                            <td class="py-3 px-4 text-sm text-center text-gray-600">{{ $item->quantity }}</td>
                            <td class="py-3 px-4 text-sm text-right font-semibold text-gray-800">Rp
                                {{ number_format($item->total, 0, ',', '.') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- Totals --}}
            <div class="flex justify-end mb-8">
                <div class="w-72 space-y-2 text-sm">
                    <div class="flex justify-between text-gray-500">
                        <span>Subtotal</span><span class="font-medium">Rp
                            {{ number_format($invoice->subtotal, 0, ',', '.') }}</span>
                    </div>
                    @if($invoice->tax_rate > 0)
                        <div class="flex justify-between text-amber-600">
                            <span>Tax ({{ $invoice->tax_rate }}% — paid by client)</span>
                            <span class="font-medium">Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span>
                        </div>
                    @endif
                    <div class="flex justify-between text-base font-bold pt-2 border-t border-pink-200"
                        style="color:{{ $invoiceSettings->accent_color ?? '#FFB7C5' }}">
                        <span>Grand Total</span><span>{{ $invoice->formatted_total }}</span>
                    </div>
                </div>
            </div>

            {{-- Bank Info --}}
            @if($invoice->bank_name)
                <div class="rounded-2xl p-4 text-sm mb-4" style="background:{{ $tint }}">
                    <div class="font-semibold text-gray-700 mb-2">💳 Payment Info</div>
                    <div class="text-gray-600">
                        {{ $invoice->bank_name }}
                        @if($invoice->branch_name) · {{ $invoice->branch_name }} @endif
                        · {{ $invoice->bank_account }} · a/n {{ $invoice->bank_holder }}
                    </div>
                </div>
            @endif

            @if($invoice->notes)
                <div class="text-sm text-gray-500 italic mb-8">{{ $invoice->notes }}</div>
            @endif

            <div class="flex justify-end mt-10">
                @if($invoice->signature_image)
                    <div class="shrink-0 text-center w-full sm:w-auto">
                        <div class="text-sm text-gray-500 mb-3">
                            Jakarta, {{ $invoice->issue_date->format('d F Y') }}
                        </div>
                        <img src="{{ '/storage/' . $invoice->signature_image }}" alt="Signature" class="h-20 object-contain mb-3 mx-auto">
                        <div class="text-sm font-extrabold text-gray-800 uppercase tracking-wide">
                            {{ $invoice->signer_name ?: ($invoiceSettings->signer_name ?: ($invoiceSettings->header_name ?: 'Signature')) }}
                        </div>
                        @if($invoice->signer_title || $invoiceSettings->signer_title || $invoiceSettings->header_title)
                            <div class="text-xs text-gray-400 uppercase mt-0.5 tracking-wider">
                                {{ $invoice->signer_title ?: ($invoiceSettings->signer_title ?: $invoiceSettings->header_title) }}
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection