@extends('layouts.admin')

@section('title', 'Daftar Invoice Manual (VIP)')
@section('page_title', 'Invoice Manual (VIP)')

@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>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Invoice Manual (VIP)</h1>
                <p class="ax-page-head__subtitle">Kelola tagihan custom klien VIP, kirim link via WhatsApp/Email, dan verifikasi pembayaran.</p>
            </div>
            <div class="ax-page-head__actions">
                <a href="{{ route('admin.invoices.create') }}" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Buat Invoice Baru</span>
                </a>
            </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

    <!-- Table Invoices -->
    <section class="ax-card">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Daftar Tagihan</span>
                <h3 class="ax-card__title">Semua Invoice Manual ({{ $invoices->total() }})</h3>
            </div>
            <div style="display:flex; gap:8px;">
                <a href="{{ route('admin.invoices') }}" class="ax-btn ax-btn--secondary ax-btn--sm" style="{{ !request('status') ? 'font-weight:700;' : '' }}">Semua</a>
                <a href="{{ route('admin.invoices', ['status' => 'pending_verification']) }}" class="ax-btn ax-btn--secondary ax-btn--sm" style="{{ request('status') === 'pending_verification' ? 'font-weight:700; color:#d97706;' : '' }}">Verifikasi (TF)</a>
                <a href="{{ route('admin.invoices', ['status' => 'paid']) }}" class="ax-btn ax-btn--secondary ax-btn--sm" style="{{ request('status') === 'paid' ? 'font-weight:700; color:#16a34a;' : '' }}">Lunas</a>
            </div>
        </div>
        <div class="ax-card__body" style="padding:0;">
            <div style="overflow-x:auto;">
                <table style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs);">
                    <thead>
                        <tr style="border-bottom:1px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                            <th style="padding:12px 16px;">No. Invoice</th>
                            <th style="padding:12px 16px;">Klien / Pelanggan</th>
                            <th style="padding:12px 16px;">Undangan &amp; Subdomain</th>
                            <th style="padding:12px 16px;">Tgl Terbit / Tempo</th>
                            <th style="padding:12px 16px; text-align:right;">Total Tagihan</th>
                            <th style="padding:12px 16px; text-align:center;">Status</th>
                            <th style="padding:12px 16px; text-align:center;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($invoices as $inv)
                            <tr style="border-bottom:1px solid var(--ax-border);">
                                <td style="padding:12px 16px;">
                                    <a href="{{ route('admin.invoices.show', $inv->id) }}" style="font-family:var(--ax-font-mono); font-weight:700; color:var(--jk-deepsage); text-decoration:underline;">
                                        {{ $inv->invoice_number }}
                                    </a>
                                </td>
                                <td style="padding:12px 16px;">
                                    <strong style="display:block; color:var(--ax-text-strong);">{{ $inv->customer_name }}</strong>
                                    <span style="font-size:11px; color:var(--ax-text-muted);">{{ $inv->customer_phone ?: $inv->customer_email ?: '-' }}</span>
                                </td>
                                <td style="padding:12px 16px;">
                                    @if($inv->invitation)
                                        <span style="display:block; font-weight:600;">{{ $inv->invitation->title }}</span>
                                        @if($inv->invitation->subdomain)
                                            <span style="font-size:11px; color:#d97706; font-family:var(--ax-font-mono);">
                                                {{ $inv->invitation->subdomain }}.{{ config('app.vip_domain', 'janoerkoening.com') }}
                                            </span>
                                        @else
                                            <span style="font-size:11px; color:var(--ax-text-muted);">/u/{{ $inv->invitation->slug }}</span>
                                        @endif
                                    @else
                                        <span style="color:var(--ax-text-muted);">- Belum Ditautkan -</span>
                                    @endif
                                </td>
                                <td style="padding:12px 16px;">
                                    <div>{{ $inv->issue_date->format('d M Y') }}</div>
                                    @if($inv->due_date)
                                        <small style="font-size:10px; color:var(--ax-text-muted);">Tempo: {{ $inv->due_date->format('d M Y') }}</small>
                                    @endif
                                </td>
                                <td style="padding:12px 16px; text-align:right; font-weight:700; color:var(--jk-deepsage); font-size:13px;">
                                    Rp {{ number_format($inv->total, 0, ',', '.') }}
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    @php
                                        $badgeClass = match($inv->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 py-0.5 rounded text-[10px] font-bold uppercase {{ $badgeClass }}">
                                        {{ $inv->status_label }}
                                    </span>
                                </td>
                                <td style="padding:12px 16px; text-align:center;">
                                    <div style="display:inline-flex; gap:6px;">
                                        <a href="{{ route('admin.invoices.show', $inv->id) }}" class="ax-btn ax-btn--secondary ax-btn--sm" style="padding:4px 8px;" title="Lihat Detail">
                                            <i data-lucide="eye" style="width:13px;height:13px;"></i>
                                        </a>
                                        <a href="{{ $inv->public_url }}" target="_blank" class="ax-btn ax-btn--secondary ax-btn--sm" style="padding:4px 8px;" title="Buka Link Publik">
                                            <i data-lucide="external-link" style="width:13px;height:13px;"></i>
                                        </a>
                                        @if($inv->status !== 'paid')
                                            <form action="{{ route('admin.invoices.mark-paid', $inv->id) }}" method="POST" onsubmit="return confirm('Tandai invoice {{ $inv->invoice_number }} sebagai LUNAS?')">
                                                @csrf
                                                <button type="submit" class="ax-btn ax-btn--primary ax-btn--sm" style="padding:4px 8px; background:#16a34a; border-color:#16a34a;" title="Tandai Lunas">
                                                    <i data-lucide="check" style="width:13px;height:13px;"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" style="padding:32px; text-align:center; color:var(--ax-text-muted);">
                                    Belum ada invoice manual yang dibuat.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($invoices->hasPages())
                <div style="padding:16px;">{{ $invoices->links() }}</div>
            @endif
        </div>
    </section>
</div>
@endsection