@extends('layouts.app')

@section('content')
    <div class="container mx-auto my-20">
        <div class="bg-white p-6 shadow-md rounded-lg" id="invoice">

            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="w-full md:w-1/2">
                    <!-- Company logo -->
                    <img src="{{ asset($helper->logo()) }}" alt="company-logo" class="h-24 w-24 object-contain">
                </div>
                <div class="w-full md:w-1/2 text-right">
                    <p class="font-bold">{{ config('app.name') }}</p>
                    <p class="text-gray-500">{{ $helper->companyEmail() }}</p>
                    <p class="text-gray-500 mt-1">{{ $helper->companyNumber() }}</p>
                </div>
            </div>

            <!-- Client info -->
            <div class="flex flex-col md:flex-row justify-between mt-8">
                <div class="w-full md:w-1/2">
                    <p class="font-bold text-gray-800">Bill to :</p>
                    <p class="text-gray-500 mb-1">
                        {{ ucwords($order->name) }},
                        <br />
                        {{ $order->address }}, {{$order->city}}, {{$order->state}}, {{$order->country}}
                    </p>
                    <p class="text-gray-500">
                        <a href="mailto:{{ $order->email }}" class="text-blue-600 hover:text-blue-800">{{ $order->email }}</a>
                    </p>
                </div>
                <div class="w-full md:w-1/2 text-right">
                    <p class="mb-1">
                        <strong>Invoice number:</strong> <span class="text-gray-500">{{ $order->invoice }}</span>
                    </p>
                    <p>
                        <strong>Invoice date:</strong> <span class="text-gray-500">{{ $order->created_at->format('d F, Y') }}</span>
                    </p>
                </div>
            </div>

            <!-- Invoice Items -->
            <div class="overflow-x-auto mt-8">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Chat</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($order->order_products as $item)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-start space-x-4">
                                        <div class="flex-shrink-0">
                                            <img src="{{ asset($item->product->image) }}" alt="product-image" class="h-20 w-20 rounded-md object-cover border border-gray-200">
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900">{{ $item->product->name }}</div>
                                            <div class="text-gray-500 text-sm mt-1">
                                                @php $qty = 0; @endphp
                                                @foreach (json_decode($item->variation) as $key => $value)
                                                    @php $qty += $value->qty; @endphp
                                                    <p class="mb-0">{{ $value->name }} - ${{ $value->price }} × {{ $value->qty }} = ${{ $value->price * $value->qty }}</p>
                                                @endforeach
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mt-1">{{ $item->product->category->name }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">{{ $qty }} units</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">${{ $item->price }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500">
                                    
                                    <a href="{{ route('chat.index', $item->product->user_id) }}" class="inline-flex items-center justify-center p-2 rounded-full bg-green-100 text-green-600 hover:bg-green-200 transition duration-150 ease-in-out">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/></svg>
                                        <span class="ml-1">Chat with Vendor</span>
                                    </a>

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-500">Subtotal</th>
                            <td class="px-6 py-3 text-right text-sm text-gray-500">${{ $order->order_total }}</td>
                        </tr>
                         <tr>
                            <th colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-500">Tax</th>
                            <td class="px-6 py-3 text-right text-sm text-gray-500">{{ $order->tax }}%</td>
                        </tr>
                        <tr>
                            <th colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-500">Shipping</th>
                            <td class="px-6 py-3 text-right text-sm text-gray-500">
                                {{ $order->shipping == 0 ? 'Free' : '$'.$order->shipping }}
                            </td>
                        </tr>
                        {{-- <tr>
                            <th colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-500">Discount</th>
                            <td class="px-6 py-3 text-right text-sm text-gray-500">-10%</td>
                        </tr> --}}
                        <tr>
                            <th colspan="3" class="px-6 py-3 text-right text-sm font-bold text-gray-900">Total</th>
                            <td class="px-6 py-3 text-right text-sm font-bold text-gray-900">${{ $order->amount }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Footer -->
            <div class="border-t border-gray-200 pt-6 text-center text-gray-500 text-sm mt-10">
                Please pay the invoice before the due date. You can pay the invoice by logging in to your account from our client portal.
            </div>

        </div>
    </div>
@endsection