@extends('frontend.layouts.app')

@section('title', 'Invoice ' . $order->reference . ' - MyFamily Moments')

@push('style')
    <style>
        /* --- keep your original styles (trimmed here for brevity) --- */
        body {
            background: #f8fafc;
            font-family: 'Inter', sans-serif;
        }

        .invoice-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .invoice-header {
            background: #fff;
            border-radius: 15px 15px 0 0;
            padding: 30px;
            border-bottom: 3px solid #667eea;
        }

        .invoice-body {
            background: #fff;
            padding: 30px;
        }

        .invoice-footer {
            background: #fff;
            border-radius: 0 0 15px 15px;
            padding: 30px;
            border-top: 1px solid #e2e8f0;
        }

        .invoice-actions {
            background: #fff;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .1)
        }

        .company-logo {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.5rem;
            margin-bottom: 15px
        }

        .company-info h2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 5px
        }

        .company-tagline {
            color: #64748b;
            font-size: .9rem;
            margin-bottom: 0
        }

        .invoice-title {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 10px
        }

        .invoice-number {
            color: #667eea;
            font-weight: 600;
            font-size: 1.1rem
        }

        .status-badge {
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: .9rem;
            display: inline-block
        }

        .status-paid {
            background: #dcfce7;
            color: #166534
        }

        .status-pending {
            background: #fef3c7;
            color: #92400e
        }

        .status-failed,
        .status-rejected {
            background: #fee2e2;
            color: #991b1b
        }

        .info-section {
            background: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px
        }

        .info-title {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 10px;
            font-size: .9rem;
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .info-content {
            color: #475569;
            line-height: 1.6
        }

        .table-custom {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .05)
        }

        .table-custom thead th {
            background: #667eea;
            color: #fff;
            border: none;
            padding: 15px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: .8rem;
            letter-spacing: .5px
        }

        .table-custom tbody td {
            padding: 15px;
            border-bottom: 1px solid #f1f5f9;
            vertical-align: middle
        }

        .item-description {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 5px
        }

        .item-details {
            color: #64748b;
            font-size: .9rem
        }

        .total-section {
            background: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0
        }

        .total-row:last-child {
            border-bottom: none;
            font-weight: 700;
            font-size: 1.2rem;
            color: #1e293b;
            padding-top: 15px;
            margin-top: 10px;
            border-top: 2px solid #667eea
        }

        .payment-info {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px
        }

        .payment-method {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px
        }

        .payment-icon {
            width: 30px;
            height: 20px;
            background: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #667eea;
            font-size: .8rem;
            font-weight: 600
        }

        .notes-section {
            background: #fef7cd;
            border: 1px solid #fbbf24;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px
        }

        .notes-title {
            color: #92400e;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .action-btn {
            padding: 12px 24px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .3s ease;
            border: none;
            cursor: pointer
        }

        .btn-primary-custom {
            background: #667eea;
            color: #fff
        }

        .btn-outline-custom {
            background: transparent;
            border: 2px solid #e2e8f0;
            color: #64748b
        }

        .btn-success-custom {
            background: #10b981;
            color: #fff
        }

        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            font-size: 4rem;
            font-weight: 700;
            color: rgba(102, 126, 234, .1);
            z-index: 0;
            pointer-events: none
        }

        .invoice-content {
            position: relative;
            z-index: 1
        }

        @media print {
            body {
                background: #fff
            }

            .invoice-actions,
            .action-btn {
                display: none !important
            }

            .invoice-container {
                max-width: none;
                padding: 0
            }

            .invoice-header,
            .invoice-body,
            .invoice-footer {
                box-shadow: none;
                border-radius: 0
            }
        }
    </style>
@endpush

