<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vehicle Inspection Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div id="inspection-document" class="hidden">
        <div class="document-content">
            <div class="watermark"></div>
            
            <div class="header">
                <div class="logo-container">
                    <div class="logo-image"></div>
                    <div class="logo-text">
                        <h1>STATE OF SAN ANDREAS</h1>
                        <h2>DEPARTMENT OF MOTOR VEHICLES</h2>
                        <h3>OFFICIAL VEHICLE INSPECTION CERTIFICATE</h3>
                    </div>
                </div>
                <div class="document-number">No. SA-<span id="doc-number"></span></div>
            </div>
            
            <div class="info-section">
                <div class="info-grid">
                    <div class="info-column">
                        <div class="info-group">
                            <label>Inspection Date:</label>
                            <span id="current-date"></span>
                        </div>
                        <div class="info-group">
                            <label>Time:</label>
                            <span id="current-time"></span>
                        </div>
                        <div class="info-group">
                            <label>Inspector ID:</label>
                            <span>LSM-<span id="inspector-id"></span></span>
                        </div>
                        <div class="info-group">
                            <label>Station:</label>
                            <span>Los Santos Central</span>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-group">
                            <label>Vehicle Make:</label>
                            <span id="vehicle-make"></span>
                        </div>
                        <div class="info-group">
                            <label>Model:</label>
                            <span id="vehicle-model"></span>
                        </div>
                        <div class="info-group">
                            <label>Plate:</label>
                            <span id="vehicle-plate"></span>
                        </div>
                        <div class="info-group">
                            <label>VIN:</label>
                            <span id="vehicle-vin"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inspection-checklist">
                <h4>INSPECTION CHECKLIST</h4>
                <div class="checklist-grid">
                    <div class="checklist-item">
                        <span class="check-icon" id="brake-system">✓</span>
                        <span>Braking System</span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="steering-suspension">✓</span>
                        <span>Steering & Suspension</span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="lighting-equipment">✓</span>
                        <span>Lighting Equipment</span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="tires-wheels">✓</span>
                        <span>Tires & Wheels</span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="exhaust-system">✓</span>
                        <span>Exhaust System</span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="emissions-test">✓</span>
                        <span>Emissions Test</span>
                    </div>
                </div>
            </div>

            <div class="result-section">
                <div id="passed-content" class="hidden">
                    <h2 class="passed">INSPECTION PASSED</h2>
                    <p>This vehicle has been thoroughly inspected and meets or exceeds all required safety and emissions standards set forth by the San Andreas Department of Motor Vehicles.</p>
                    <div class="stamp passed-stamp">APPROVED</div>
                </div>
                
                <div id="failed-content" class="hidden">
                    <h2 class="failed">INSPECTION FAILED</h2>
                    <p>This vehicle has failed to meet the minimum required standards for operation on public roads. Repairs must be completed and the vehicle must be re-inspected.</p>
                    <div class="stamp failed-stamp">REJECTED</div>
                    <div class="failure-notes">
                        <h4>NOTED DEFICIENCIES:</h4>
                        <ul id="failure-list"></ul>
                    </div>
                </div>
            </div>

            <div class="footer">
                <div class="footer-text">
                    <p>This document is official and valid for <span id="valid-days"></span> days from the date of inspection when APPROVED.</p>
                    <p>State of San Andreas - Department of Motor Vehicles - Vehicle Safety Division</p>
                </div>
                <div class="barcode">
                    <div class="barcode-lines"></div>
                    <span class="barcode-number" id="barcode-number"></span>
                </div>
                <button id="close-button">Close Document</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>