<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Delivery Challan - {{ $challan->challan_no }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        @media print {
            @page { margin: 12mm; size: A4 portrait; }
            .no-print { display: none !important; }
            body { background: white !important; }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="no-print fixed top-0 left-0 right-0 z-50 bg-white border-b shadow-md px-4 py-3 flex items-center justify-between">
        <span class="text-sm font-semibold text-slate-600">Challan Print Preview</span>
        <div class="flex gap-2">
            <button onclick="window.print()" class="px-4 py-2 bg-primary-600 text-white text-sm font-semibold rounded-lg hover:bg-primary-700">🖨️ Print</button>
            <button onclick="window.close()" class="px-4 py-2 border border-slate-300 text-sm rounded-lg hover:bg-slate-50">Close</button>
        </div>
    </div>

    <div class="max-w-[210mm] mx-auto bg-white min-h-screen px-8 pt-20 pb-8 print:pt-0 shadow-lg">
        {{-- Header --}}
        <div class="border-b-2 border-primary-600 pb-4 mb-6 flex items-start justify-between">
            <div>
                <h1 class="text-3xl font-black text-slate-900 tracking-tight">{{ App\Models\CompanySetting::current()->company_name ?? 'ABC YARN HOUSE' }}</h1>
                <p class="text-xs text-slate-400 mt-1">{{ App\Models\CompanySetting::current()->address ?? '' }} | {{ App\Models\CompanySetting::current()->phone ?? '' }}</p>
            </div>
            <div class="text-right">
                <h2 class="text-xl font-bold text-primary-700">DELIVERY CHALLAN</h2>
                <p class="text-xs text-slate-500 mt-1">#{{ $challan->challan_no }}</p>
            </div>
        </div>

        {{-- Info Grid --}}
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="border border-slate-200 rounded-lg p-4">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Customer</p>
                <p class="font-bold text-slate-900">{{ $challan->party->name ?? '—' }}</p>
                <p class="text-xs text-slate-500">{{ $challan->party->phone ?? '' }}</p>
                <p class="text-xs text-slate-500">{{ $challan->party->address ?? '' }}</p>
            </div>
            <div class="border border-slate-200 rounded-lg p-4">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Challan Date</p>
                        <p class="text-sm font-semibold">{{ $challan->challan_date->format('d M, Y') }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Status</p>
                        <p class="text-sm font-semibold text-emerald-600">{{ ucfirst(str_replace('_', ' ', $challan->status)) }}</p>
                    </div>
                    @if($challan->delivery_date)
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Delivery Date</p>
                        <p class="text-sm font-semibold">{{ $challan->delivery_date->format('d M, Y') }}</p>
                    </div>
                    @endif
                    @if($challan->sale_id)
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500">Sale Ref</p>
                        <p class="text-sm font-semibold">{{ $challan->sale->voucher_no ?? '—' }}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Transport Info --}}
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="border border-slate-200 rounded-lg p-4">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Vehicle Details</p>
                <div class="text-sm space-y-1">
                    <p><span class="text-slate-500">Vehicle No:</span> <span class="font-semibold">{{ $challan->vehicle_no ?? '—' }}</span></p>
                    <p><span class="text-slate-500">Transport:</span> <span class="font-semibold">{{ $challan->transport ?? '—' }}</span></p>
                </div>
            </div>
            <div class="border border-slate-200 rounded-lg p-4">
                <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Driver Details</p>
                <div class="text-sm space-y-1">
                    <p><span class="text-slate-500">Driver:</span> <span class="font-semibold">{{ $challan->driver_name ?? '—' }}</span></p>
                    <p><span class="text-slate-500">Phone:</span> <span class="font-semibold">{{ $challan->driver_phone ?? '—' }}</span></p>
                </div>
            </div>
        </div>

        {{-- Remarks --}}
        @if($challan->remarks)
        <div class="mb-6 border border-slate-200 rounded-lg p-4">
            <p class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Remarks</p>
            <p class="text-sm text-slate-600">{{ $challan->remarks }}</p>
        </div>
        @endif

        {{-- Signatures --}}
        <div class="mt-12 grid grid-cols-3 gap-8">
            <div class="text-center">
                <div class="border-t border-slate-300 pt-2 mt-20">
                    <p class="text-sm font-semibold text-slate-700">Prepared By</p>
                </div>
            </div>
            <div class="text-center">
                <div class="border-t border-slate-300 pt-2 mt-20">
                    <p class="text-sm font-semibold text-slate-700">Driver Signature</p>
                </div>
            </div>
            <div class="text-center">
                <div class="border-t border-slate-300 pt-2 mt-20">
                    <p class="text-sm font-semibold text-slate-700">Receiver Signature</p>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="mt-8 border-t border-slate-200 pt-4 text-center text-xs text-slate-400">
            <p>This is a computer-generated challan. No signature required.</p>
            <p class="mt-1">© {{ date('Y') }} {{ App\Models\CompanySetting::current()->company_name ?? 'ABC YARN HOUSE' }}</p>
        </div>
    </div>

    <script>
        window.onload = function() {};
    </script>
</body>
</html>
