@extends('admin.layout.app')
@section('title', 'Invoice ' . $invoice->invoice_number)
@section('content')

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

    </style>

    <div class="inv-actions">
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
            ← Back
        </a>
        <button onclick="window.print()" class="sc-button">
            🖨️ Print / Save PDF
        </button>
    </div>

    <div class="invoice-wrapper">

        {{-- ── Header ── --}}
        <div class="inv-header">
            <div class="inv-logo">
                <div class="logo-text">
                    <img src="{{ asset('assets/images/logo/logo.webp') }}"
                         style="height: 45px; width: auto; object-fit: contain;">
                </div>
            </div>
            <div class="inv-badge">
                <div class="inv-label">Invoice</div>
                <div class="inv-number">{{ $invoice->invoice_number }}</div>
                <div><span class="inv-status">PAID</span></div>
            </div>
        </div>

        {{-- ── Orange Stripe ── --}}
        <div class="inv-stripe"></div>

        {{-- ── Meta Row ── --}}
        <div class="inv-meta">
            <div class="inv-meta-cell">
                <div class="cell-label">Issue Date</div>
                <div class="cell-value">{{ $invoice->paid_at->format('M d, Y') }}</div>
            </div>
            {{--            <div class="inv-meta-cell">--}}
            {{--                <div class="cell-label">Payment ID</div>--}}
            {{--                <div class="cell-value mono">{{ Str::limit($invoice->stripe_payment_id, 24) }}</div>--}}
            {{--            </div>--}}
            <div class="inv-meta-cell">
                <div class="cell-label">Status</div>
                <div class="cell-value" style="color:#16a34a;">✓ Paid</div>
            </div>
        </div>

        {{-- ── Addresses ── --}}
        <div class="inv-addresses">
            <div class="inv-addr">
                <h6>From</h6>
                <p>
                    <strong>CarsInstant LLC</strong><br>
                    123 Auto Drive, Suite 100<br>
                    Houston, TX 77001<br>
                    United States<br>
                    billing@carsinstant.com
                </p>
            </div>
            <div class="inv-addr">
                <h6>Bill To</h6>
                <p>
                    <strong>{{ $invoice->vendor_name }}</strong><br>
                    {{ $invoice->vendor_email }}<br>
                    @if($invoice->vendor->phone ?? null)
                        {{ $invoice->vendor->phone }}<br>
                    @endif
                    Member since {{ $invoice->vendor->created_at->format('M Y') }}
                </p>
            </div>
        </div>

        {{-- ── Items Table ── --}}
        <div class="inv-table-wrap">
            <table class="inv-table">
                <thead>
                <tr>
                    <th style="width:50%">Description</th>
                    <th>Listing Limit</th>
                    <th>Qty</th>
                    <th>Amount</th>
                </tr>
                </thead>
                <tbody>

                <tr>
                    <td>
                        <div class="item-name">{{ $invoice->snapshot['title'] }} Package</div>
                        <div class="item-desc">Vendor listing package — one-time payment</div>
                        @if(!empty($invoice->snapshot['features']))
                            <div class="item-features">
                                @foreach($invoice->snapshot['features'] as $feat)
                                    <span class="feat-tag">{{ $feat }}</span>
                                @endforeach
                            </div>
                        @endif
                    </td>
                    <td style="vertical-align:middle;">
                        {{ $invoice->snapshot['limit'] }} Listings
                    </td>
                    <td style="vertical-align:middle;">1</td>
                    <td style="vertical-align:middle; font-weight:700; font-family:'DM Mono',monospace;">
                        ${{ number_format($invoice->amount, 2) }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        {{-- ── Totals ── --}}
        <div class="inv-totals">
            <div class="inv-totals-box">
                <div class="inv-totals-row">
                    <span class="t-label">Subtotal</span>
                    <span class="t-value">${{ number_format($invoice->amount, 2) }}</span>
                </div>
                <div class="inv-totals-row">
                    <span class="t-label">Tax (0%)</span>
                    <span class="t-value">$0.00</span>
                </div>
                <div class="inv-totals-row">
                    <span class="t-label">Discount</span>
                    <span class="t-value">$0.00</span>
                </div>
                <div class="inv-totals-row total-row">
                    <span class="t-label">Total Paid</span>
                    <span class="t-value">${{ number_format($invoice->amount, 2) }}</span>
                </div>
            </div>
        </div>

        {{-- ── Payment Info ── --}}
        <div class="inv-payment">
            <div class="pay-icon">
                <svg width="20" height="20" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24">
                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
                    <line x1="1" y1="10" x2="23" y2="10"/>
                </svg>
            </div>
            <div class="pay-details">
                <h6>Payment Method</h6>
                <p>Stripe — Credit / Debit Card &nbsp;·&nbsp; {{ $invoice->paid_at->format('M d, Y h:i A') }}</p>
            </div>
        </div>

        {{-- ── Footer ── --}}
        <div class="inv-footer">
            <p>
                Thank you for your business!<br>
                For support: <strong>support@trljapan.com</strong>
            </p>
            <div>
                <div class="footer-brand">
                    <img src="{{ asset('assets/images/logo/logo.webp') }}"
                         style="height: 32px; width: auto; object-fit: contain;">
                </div>
                <p style="margin-top:4px;">{{ $invoice->invoice_number }} · {{ $invoice->paid_at->format('Y') }}</p>
            </div>
        </div>

    </div>

@endsection