@section('content')
    <div class="invoice-container">
        {{-- Actions --}}
        <div class="invoice-actions">
            <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center">
                <div>
                    <h4 class="mb-1">Invoice Management</h4>
                    <p class="text-muted mb-0">Download, email, or print your invoice</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <button class="action-btn btn-outline-custom" onclick="window.print()">
                        <i class="fas fa-print"></i> Print
                    </button>
                    <button class="action-btn btn-outline-custom" onclick="downloadPDF()">
                        <i class="fas fa-download"></i> Download PDF
                    </button>
                    <button class="action-btn btn-success-custom" onclick="emailInvoice()">
                        <i class="fas fa-envelope"></i> Email Invoice
                    </button>
                    <a href="{{ route('portal.dashboard') }}" class="action-btn btn-primary-custom">
                        <i class="fas fa-arrow-left"></i> Back to Billing
                    </a>
                </div>
            </div>
        </div>

        {{-- Document --}}
        <div class="invoice-document"
            style="position:relative;background:#fff;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,.1);">
            @php
                $symbol = $order->plan->currencySymbol();
                $amount = number_format($order->amount_cents / 100, 2);
                $status = strtolower($order->status); // pending|paid|approved|failed|rejected|refunded
                $statusClass = match ($status) {
                    'paid', 'refunded' => 'status-paid',
                    'pending', 'approved' => 'status-pending',
                    default => 'status-failed',
                };
                $user = $order->user ?? auth()->user();
            @endphp

            @if (in_array($status, ['paid', 'approved', 'refunded']))
                <div class="watermark">{{ strtoupper($status) }}</div>
            @endif

            <div class="invoice-content">
                {{-- Header --}}
                <div class="invoice-header">
                    <div class="row align-items-start">
                        <div class="col-md-6">
                            <div class="company-info">
                                <div class="company-logo"><i class="fas fa-heart"></i></div>
                                <h2>MyFamily Moments</h2>
                                <p class="company-tagline">Preserving Your Precious Memories</p>
                                <div class="mt-3 text-muted">
                                    123 Memory Lane<br>
                                    San Francisco, CA 94105<br>
                                    United States<br>
                                    <strong>Phone:</strong> +1 (555) 123-4567<br>
                                    <strong>Email:</strong> billing@myfamilymoments.com
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <h1 class="invoice-title">INVOICE</h1>
                            <p class="invoice-number">#{{ $order->reference }}</p>
                            <div class="mt-3">
                                <span class="status-badge {{ $statusClass }}">
                                    <i class="fas fa-circle-check me-1"></i>{{ strtoupper($status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Body --}}
                <div class="invoice-body">
                    {{-- Bill To + Details --}}
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="info-section">
                                <div class="info-title">Bill To</div>
                                <div class="info-content">
                                    <strong>{{ trim(($user->first_name ?? '') . ' ' . ($user->last_name ?? '')) ?: $user->name }}</strong><br>
                                    {{ $user->family_name ?? '' }}<br>
                                    {{ $user->email }}<br>
                                    @if (!empty($user->phone))
                                        <strong>Phone:</strong> {{ $user->phone }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-section">
                                <div class="info-title">Invoice Details</div>
                                <div class="info-content">
                                    <div class="row">
                                        <div class="col-6">
                                            <strong>Invoice Date:</strong><br>
                                            {{ optional($order->created_at)->format('F d, Y') }}
                                        </div>
                                        <div class="col-6">
                                            <strong>Due Date:</strong><br>
                                            {{ optional($order->created_at)->addDays(0)->format('F d, Y') }}
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-6">
                                            <strong>Payment Method:</strong><br>
                                            {{ ucfirst($order->gateway ?? '—') }}
                                        </div>
                                        <div class="col-6">
                                            <strong>Payment Date:</strong><br>
                                            {{ optional($order->paid_at)->format('F d, Y') ?? '—' }}
                                        </div>
                                    </div>
                                    @if (!empty($order->payment_reference))
                                        <div class="row mt-2">
                                            <div class="col-12">
                                                <strong>Transaction ID:</strong><br>
                                                {{ $order->payment_reference }}
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Items --}}
                    <div class="invoice-table">
                        <div class="table-responsive">
                            <table class="table table-custom">
                                <thead>
                                    <tr>
                                        <th style="width:50%;">Description</th>
                                        <th style="width:15%;" class="text-center">Quantity</th>
                                        <th style="width:15%;" class="text-end">Unit Price</th>
                                        <th style="width:20%;" class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="item-description">{{ $order->plan->name }} Plan</div>
                                            <div class="item-details">
                                                {{ ucfirst(data_get($order->meta, 'billing', 'monthly')) }} subscription
                                                <br>
                                                <small class="text-muted">
                                                    Billing Period:
                                                    @php
                                                        $start = optional(
                                                            $order->paid_at ?? $order->created_at,
                                                        )->format('M d, Y');
                                                        $end =
                                                            data_get($order->meta, 'billing') === 'yearly'
                                                                ? optional($order->paid_at ?? $order->created_at)
                                                                    ->addYear()
                                                                    ->format('M d, Y')
                                                                : optional($order->paid_at ?? $order->created_at)
                                                                    ->addMonth()
                                                                    ->format('M d, Y');
                                                    @endphp
                                                    {{ $start }} - {{ $end }}
                                                </small>
                                            </div>
                                        </td>
                                        <td class="text-center">1</td>
                                        <td class="text-end amount">{{ $symbol }}{{ $amount }}</td>
                                        <td class="text-end amount">{{ $symbol }}{{ $amount }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Totals --}}
                    <div class="row justify-content-end">
                        <div class="col-md-6">
                            @php
                                $subtotal = $order->amount_cents / 100;
                                $tax = 0.0; // apply if you implement tax
                                $discount = 0.0; // apply if you implement coupons
                                $total = max($subtotal + $tax - $discount, 0);
                            @endphp
                            <div class="total-section">
                                <div class="total-row">
                                    <span class="total-label">Subtotal:</span>
                                    <span class="total-amount">{{ $symbol }}{{ number_format($subtotal, 2) }}</span>
                                </div>
                                <div class="total-row">
                                    <span class="total-label">Tax:</span>
                                    <span class="total-amount">{{ $symbol }}{{ number_format($tax, 2) }}</span>
                                </div>
                                @if ($discount > 0)
                                    <div class="total-row">
                                        <span class="total-label">Discount:</span>
                                        <span
                                            class="total-amount text-success">-{{ $symbol }}{{ number_format($discount, 2) }}</span>
                                    </div>
                                @endif
                                <div class="total-row">
                                    <span>Total Amount:</span>
                                    <span>{{ $symbol }}{{ number_format($total, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Payment Info --}}
                    <div class="payment-info">
                        <h5><i class="fas fa-credit-card me-2"></i>Payment Information</h5>
                        <div class="payment-method">
                            <div class="payment-icon">
                                {{ strtoupper(substr($order->payment_brand ?? ($order->gateway ?? 'PAY'), 0, 4)) }}
                            </div>
                            <span>
                                @if ($order->payment_brand && $order->payment_last4)
                                    {{ strtoupper($order->payment_brand) }} ending in ****{{ $order->payment_last4 }}
                                @elseif($order->gateway)
                                    Paid via {{ ucfirst($order->gateway) }}
                                @else
                                    —
                                @endif
                            </span>
                        </div>
                        <div class="payment-method">
                            <div class="payment-icon"><i class="fas fa-calendar"></i></div>
                            <span>
                                @if ($order->paid_at)
                                    Payment processed on {{ $order->paid_at->format('F d, Y \a\t g:i A T') }}
                                @else
                                    Awaiting payment
                                @endif
                            </span>
                        </div>
                        @if ($order->payment_reference)
                            <div class="payment-method">
                                <div class="payment-icon"><i class="fas fa-shield-alt"></i></div>
                                <span>Transaction ID: {{ $order->payment_reference }}</span>
                            </div>
                        @endif
                    </div>

                    {{-- Notes --}}
                    <div class="notes-section">
                        <div class="notes-title">
                            <i class="fas fa-info-circle"></i> Important Notes
                        </div>
                        <div class="notes-content">
                            <ul class="mb-0">
                                <li>
                                    @if ($status === 'paid' || $status === 'approved' || $status === 'refunded')
                                        This invoice has been {{ $status }}. Thank you!
                                    @else
                                        This invoice is {{ $status }}. Please complete payment to activate your
                                        subscription.
                                    @endif
                                </li>
                                <li>Your subscription will auto-renew on
                                    {{ optional($subscription->next_billing_at)->format('F d, Y') ?? '—' }}.</li>
                                <li>For billing questions: <a href="mailto:billing@myfamilymoments.com"
                                        class="text-white">billing@myfamilymoments.com</a></li>
                                <li>Manage your subscription in your account dashboard.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Footer --}}
                <div class="invoice-footer">
                    <div class="row">
                        <div class="col-md-8">
                            <h6 class="fw-bold mb-3">Thank You for Your Business!</h6>
                            <p class="text-muted mb-0">
                                We appreciate your trust in MyFamily Moments. If you have any questions about this invoice
                                or need help with your account, please contact support anytime.
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <div class="text-muted">
                                <small>
                                    <strong>Customer Support:</strong><br>
                                    Email: support@myfamilymoments.com<br>
                                    Phone: +1 (555) 123-4567<br>
                                    Hours: 24/7 Support Available
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div> {{-- invoice-content --}}
        </div> {{-- invoice-document --}}
    </div> {{-- invoice-container --}}
@endsection

@push('script')
    <script>
        function downloadPDF() {
            window.location = @json(route('invoice.download', ['reference' => $order->reference]));
        }

        function emailInvoice() {
            fetch(@json(route('invoice.email', ['reference' => $order->reference])), {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': @json(csrf_token())
                }
            }).then(() => {
                alert('Invoice emailed!');
            }).catch(() => {
                alert('Failed to email invoice.');
            });
        }
    </script>
@endpush