<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Facturi & abonament — {{ $tenant->display_name ?? $tenant->name }}</title>
<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #f3f4f6; color: #1f2937; line-height: 1.5; }
    .wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
    .nav-back { display: inline-block; margin-bottom: 16px; color: {{ $themeColor }}; text-decoration: none; font-size: 14px; }
    h1 { font-size: 24px; margin-bottom: 4px; }
    .sub { color: #6b7280; font-size: 14px; margin-bottom: 20px; }
    .invoice {
        background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
        padding: 20px; margin-bottom: 12px; display: flex; gap: 16px; align-items: center;
    }
    .invoice .num { font-weight: 600; font-size: 14px; flex: 0 0 120px; }
    .invoice .info { flex: 1; }
    .invoice .info .row { font-size: 13px; color: #6b7280; }
    .invoice .info .row b { color: #1f2937; }
    .invoice .amount { font-weight: 700; font-size: 20px; min-width: 100px; text-align: right; }
    .invoice .actions { flex: 0 0 auto; }
    .badge { display:inline-block; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .badge-paid { background:#dcfce7; color:#166534; }
    .badge-pending { background:#fef3c7; color:#92400e; }
    .badge-overdue { background:#fee2e2; color:#991b1b; }
    .btn-pay {
        background: {{ $themeColor }}; color: #fff; padding: 10px 20px; border-radius: 8px;
        border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none;
        display: inline-block;
    }
    .btn-pay:hover { opacity: .9; }
    .empty { text-align: center; padding: 60px 20px; color: #6b7280; }

    .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index: 100; align-items: center; justify-content: center; }
    .modal.open { display: flex; }
    .modal-box { background:#fff; border-radius:12px; padding:24px; max-width:480px; width: 90%; }
    .modal-box h3 { margin-bottom: 8px; font-size: 18px; }
    .modal-box p { color:#6b7280; font-size: 13px; margin-bottom: 16px; }
    .method {
        display: flex; gap: 12px; align-items: center; padding: 12px;
        border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer; margin-bottom: 8px;
        transition: border-color .15s;
    }
    .method:hover { border-color: {{ $themeColor }}; }
    .method.disabled { opacity: .4; cursor: not-allowed; }
    .method .icon { font-size: 24px; }
    .method .label { font-weight: 600; flex: 1; font-size: 14px; }
    .method .desc { font-size: 11px; color: #6b7280; }
    .method-form { display: inline; }
    .method-btn { all: unset; cursor: pointer; width: 100%; }
    .modal-close { float:right; cursor:pointer; color:#9ca3af; font-size: 22px; }
</style>
</head>
<body>
    <div class="wrap">
        <a href="/app" class="nav-back">← Înapoi la AutoCRM</a>
        <h1>Facturi & abonament</h1>
        <p class="sub">{{ $tenant->display_name ?? $tenant->name }} · {{ $tenant->slug }}.service.mir.md</p>

        @if ($invoices->isEmpty())
            <div class="empty">
                <div style="font-size:48px;margin-bottom:8px;">📄</div>
                <div style="font-size:16px;font-weight:600;margin-bottom:4px;">Nicio factură emisă încă</div>
                <div style="font-size:13px;">Operatorul îți va emite factură când e timpul abonamentului.</div>
            </div>
        @else
            @foreach ($invoices as $inv)
                <div class="invoice">
                    <div class="num">
                        {{ $inv->invoice_number ?? '#' . $inv->id }}
                    </div>
                    <div class="info">
                        <div class="row"><b>{{ $inv->plan?->name ?? 'Abonament' }}</b> · {{ $inv->period === 'yearly' ? 'Anual' : 'Lunar' }}</div>
                        <div class="row">{{ $inv->period_start?->format('d.m.Y') }} → {{ $inv->period_end?->format('d.m.Y') }}</div>
                        <div class="row" style="margin-top:6px;">
                            <span class="badge badge-{{ $inv->status === 'paid' ? 'paid' : ($inv->status === 'overdue' ? 'overdue' : 'pending') }}">
                                @switch($inv->status)
                                    @case('paid') ✓ Plătit @if($inv->paid_at) la {{ $inv->paid_at->format('d.m.Y') }} @endif @break
                                    @case('overdue') ⚠ Întârziat @break
                                    @case('pending') ⏳ În așteptare @break
                                    @default {{ $inv->status }}
                                @endswitch
                            </span>
                            @if ($inv->due_at)
                                <span style="margin-left:8px;color:#6b7280;font-size:11px;">scadent {{ $inv->due_at->format('d.m.Y') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="amount">{{ number_format($inv->amount, 2) }} {{ $inv->currency }}</div>
                    <div class="actions">
                        @if ($inv->status === 'paid')
                            <span style="color:#10b981;font-weight:600;">✓</span>
                        @else
                            <button class="btn-pay" onclick="document.getElementById('m-{{ $inv->id }}').classList.add('open')">
                                💳 Plătește
                            </button>
                        @endif
                    </div>
                </div>

                {{-- Modal de plată --}}
                <div id="m-{{ $inv->id }}" class="modal" onclick="if(event.target===this)this.classList.remove('open')">
                    <div class="modal-box">
                        <span class="modal-close" onclick="document.getElementById('m-{{ $inv->id }}').classList.remove('open')">×</span>
                        <h3>Plătește {{ $inv->invoice_number ?? '#' . $inv->id }}</h3>
                        <p>Sumă: <b>{{ number_format($inv->amount, 2) }} {{ $inv->currency }}</b></p>

                        @if ($methods['stripe'])
                            <form method="POST" action="{{ route('pay.start', ['subscription' => $inv->id]) }}" class="method-form">
                                @csrf
                                <input type="hidden" name="method" value="stripe">
                                <button class="method-btn">
                                    <div class="method">
                                        <div class="icon">💳</div>
                                        <div>
                                            <div class="label">Card bancar</div>
                                            <div class="desc">Visa, Mastercard prin Stripe</div>
                                        </div>
                                    </div>
                                </button>
                            </form>
                        @endif

                        @if ($methods['paypal'])
                            <form method="POST" action="{{ route('pay.start', ['subscription' => $inv->id]) }}" class="method-form">
                                @csrf
                                <input type="hidden" name="method" value="paypal">
                                <button class="method-btn">
                                    <div class="method">
                                        <div class="icon">🅿️</div>
                                        <div>
                                            <div class="label">PayPal</div>
                                            <div class="desc">Cont PayPal sau card prin PayPal</div>
                                        </div>
                                    </div>
                                </button>
                            </form>
                        @endif

                        @if ($methods['paynet'])
                            <form method="POST" action="{{ route('pay.start', ['subscription' => $inv->id]) }}" class="method-form">
                                @csrf
                                <input type="hidden" name="method" value="paynet">
                                <button class="method-btn">
                                    <div class="method">
                                        <div class="icon">🇲🇩</div>
                                        <div>
                                            <div class="label">Paynet</div>
                                            <div class="desc">Card MAIB / MICB / Victoriabank, MD Cash, e-money</div>
                                        </div>
                                    </div>
                                </button>
                            </form>
                        @endif

                        @if ($methods['bank'])
                            <form method="POST" action="{{ route('pay.start', ['subscription' => $inv->id]) }}" class="method-form">
                                @csrf
                                <input type="hidden" name="method" value="bank">
                                <button class="method-btn">
                                    <div class="method">
                                        <div class="icon">🏦</div>
                                        <div>
                                            <div class="label">Transfer bancar</div>
                                            <div class="desc">Plătește direct din bancă (1-3 zile)</div>
                                        </div>
                                    </div>
                                </button>
                            </form>
                        @endif

                        @if (! $methods['stripe'] && ! $methods['paypal'] && ! $methods['paynet'] && ! $methods['bank'])
                            <div style="text-align:center;color:#9ca3af;padding:32px 16px;font-size:13px;">
                                Nicio metodă de plată configurată. Contactează operatorul.
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        @endif

        @if (! empty($legal['name']))
            <div style="margin-top:32px;padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;color:#6b7280;">
                <b>Operator platformă:</b> {{ $legal['name'] }}
                @if (! empty($legal['idno'])) · IDNO {{ $legal['idno'] }} @endif
                @if (! empty($legal['address'])) · {{ $legal['address'] }} @endif
                @if (! empty($legal['email'])) · {{ $legal['email'] }} @endif
            </div>
        @endif
    </div>
</body>
</html>
