@extends('user::layouts.master')
@section('breadcrumb_title', trans('backend::translate.Invoice'))

@push('styles')
    <style>
        table .bg-main {
            --tw-bg-opacity: 1;
            background-color: rgb(31 97 236 / var(--tw-bg-opacity, 1));
        }
    </style>
@endpush

@section('content')
    <div class="max-w-[1062px] mx-auto w-full p-3 md:p-10 rounded bg-white">
        <!-- Download Buttons -->
        <div class="flex justify-end gap-3 mb-6 print:hidden">
            <a href="{{ route('user.orders.invoice.download', $order->id) }}" class="btn btn-primary">
                <i class="fas fa-download mr-2"></i>Download PDF
            </a>
            <button onclick="window.print()" class="btn btn-primary btn-black">
                <i class="fas fa-print mr-2"></i>Print
            </button>
        </div>

        <div class="flex justify-between items-start gap-4 flex-col-reverse sm:flex-row">
            <div class="">
                <h1 class="font-bold mb-1">Invoice</h1>
                <table class="w-full sm:max-w-1/2">
                    <tbody>
                        <tr class="hover:bg-transparent">
                            <td class="py-1 text-16 text-paragraph sm:min-w-[220px]">Invoice ID</td>
                            <td class="py-1 text-16 text-headline font-medium">
                                #{{ $order->order_number }}
                            </td>
                        </tr>
                        <tr class="hover:bg-transparent">
                            <td class="py-1 text-16 text-paragraph">Date</td>
                            <td class="py-1 text-16 text-headline font-medium">
                                {{ $order->created_at->format('d/m/Y') }}
                            </td>
                        </tr>
                        @if ($order->paid_at)
                            <tr class="hover:bg-transparent">
                                <td class="py-1 text-16 text-paragraph">Paid Date</td>
                                <td class="py-1 text-16 text-headline font-medium">
                                    {{ $order->paid_at->format('d/m/Y') }}
                                </td>
                            </tr>
                        @endif
                        <tr class="hover:bg-transparent">
                            <td class="py-1 text-16 text-paragraph">Status</td>
                            <td class="py-1 text-16 text-headline font-medium">
                                <span
                                    class="px-2 py-1 rounded text-sm
                                    @if ($order->payment_status === 'paid') bg-green-100 text-green-800
                                    @elseif($order->payment_status === 'pending') bg-yellow-100 text-yellow-800
                                    @elseif($order->payment_status === 'failed') bg-red-100 text-red-800
                                    @else bg-gray-100 text-gray-800 @endif">
                                    {{ ucfirst($order->payment_status) }}
                                </span>
                            </td>
                        </tr>
                        <tr class="hover:bg-transparent">
                            <td class="py-1 text-16 text-paragraph">Payment Method</td>
                            <td class="py-1 text-16 text-headline font-medium">
                                {{ $order->payment_method ? ucfirst($order->payment_method) : 'N/A' }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- logo section start  -->
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-2.5">
                    <div class="max-w-[250px]">
                        <img src="{{ siteLogo() }}" />
                    </div>
                </div>
            </div>
        </div>

        <!-- Billing Address -->
        <div class="w-full p-6 rounded-lg bg-gray mt-10">
            <h3 class="font-normal text-main mb-2">Billed To</h3>
            <h2 class="font-bold text-headline mb-1">{{ $order->user->name }}</h2>
            <h3 class="font-normal text-paragraph mb-1">

                @if ( isset($order->billing_address['address']) && $order->billing_address['address'])
                    {{ $order->billing_address['address'] ?? '' }},
                @endif

                @if ( isset($order->billing_address['city']) && $order->billing_address['city'])
                    {{ $order->billing_address['city'] ?? '' }},
                @endif

                @if ( isset($order->billing_address['state']) && $order->billing_address['state'])
                    {{ $order->billing_address['state'] ?? '' }},
                @endif

                @if ( isset($order->billing_address['country']) && $order->billing_address['country'])
                    {{ $order->billing_address['country'] ?? '' }} -
                @endif

                @if ( isset($order->billing_address['zip_code']) && $order->billing_address['zip_code'])
                    {{ $order->billing_address['zip_code'] ?? '' }}
                @endif

            </h3>
            <div class="flex gap-3 mb-1">
                <h3 class="font-normal text-paragraph">Email</h3>
                <h3 class="font-normal text-headline">{{ $order->user->email }}</h3>
            </div>
            @if (isset($order->billing_address['phone']))
                <div class="flex gap-3 mb-1">
                    <h3 class="font-normal text-paragraph">Phone</h3>
                    <h3 class="font-normal text-headline">{{ $order->billing_address['phone'] }}</h3>
                </div>
            @endif
        </div>

        @if (!$order->same_as_billing && $order->shipping_address)
            <!-- Shipping Address -->
            <div class="w-full p-6 rounded-lg bg-gray mt-6">
                <h3 class="font-normal text-main mb-2">Shipped To</h3>
                <h2 class="font-bold text-headline mb-1">{{ $order->shipping_address['name'] ?? $order->user->name }}</h2>
                <h3 class="font-normal text-paragraph mb-1">

                    @if ( isset($order->shipping_address['address']) && $order->shipping_address['address'])
                        {{ $order->shipping_address['address'] ?? '' }},
                    @endif

                    @if ( isset($order->shipping_address['city']) && $order->shipping_address['city'])
                        {{ $order->shipping_address['city'] ?? '' }},
                    @endif

                    @if ( isset($order->shipping_address['state']) && $order->shipping_address['state'])
                        {{ $order->shipping_address['state'] ?? '' }},
                    @endif

                    @if ( isset($order->shipping_address['country']) && $order->shipping_address['country'])
                        {{ $order->shipping_address['country'] ?? '' }} -
                    @endif

                    @if ( isset($order->shipping_address['zip_code']) && $order->shipping_address['zip_code'])
                        {{ $order->shipping_address['zip_code'] ?? '' }}
                    @endif
                </h3>
                @if (isset($order->shipping_address['phone']))
                    <div class="flex gap-3 mb-1">
                        <h3 class="font-normal text-paragraph">Phone</h3>
                        <h3 class="font-normal text-headline">{{ $order->shipping_address['phone'] }}</h3>
                    </div>
                @endif
            </div>
        @endif

        <!-- Order Items Table -->
        <div class="w-full mt-10 rounded-t-xl border border-border overflow-hidden overflow-x-auto">
            <table class="overflow-hidden w-full">
                <thead class="">
                    <tr class="bg-main">
                        <th class="text-left text-16 text-white font-medium py-2 px-5 min-w-[200px] bg-main">
                            Product Name
                        </th>
                        <th class="text-left text-16 text-white px-5 font-medium py-2 bg-main">
                            Qty
                        </th>
                        <th class="text-left text-16 text-white px-5 font-medium py-2 bg-main">
                            Price
                        </th>
                        <th class="text-right text-16 text-white px-5 font-medium py-2 bg-main">
                            Total
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    @foreach ($order->orderItems as $item)
                        <tr>
                            <td class="text-left text-16 text-paragraph">
                                <div class="p-2 max-w-[500px]">
                                    <h3 class="font-semibold mb-1">{{ $item->product_name }}</h3>
                                    @if ($item->product_sku)
                                        <p class="text-sm text-gray-500 mb-1">SKU: {{ $item->product_sku }}</p>
                                    @endif
                                    @if ($item->product_description)
                                        <p class="text-sm">{{ $item->product_description }}</p>
                                    @endif
                                    @if ($item->product_options)
                                        <div class="mt-2 text-sm text-gray-600">
                                            @foreach ($item->product_options as $key => $value)
                                                <span class="inline-block mr-3">
                                                    <strong>{{ ucfirst($key) }}:</strong> {{ $value }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </td>
                            <td class="text-left text-16 text-paragraph">
                                <div class="min-h-full flex items-start p-2">
                                    <h3>{{ $item->quantity }}</h3>
                                </div>
                            </td>
                            <td class="text-left text-16 text-paragraph">
                                <div class="min-h-full flex items-start p-2">
                                    <h3>{{ $order->currency }}{{ number_format($item->final_price, 2) }}</h3>
                                </div>
                            </td>
                            <td class="text-left text-16 text-paragraph">
                                <div class="min-h-full flex items-start justify-end p-2">
                                    <h3 class="text-right">
                                        {{ $order->currency }}{{ number_format($item->total_price, 2) }}</h3>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Totals -->
        <div class="total mt-6">
            <div class="flex justify-between py-1">
                <h3 class="text-paragraph font-medium">Sub Total</h3>
                <h3 class="text-headline font-medium">{{ $order->currency }}{{ number_format($order->subtotal, 2) }}</h3>
            </div>
            @if ($order->discount_amount > 0)
                <div class="flex justify-between py-1">
                    <h3 class="text-paragraph font-medium">Discount ({{ $order->discount_percentage }}%)</h3>
                    <h3 class="text-headline font-medium">
                        -{{ $order->currency }}{{ number_format($order->discount_amount, 2) }}</h3>
                </div>
            @endif
            @if ($order->tax_amount > 0)
                <div class="flex justify-between py-1">
                    <h3 class="text-paragraph font-medium">VAT ({{ $order->tax_percentage }}%)</h3>
                    <h3 class="text-headline font-medium">{{ $order->currency }}{{ number_format($order->tax_amount, 2) }}
                    </h3>
                </div>
            @endif
            @if ($order->shipping_amount > 0)
                <div class="flex justify-between py-1">
                    <h3 class="text-paragraph font-medium">Shipping</h3>
                    <h3 class="text-headline font-medium">
                        {{ $order->currency }}{{ number_format($order->shipping_amount, 2) }}</h3>
                </div>
            @endif
            <div class="flex justify-between py-3 mt-2 border-y border-border">
                <h1 class="text-headline font-medium text-xl">Total</h1>
                <h1 class="text-headline font-medium text-xl">
                    {{ $order->currency }}{{ number_format($order->total_amount, 2) }}</h1>
            </div>
        </div>

        @if ($order->notes)
            <!-- Notes -->
            <div class="mt-8 p-4 bg-gray-50 rounded">
                <h3 class="font-semibold text-headline mb-2">Notes</h3>
                <p class="text-paragraph">{{ $order->notes }}</p>
            </div>
        @endif
    </div>

    <style>
        @media print {
            .print\:hidden {
                display: none !important;
            }

            body {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
        }
    </style>
@endsection