@extends('layouts.app')
@push('styles')
    <style>
        @media print {
            .no-print {
                display: none !important;
            }

            .invoice-container {
                box-shadow: none !important;
                margin: 0 !important;
            }

            body {
                background: white !important;
            }

            .whmcs-sidebar {
                display: none !important;
            }

            .whmcs-topbar {
                display: none !important;
            }

            .whmcs-main {
                margin-left: 0 !important;
                padding: 0 !important;
            }
        }

        .invoice-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .invoice-header {
            background: linear-gradient(135deg, var(--whmcs-primary), var(--whmcs-primary-dark));
            color: white;
            padding: 2rem;
        }

        .invoice-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .invoice-date {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .company-logo {
            width: 120px;
            height: 60px;
            background: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--whmcs-primary);
            font-size: 1.2rem;
        }

        .invoice-body {
            padding: 2rem;
        }

        .billing-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .billing-title {
            color: var(--whmcs-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .invoice-table {
            border: none;
            margin-bottom: 2rem;
        }

        .invoice-table th {
            background: linear-gradient(135deg, var(--whmcs-primary), var(--whmcs-primary-dark));
            color: white;
            border: none;
            padding: 1rem;
            font-weight: 600;
        }

        .invoice-table td {
            padding: 1rem;
            border-bottom: 1px solid #dee2e6;
            vertical-align: middle;
        }

        .invoice-table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .total-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            padding: 1.5rem;
            border-left: 4px solid var(--whmcs-primary);
        }

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

        .total-row:last-child {
            border-bottom: none;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--whmcs-primary);
        }

        .payment-info {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .payment-status {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .status-paid {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-unpaid {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .status-overdue {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        .invoice-footer {
            background: #f8f9fa;
            padding: 1.5rem 2rem;
            border-top: 1px solid #dee2e6;
            text-align: center;
            color: #6c757d;
        }

        .action-buttons {
            margin-bottom: 2rem;
        }

        .btn-invoice {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

        .btn-invoice-primary {
            background: linear-gradient(135deg, var(--whmcs-primary), var(--whmcs-primary-dark));
            color: white;
            border: none;
        }

        .btn-invoice-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
            color: white;
        }

        .btn-invoice-outline {
            background: transparent;
            color: var(--whmcs-primary);
            border: 2px solid var(--whmcs-primary);
        }

        .btn-invoice-outline:hover {
            background: var(--whmcs-primary);
            color: white;
        }

        .invoice-notes {
            background: #fff9e6;
            border: 1px solid #ffd700;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .notes-title {
            color: #856404;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .qr-code {
            width: 100px;
            height: 100px;
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }
    </style>
@endpush
@section('title', 'WHMCS Admin - Customers')
@section('page-title', 'Customer Management')

@section('breadcrumb')
    <a href="{{ route('dashboard') }}" class="breadcrumb-item">Dashboard</a>
    <span class="breadcrumb-item active">Order Management</span>/Invoice
@endsection


@section('content')
    <!-- Action Buttons -->
    <div class="action-buttons no-print">
        <a href="#" class="btn-invoice btn-invoice-primary" onclick="window.print()">
            <i class="fas fa-print"></i> Print Invoice
        </a>
        <a href="#" class="btn-invoice btn-invoice-outline" onclick="downloadPDF()">
            <i class="fas fa-file-pdf"></i> Download PDF
        </a>
        <a href="#" class="btn-invoice btn-invoice-outline" onclick="sendEmail()">
            <i class="fas fa-envelope"></i> Email Invoice
        </a>
        <a href="#" class="btn-invoice btn-invoice-outline" onclick="editInvoice()">
            <i class="fas fa-edit"></i> Edit Invoice
        </a>
    </div>

    <!-- Invoice Container -->
    <div class="invoice-container">
        <!-- Invoice Header -->
        <div class="invoice-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="invoice-number">ORDER INVOICE</div>
                    <div class="invoice-date">
                        <strong>Order #:</strong> {{ $order->order_number ?? 'N/A' }}<br>
                        <strong>Order Date:</strong> {{ $order->created_at->format('F d, Y') ?? '-' }}<br>
                        <strong>Due Date:</strong> {{ $order->due_date ? $order->due_date->format('F d, Y') : '-' }}
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="company-logo">
                        <i class="fas fa-shopping-cart me-2"></i>
                        WHMCS
                    </div>
                    <div class="mt-3">
                        @php
                            $statusClass = match ($order->status) {
                                'pending' => 'status-unpaid',
                                'active' => 'status-paid',
                                'completed' => 'status-paid',
                                'cancelled' => 'status-overdue',
                                default => 'status-unpaid',
                            };
                        @endphp
                        <span class="payment-status {{ $statusClass }}">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ strtoupper($order->status ?? 'UNPAID') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Invoice Body -->
        <div class="invoice-body">
            <!-- Billing Information -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="billing-section">
                        <div class="billing-title">
                            <i class="fas fa-user me-2"></i>
                            Bill To
                        </div>
                        <strong>{{ $order->customer->full_name ?? 'N/A' }}</strong><br>
                        {{ $order->customer->company_name ?? '' }}<br>
                        {{ $order->customer->address ?? '' }}<br>
                        {{ $order->customer->city ?? '' }}, {{ $order->customer->state ?? '' }}
                        {{ $order->customer->zip ?? '' }}<br>
                        {{ $order->customer->country ?? '' }}<br>
                        <strong>Phone:</strong> {{ $order->customer->phone ?? '-' }}<br>
                        <strong>Email:</strong> {{ $order->customer->email ?? '-' }}<br>
                        <strong>Customer ID:</strong> {{ $order->customer->customer_id ?? '-' }}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="billing-section">
                        <div class="billing-title">
                            <i class="fas fa-credit-card me-2"></i>
                            Payment Method
                        </div>
                        {{ ucfirst(str_replace('_', ' ', $order->payment_method ?? '-')) }}
                    </div>
                </div>
            </div>

            <!-- Order Items -->
            <table class="table invoice-table">
                <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>
                    {{--   @foreach ($order->items as $item) --}}
                    <tr>
                        <td>
                            <strong>{{ $order->product->name ?? 'N/A' }}</strong><br>
                            <small class="text-muted">Billing Cycle:
                                {{ ucfirst($order->billing_cycle) }}</small><br>
                            <small class="text-muted">Period: {{-- {{ $order->start_date->format('M d, Y') ?? '-' }} -
                                    {{ $order->end_date->format('M d, Y') ?? '-' }} --}}</small>
                        </td>
                        <td class="text-center">{{ $order->quantity }}</td>
                        <td class="text-end">${{ number_format($order->unit_price, 2) }}</td>
                        <td class="text-end">${{ number_format($order->total_price, 2) }}</td>
                    </tr>
                    {{--   @endforeach --}}
                </tbody>
            </table>

            <!-- Totals Section -->
            <div class="row">
                <div class="col-md-6">
                    <!-- Payment Information -->
                    <div class="payment-info">
                        <h6 class="mb-3">
                            <i class="fas fa-info-circle me-2"></i>
                            Payment Information
                        </h6>
                        <div class="row">
                            <div class="col-4">
                                <div class="qr-code">
                                    <i class="fas fa-qrcode fa-2x"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <strong>Accepted Methods:</strong><br>
                                <i class="fab fa-cc-visa me-1"></i>
                                <i class="fab fa-cc-mastercard me-1"></i>
                                <i class="fab fa-cc-paypal me-1"></i>
                                <i class="fab fa-bitcoin me-1"></i><br><br>

                                <strong>Bank Transfer:</strong><br>
                                Account: 1234567890<br>
                                Routing: 987654321<br>
                                SWIFT: WHMCUS33
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="total-section">
                        <div class="total-row">
                            <span>Subtotal:</span>
                            <span>${{ number_format($order->subtotal, 2) }}</span>
                        </div>
                        <div class="total-row">
                            <span>Discount ({{ $order->discount_percent ?? 0 }}%):</span>
                            <span class="text-success">-${{ number_format($order->discount_amount, 2) }}</span>
                        </div>
                        <div class="total-row">
                            <span>Tax ({{ $order->tax_percent ?? 0 }}%):</span>
                            <span>${{ number_format($order->tax_amount, 2) }}</span>
                        </div>
                        <div class="total-row">
                            <span>Setup Fee:</span>
                            <span>${{ number_format($order->setup_fee ?? 0, 2) }}</span>
                        </div>
                        <div class="total-row">
                            <span><strong>Total Amount:</strong></span>
                            <span><strong>${{ number_format($order->total_amount, 2) }}</strong></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Notes -->
            <div class="invoice-notes">
                <div class="notes-title">
                    <i class="fas fa-sticky-note me-2"></i>
                    Notes & Terms
                </div>
                <p class="mb-2">
                    {!! nl2br(e($order->notes ?? 'No additional notes.')) !!}
                </p>
            </div>
        </div>

        <!-- Invoice Footer -->
        <div class="invoice-footer">
            <div class="row">
                <div class="col-md-6 text-start">
                    <small>
                        <strong>WHMCS Hosting Solutions</strong><br>
                        Powered by WHMCS - The Complete Client Management, Billing & Support Solution
                    </small>
                </div>
                <div class="col-md-6 text-end">
                    <small>
                        Invoice generated on: {{ now()->format('F d, Y \a\t h:i A') }}<br>
                        Page 1 of 1
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Actions (optional) -->
    <!-- ... your payment history and quick actions ... -->
@endsection