<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ __('subscriptions.invoice') }} - {{ $subscription->invoice_number }}</title>
    <link href="/css/invoice.css" rel="stylesheet">
    <style>
        .invoice-table th, .invoice-table td {
            text-align: center;
        }
        /* Remove special width/align for first child, make it balanced */
        .invoice-table th:first-child, .invoice-table td:first-child {
            text-align: left;
        }
        .customer-details p {
            margin: 5px 0;
        }
        .total-box .total-row {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px dashed #eee;
        }
        .total-box .total-row:last-child {
            border-bottom: none;
        }
        .total-box .total-row.final {
            border-top: 2px solid #000;
            border-bottom: none;
            font-weight: bold;
            font-size: 1.2em;
            margin-top: 10px;
            padding-top: 10px;
        }
        .payment-details-spacer {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="actions-bar no-print">
        <a href="{{ url()->previous() }}" class="btn-action btn-back">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
            </svg>
            {{ __('common.back') }}
        </a>
        <button onclick="window.print()" class="btn-action btn-print-top">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/>
                <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
            </svg>
            {{ __('subscriptions.print_invoice') }}
        </button>
    </div>

    <div class="invoice-container">
        <div class="invoice-header">
            <div class="company-info">
                <h2>Creative Projects Co.</h2>
                <p>Baghdad Almansoor Aldawoodi</p>
                <p>07719777917</p>
                <p>07819777917</p>
            </div>
            <div class="invoice-details">
                <h3>{{ __('subscriptions.invoice') }}</h3>
                <div class="invoice-meta">
                    <p><strong>{{ __('subscriptions.invoice_number') }}:</strong> {{ $subscription->invoice_number }}</p>
                    <p><strong>{{ __('common.date') }}:</strong> {{ $subscription->created_at->format('Y-m-d') }}</p>
                    <p><strong>{{ __('subscriptions.sales_employee') }}:</strong> {{ $subscription->creator->name ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <div class="customer-section">
            <div class="section-title">{{ __('subscriptions.invoice_to') }}</div>
            <div class="customer-details">
                <p><strong>{{ __('subscriptions.customer_name') }}:</strong> {{ $subscription->customer_name }}</p>
                <p><strong>{{ __('subscriptions.phone') }}:</strong> {{ $subscription->phone }}</p>
                <p><strong>{{ __('subscriptions.address') }}:</strong> {{ $subscription->address }}</p>
                @if($subscription->business_name)
                <p><strong>{{ __('subscriptions.business_name') }}:</strong> {{ $subscription->business_name }}</p>
                @endif
                @if($subscription->details)
                <p><strong>{{ __('subscriptions.order_details') }}:</strong> {{ $subscription->details }}</p>
                @endif
            </div>
        </div>

        <table class="invoice-table">
            <thead>
                <tr>
                    <th style="width: 40%">{{ __('subscriptions.service_details') }}</th>
                    <th style="width: 15%">{{ __('subscriptions.quantity') }}</th>
                    <th style="width: 20%">{{ __('subscriptions.price') }}</th>
                    <th style="width: 25%">{{ __('subscriptions.total_price') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($subscription->items as $item)
                <tr>
                    <td>{{ $item->service_detail }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>{{ number_format($item->unit_price, 0) }}</td>
                    <td>{{ number_format($item->subtotal, 0) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align: right; font-weight: bold;">{{ __('subscriptions.total') }}</td>
                    <td style="font-weight: bold;">{{ number_format($subscription->items->sum('subtotal'), 0) }}</td>
                </tr>
            </tfoot>
        </table>

        <div class="total-section">
            <div class="total-box">
                <div class="total-row">
                    <span>{{ __('subscriptions.total_price') }}</span>
                    <span>{{ number_format($subscription->price, 0) }}</span>
                </div>
                @if($subscription->discount > 0)
                <div class="total-row text-danger">
                    <span>{{ __('subscriptions.discount') }}</span>
                    <span>-{{ number_format($subscription->discount, 0) }}</span>
                </div>
                @endif
                <div class="total-row final">
                    <span>{{ __('subscriptions.net_total') }}</span>
                    <span>{{ number_format($subscription->price - $subscription->discount, 0) }}</span>
                </div>
                <div class="total-row text-success">
                    <span>{{ __('subscriptions.paid') }}</span>
                    <span>{{ number_format($subscription->paid_amount, 0) }}</span>
                </div>
                <div class="total-row text-danger">
                    <span>{{ __('subscriptions.remaining') }}</span>
                    <span>{{ number_format($subscription->remaining_amount, 0) }}</span>
                </div>
            </div>
        </div>
        
        @if($subscription->payments->count() > 0)
        <div class="mt-4 payment-details-spacer">
            <h5>{{ __('subscriptions.payment_history') }}</h5>
            <table class="table table-sm table-borderless" style="width: auto;">
                <thead>
                    <tr>
                        <th class="ps-0">{{ __('common.date') }}</th>
                        <th>{{ __('subscriptions.amount') }}</th>
                        <th>{{ __('subscriptions.payment_method') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($subscription->payments as $payment)
                    <tr>
                        <td class="ps-0">{{ $payment->created_at->format('Y-m-d') }}</td>
                        <td>{{ number_format($payment->amount, 0) }}</td>
                        <td>{{ __('subscriptions.payment_methods.' . $payment->payment_method) ?? $payment->payment_method }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        <div class="barcode-section">
            <div class="barcode-svg">
                {!! $barcode !!}
            </div>
            <div>{{ $subscription->invoice_number }}</div>
        </div>
    </div>

    <div class="print-btn-container">
        <button onclick="window.print()" class="btn-print">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/>
                <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
            </svg>
            {{ __('subscriptions.print_invoice') }}
        </button>
    </div>
</body>
</html>
