<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vehicle Inspection Report</title>
    
    <style>
        @media print {
            @page { 
                margin: 0.5in; 
                size: A4; 
            }
            body { 
                -webkit-print-color-adjust: exact;
                margin: 0;
                padding: 20px;
                font-size: 12px;
            }
            .no-print { display: none !important; }
            .page-break { page-break-before: always; }
            table { page-break-inside: avoid; }
            .avoid-break { page-break-inside: avoid; }
        }
        
        @media screen {
            body { 
                background-color: #f5f5f5;
                padding: 20px;
            }
            .print-container {
                background: white;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                margin: 0 auto;
                padding: 40px;
                max-width: 210mm; /* A4 width */
                min-height: 297mm; /* A4 height */
            }
        }
        
        .print-header {
            text-align: center;
            border-bottom: 3px solid #333;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .info-section {
            border: 1px solid #ddd;
            padding: 12px;
            border-radius: 5px;
        }
        
        .info-section h3 {
            margin: 0 0 12px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            padding: 3px 0;
            font-size: 11px;
        }
        
        .info-row:not(:last-child) {
            border-bottom: 1px dotted #ddd;
        }
        
        .label {
            font-weight: 600;
            color: #555;
        }
        
        .value {
            color: #333;
        }
        
        .checklist-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
            align-items: start;
        }
        
        .checklist-section {
            border: 1px solid #ddd;
            padding: 12px;
            border-radius: 5px;
            break-inside: avoid;
        }
        }
        
        .checklist-section h4 {
            margin: 0 0 12px 0;
            font-size: 13px;
            font-weight: bold;
            color: #333;
            background: #f8f9fa;
            padding: 6px;
            border-radius: 3px;
            text-align: center;
        }
        
        .checklist-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 0;
            border-bottom: 1px dotted #eee;
            font-size: 10px;
        }
        
        .checklist-item:last-child {
            border-bottom: none;
        }
        
        .checklist-item span:first-child {
            flex: 1;
            margin-right: 8px;
        }
        
        .status-badge {
            padding: 1px 6px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: bold;
            white-space: nowrap;
            min-width: 35px;
            text-align: center;
        }
        
        .status-pass { background: #d4edda; color: #155724; }
        .status-fail { background: #f8d7da; color: #721c24; }
        .status-na { background: #e2e3e5; color: #6c757d; }
        .status-good { background: #d4edda; color: #155724; }
        .status-poor { background: #f8d7da; color: #721c24; }
        .status-fair { background: #fff3cd; color: #856404; }
        
        .notes-section {
            margin-top: 30px;
            page-break-inside: avoid;
        }
        
        .note-box {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        
        .note-box h5 {
            margin: 0 0 10px 0;
            font-size: 13px;
            font-weight: bold;
        }
        
        .damage-report {
            margin-top: 30px;
            page-break-inside: avoid;
        }
        
        .damage-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }
        
        .damage-item {
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
        }
        
        .print-actions {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="print-actions no-print">
        <button onclick="window.print()" style="background: #2563eb; color: white; padding: 8px 16px; border: none; border-radius: 4px; margin-right: 8px; cursor: pointer;">
            🖨️ Print
        </button>
        <button onclick="window.close()" style="background: #6b7280; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
            ✕ Close
        </button>
    </div>
    
    <div class="print-container">
        {{ $slot }}
    </div>
</body>
</html>
