@extends('layouts.admin')

@section('title', 'Detail Invoice ' . $invoice->invoice_number)
@section('page_title', 'Detail Invoice')

@section('admin_content')
<div>
    <!-- Page Header -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
                    <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">{{ $invoice->invoice_number }}</h1>
                    @php
                        $badgeClass = match($invoice->status) {
                            'paid' => 'bg-emerald-100 text-emerald-800',
                            'pending_verification' => 'bg-amber-100 text-amber-800',
                            'sent' => 'bg-blue-100 text-blue-800',
                            'cancelled' => 'bg-red-100 text-red-800',
                            default => 'bg-gray-100 text-gray-800',
                        };
                    @endphp
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded text-xs font-bold uppercase {{ $badgeClass }}">
                        {{ $invoice->status_label }}
                    </span>
                </div>
                <p class="ax-page-head__subtitle">Tagihan dibuat pada {{ $invoice->issue_date->format('d F Y') }} untuk {{ $invoice->customer_name }}.</p>
            </div>
            <div class="ax-page-head__actions" style="display:flex; gap:8px;">
                <a href="{{ route('admin.invoices') }}" class="ax-btn ax-btn--secondary ax-btn--sm">
                    <i data-lucide="arrow-left" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Kembali</span>
                </a>
                <a href="{{ $invoice->public_url }}" target="_blank" class="ax-btn ax-btn--secondary ax-btn--sm">
                    <i data-lucide="external-link" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Lihat Versi Publik</span>
                </a>
                <button type="button" onclick="window.print()" class="ax-btn ax-btn--secondary ax-btn--sm">
                    <i data-lucide="printer" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Cetak</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(83,107,91,0.12); border:1px solid var(--ax-accent); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:var(--ax-accent); display:flex; align-items:center; gap:8px;">
            <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(220,38,38,0.12); border:1px solid #dc2626; border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:#dc2626; display:flex; align-items:center; gap:8px;">
            <i data-lucide="alert-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-6);">
        <!-- Invoice Document Sheet -->
        <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
            <section class="ax-card" style="padding:32px;">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--ax-border); padding-bottom:24px; margin-bottom:24px;">
                    <div>
                        <img src="{{ asset('assets/brand/logo.png') }}" alt="Janoer Koening" style="height:38px; margin-bottom:8px;">
                        <p style="font-size:11px; color:var(--ax-text-muted); margin:0;">
                            Digital Wedding Invitation Platform &amp; Custom Agency<br>
                            janoerkoening.com &bull; Jakarta, Indonesia
                        </p>
                    </div>
                    <div style="text-align:right;">
                        <h2 style="font-size:1.5rem; font-weight:700; margin:0; color:var(--ax-text-strong);">INVOICE</h2>
                        <span style="font-family:var(--ax-font-mono); font-size:13px; font-weight:700; color:var(--jk-deepsage);">{{ $invoice->invoice_number }}</span>
                        <div style="font-size:11px; color:var(--ax-text-muted); margin-top:4px;">
                            Tanggal: {{ $invoice->issue_date->format('d/m/Y') }}<br>
                            Jatuh Tempo: {{ $invoice->due_date ? $invoice->due_date->format('d/m/Y') : '-' }}
                        </div>
                    </div>
                </div>

                <div style="display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-bottom:24px; font-size:12px;">
                    <div>
                        <small style="text-transform:uppercase; font-size:10px; font-weight:700; color:var(--ax-text-muted); display:block; margin-bottom:4px;">Ditagihkan Kepada:</small>
                        <strong style="font-size:14px; color:var(--ax-text-strong); display:block;">{{ $invoice->customer_name }}</strong>
                        <span style="color:var(--ax-text-muted); display:block;">{{ $invoice->customer_email ?: '-' }}</span>
                        <span style="color:var(--ax-text-muted); display:block;">{{ $invoice->customer_phone ?: '-' }}</span>
                    </div>
                    <div>
                        <small style="text-transform:uppercase; font-size:10px; font-weight:700; color:var(--ax-text-muted); display:block; margin-bottom:4px;">Tautan Undangan &amp; Paket:</small>
                        @if($invoice->invitation)
                            <strong style="font-size:13px; color:var(--ax-text-strong); display:block;">{{ $invoice->invitation->title }}</strong>
                            @if($invoice->invitation->subdomain)
                                <a href="{{ $invoice->invitation->public_url }}" target="_blank" style="color:var(--jk-deepsage); font-weight:600; font-family:var(--ax-font-mono); font-size:12px;">
                                    {{ $invoice->invitation->subdomain }}.{{ config('app.vip_domain', 'janoerkoening.com') }} &rarr;
                                </a>
                            @else
                                <span style="color:var(--ax-text-muted); font-size:11px;">/u/{{ $invoice->invitation->slug }}</span>
                            @endif
                        @else
                            <span style="color:var(--ax-text-muted);">- Belum Ditautkan ke Undangan -</span>
                        @endif
                        @if($invoice->package)
                            <div style="margin-top:4px; font-size:11px; color:var(--ax-text-muted);">
                                Paket: <strong>{{ $invoice->package->name }}</strong>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Table Items -->
                <table style="width:100%; border-collapse:collapse; font-size:12px; margin-bottom:24px;">
                    <thead>
                        <tr style="border-bottom:2px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                            <th style="padding:10px 12px;">No</th>
                            <th style="padding:10px 12px;">Deskripsi Item</th>
                            <th style="padding:10px 12px; width:70px; text-align:center;">Qty</th>
                            <th style="padding:10px 12px; width:140px; text-align:right;">Harga Satuan</th>
                            <th style="padding:10px 12px; width:140px; text-align:right;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoice->items as $idx => $it)
                            <tr style="border-bottom:1px solid var(--ax-border);">
                                <td style="padding:10px 12px; color:var(--ax-text-muted);">{{ $idx + 1 }}</td>
                                <td style="padding:10px 12px;">
                                    <strong style="color:var(--ax-text-strong);">{{ $it->description }}</strong>
                                    @if($it->product)
                                        <small style="display:block; font-size:10px; color:var(--ax-text-muted); font-family:var(--ax-font-mono);">SKU: {{ $it->product->sku }}</small>
                                    @endif
                                </td>
                                <td style="padding:10px 12px; text-align:center;">{{ rtrim(rtrim(number_format($it->qty, 2, ',', '.'), '0'), ',') }}</td>
                                <td style="padding:10px 12px; text-align:right;">Rp {{ number_format($it->unit_price, 0, ',', '.') }}</td>
                                <td style="padding:10px 12px; text-align:right; font-weight:600;">Rp {{ number_format($it->line_total, 0, ',', '.') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <!-- Summary Totals -->
                <div style="display:flex; justify-content:flex-end;">
                    <div style="width:280px; font-size:12px; display:flex; flex-direction:column; gap:6px;">
                        <div style="display:flex; justify-content:space-between;">
                            <span style="color:var(--ax-text-muted);">Subtotal:</span>
                            <strong>Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</strong>
                        </div>
                        @if($invoice->discount > 0)
                            <div style="display:flex; justify-content:space-between; color:#dc2626;">
                                <span>Diskon:</span>
                                <span>- Rp {{ number_format($invoice->discount, 0, ',', '.') }}</span>
                            </div>
                        @endif
                        @if($invoice->tax_amount > 0)
                            <div style="display:flex; justify-content:space-between; color:var(--ax-text-muted);">
                                <span>PPN ({{ $invoice->tax_percent }}%):</span>
                                <span>Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span>
                            </div>
                        @endif
                        <hr style="border:none; border-top:2px solid var(--ax-border); margin:4px 0;">
                        <div style="display:flex; justify-content:space-between; font-size:14px;">
                            <strong style="color:var(--ax-text-strong);">Total Tagihan:</strong>
                            <strong style="color:var(--jk-deepsage); font-size:1.2rem;">Rp {{ number_format($invoice->total, 0, ',', '.') }}</strong>
                        </div>
                    </div>
                </div>

                @if($invoice->notes)
                    <div style="margin-top:24px; padding:12px; background:var(--ax-surface-subtle); border-radius:var(--ax-radius-md); font-size:11px; color:var(--ax-text-muted);">
                        <strong style="display:block; margin-bottom:2px; color:var(--ax-text-strong);">Catatan:</strong>
                        {{ $invoice->notes }}
                    </div>
                @endif
            </section>
        </div>

        <!-- Kolom Kanan: Aksi & Komunikasi -->
        <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
            <!-- Status & Action Box -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Aksi Pembayaran</span>
                        <h3 class="ax-card__title">Status &amp; Konfirmasi</h3>
                    </div>
                </div>
                <div class="ax-card__body" style="display:flex; flex-direction:column; gap:12px;">
                    @if($invoice->status !== 'paid')
                        <form action="{{ route('admin.invoices.mark-paid', $invoice->id) }}" method="POST" onsubmit="return confirm('Tandai invoice ini sebagai LUNAS? Undangan akan otomatis aktif.')">
                            @csrf
                            <input type="hidden" name="payment_method" value="manual_transfer">
                            <button type="submit" class="ax-btn ax-btn--primary" style="width:100%; justify-content:center; background:#16a34a; border-color:#16a34a; padding:10px;">
                                <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
                                <span class="ax-btn__label">Verifikasi &amp; Tandai Lunas</span>
                            </button>
                        </form>
                    @else
                        <div style="padding:12px; background:rgba(22,163,74,0.1); border:1px solid rgba(22,163,74,0.3); border-radius:var(--ax-radius-md); text-align:center;">
                            <strong style="color:#16a34a; display:block; font-size:13px;">INVOICE LUNAS</strong>
                            <span style="font-size:11px; color:var(--ax-text-muted);">
                                Dibayar via {{ $invoice->payment_method ?? 'Transfer' }} pada {{ $invoice->paid_at ? $invoice->paid_at->format('d M Y, H:i') : '-' }} WIB
                            </span>
                        </div>
                    @endif

                    @if($invoice->payment_proof)
                        <div style="border-top:1px solid var(--ax-border); padding-top:10px;">
                            <small style="display:block; font-size:10px; font-weight:700; color:var(--ax-text-muted); margin-bottom:6px;">Bukti Transfer Pengguna:</small>
                            <a href="{{ $invoice->payment_proof }}" target="_blank">
                                <img src="{{ $invoice->payment_proof }}" alt="Bukti Transfer" style="width:100%; max-height:220px; object-fit:contain; border-radius:var(--ax-radius-md); border:1px solid var(--ax-border);">
                            </a>
                        </div>
                    @endif
                </div>
            </section>

            <!-- Share via WA / Email -->
            <section class="ax-card">
                <div class="ax-card__header">
                    <div class="ax-card__titles">
                        <span class="ax-card__eyebrow">Distribusi Invoice</span>
                        <h3 class="ax-card__title">Kirim ke Klien</h3>
                    </div>
                </div>
                <div class="ax-card__body" style="display:flex; flex-direction:column; gap:10px;">
                    @php
                        $cleanPhone = preg_replace('/[^0-9]/', '', $invoice->customer_phone ?? '');
                        if (str_starts_with($cleanPhone, '0')) $cleanPhone = '62' . substr($cleanPhone, 1);
                        $waText = "Halo Kak {$invoice->customer_name}, berikut invoice resmi undangan pernikahan Janoer Koening:\n\nNo: {$invoice->invoice_number}\nTotal: Rp " . number_format($invoice->total, 0, ',', '.') . "\n\nSilakan cek detail invoice & pilih metode pembayaran (manual/online) di sini:\n{$invoice->public_url}\n\nTerima kasih!";
                    @endphp

                    @if($cleanPhone)
                        <a href="https://wa.me/{{ $cleanPhone }}?text={{ rawurlencode($waText) }}" target="_blank" class="ax-btn ax-btn--secondary" style="width:100%; justify-content:center; background:#25D366; color:#fff; border-color:#25D366; padding:9px;">
                            <i data-lucide="message-circle" style="width:15px;height:15px;"></i>
                            <span class="ax-btn__label">Kirim via WhatsApp</span>
                        </a>
                    @endif

                    @if($invoice->customer_email)
                        <form action="{{ route('admin.invoices.send-email', $invoice->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="ax-btn ax-btn--secondary" style="width:100%; justify-content:center; padding:9px;">
                                <i data-lucide="mail" style="width:15px;height:15px;"></i>
                                <span class="ax-btn__label">Kirim via Email Resmi</span>
                            </button>
                        </form>
                    @endif

                    <div style="margin-top:6px;">
                        <small style="display:block; font-size:10px; color:var(--ax-text-muted); margin-bottom:4px;">Tautan Pembayaran Publik:</small>
                        <input type="text" value="{{ $invoice->public_url }}" readonly onclick="this.select(); document.execCommand('copy'); alert('Link invoice disalin!');" style="width:100%; padding:6px 8px; font-size:11px; font-family:var(--ax-font-mono); border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); background:var(--ax-surface-subtle); cursor:pointer;" title="Klik untuk salin">
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection