@extends('layouts.finance.finance')
@section('content')

        <div id="po-print-area">

            {{-- Header --}}
            <div class="flex justify-between items-center mb-4 no-print">
                <a href="{{ route('finance.purchasesDetails') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    ← Back
                </a>

                <button onclick="window.print()"
                    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <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-2H5zm7 5H4V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3zM5 8h6a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" />
                    </svg>
                    Print PO
                </button>
            </div>

            <div class="text-center mb-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-1">MEKING STEEL PVT LTD</h2>
                <h5 class="text-base font-semibold text-gray-500">Purchase Order</h5>
            </div>

            {{-- Status --}}
            @php
    $badgeMap = [
        'pending' => 'bg-amber-100 text-amber-800',
        'accepted' => 'bg-green-100 text-green-800',
        'dispatched' => 'bg-blue-100 text-blue-800',
        'delivered' => 'bg-green-100 text-green-800',
        'completed' => 'bg-gray-200 text-gray-800',
        'cancelled' => 'bg-red-100 text-red-800',
    ];
    $statusClasses = $badgeMap[$order->status] ?? 'bg-amber-100 text-amber-800';
            @endphp

            <div class="flex justify-between items-center mb-4 no-print">
                <h5 class="text-base font-medium text-gray-800">
                    PO:
                    <span class="text-blue-600 font-bold">{{ $order->po_number }}</span>
                </h5>
                <span class="px-2.5 py-1 text-xs font-semibold rounded-full {{ $statusClasses }}">
                    {{ ucfirst($order->status) }}
                </span>
            </div>

            {{-- ORDER INFO --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 mb-6 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-sm font-semibold text-gray-700">Order Details</h3>
                </div>
                <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Vendor</div>
                        <div class="text-sm text-gray-900">{{ $order->vendor->user->name ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Company</div>
                        <div class="text-sm text-gray-900">{{ $order->vendor->company_name ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Project</div>
                        <div class="text-sm text-gray-900">{{ $order->project->title ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Delivery Date</div>
                        <div class="text-sm text-gray-900">
                            {{ $order->delivery_date ? \Carbon\Carbon::parse($order->delivery_date)->format('d M Y') : '—' }}
                        </div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Location</div>
                        <div class="text-sm text-gray-900">{{ $order->delivery_location ?? '—' }}</div>
                    </div>
                    <div class="md:col-span-3">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Notes</div>
                        <div class="text-sm text-gray-900">{{ $order->notes ?? '—' }}</div>
                    </div>
                </div>
            </div>

            {{-- ITEMS --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 mb-6 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-sm font-semibold text-gray-700">Items</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-center">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">ID</th>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">Material</th>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">Unit</th>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">Qty</th>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">Rate</th>
                                <th class="px-4 py-3 text-xs font-medium text-gray-500 uppercase">Total</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($order->items as $i => $item)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $i + 1 }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-900">{{ $item->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $item->unit ?? '-' }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">{{ $item->quantity }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-700">₹ {{ number_format($item->rate, 2) }}</td>
                                    <td class="px-4 py-3 text-sm font-medium text-gray-900">
                                        ₹ {{ number_format(($item->quantity ?? 0) * ($item->rate ?? 0), 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-4 py-4 text-sm text-gray-500">No items found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- TOTAL --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 mb-6 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-sm font-semibold text-gray-700">Summary</h3>
                </div>
                <div class="px-6 py-4">
                    <div class="flex justify-between border-b border-gray-100 py-2 text-sm text-gray-700">
                        <span>Subtotal</span>
                        <span>₹ {{ number_format($order->subtotal, 2) }}</span>
                    </div>
                    <div class="flex justify-between border-b border-gray-100 py-2 text-sm text-gray-700">
                        <span>GST ({{ $order->gst_percent }}%)</span>
                        <span>₹ {{ number_format($order->gst_amount, 2) }}</span>
                    </div>
                    <div class="flex justify-between py-2 font-bold text-gray-900">
                        <span>Total</span>
                        <span>₹ {{ number_format($order->total_amount, 2) }}</span>
                    </div>
                </div>
            </div>

            {{-- DISPATCH --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 mb-6 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-sm font-semibold text-gray-700">Dispatch</h3>
                </div>
                <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Tracking</div>
                        <div class="text-sm text-gray-900">{{ $order->tracking_number ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Courier</div>
                        <div class="text-sm text-gray-900">{{ $order->courier_name ?? '—' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Vehicle</div>
                        <div class="text-sm text-gray-900">{{ $order->vehicle_number ?? '—' }}</div>
                    </div>
                </div>
            </div>

            {{-- SIGN --}}
            <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200 text-center">
                    <tr>
                        <th class="py-10 px-4 text-sm font-medium text-gray-700 border-r border-gray-200">Prepared By</th>
                        <th class="py-10 px-4 text-sm font-medium text-gray-700 border-r border-gray-200">Authorized Signatory
                        </th>
                        <th class="py-10 px-4 text-sm font-medium text-gray-700">Vendor Signature</th>
                    </tr>
                </table>
            </div>

        </div>

        <style>
            @media print {

                /* Hide absolutely everything on the page by default */
                body * {
                    visibility: hidden;
                }

                /* Then reveal only the PO content and its children */
                #po-print-area,
                #po-print-area * {
                    visibility: visible;
                }

                /* Pull the PO content out of the sidebar/layout flow and pin it to the page */
                #po-print-area {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }

                /* Still hide buttons/links that shouldn't print even inside the visible area */
                .no-print {
                    display: none !important;
                }
            }
        </style>

@endsection