<!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 id="state-name"></h1>
                        <h2 id="department-name"></h2>
                        <h3 id="document-title"></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 id="inspection-date-label"></label>
                            <span id="current-date"></span>
                        </div>
                        <div class="info-group">
                            <label id="inspection-time-label"></label>
                            <span id="current-time"></span>
                        </div>
                        <div class="info-group">
                            <label id="inspector-id-label"></label>
                            <span>LSM-<span id="inspector-id"></span></span>
                        </div>
                        <div class="info-group">
                            <label id="station-label"></label>
                            <span id="station-name"></span>
                        </div>
                    </div>
                    <div class="info-column">
                        <div class="info-group">
                            <label id="vehicle-make-label"></label>
                            <span id="vehicle-make"></span>
                        </div>
                        <div class="info-group">
                            <label id="vehicle-model-label"></label>
                            <span id="vehicle-model"></span>
                        </div>
                        <div class="info-group">
                            <label id="vehicle-plate-label"></label>
                            <span id="vehicle-plate"></span>
                        </div>
                        <div class="info-group">
                            <label id="vehicle-vin-label"></label>
                            <span id="vehicle-vin"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inspection-checklist">
                <h4 id="checklist-title"></h4>
                <div class="checklist-grid">
                    <div class="checklist-item">
                        <span class="check-icon" id="brake-system">✓</span>
                        <span id="brake-system-label"></span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="steering-suspension">✓</span>
                        <span id="steering-suspension-label"></span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="lighting-equipment">✓</span>
                        <span id="lighting-equipment-label"></span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="tires-wheels">✓</span>
                        <span id="tires-wheels-label"></span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="exhaust-system">✓</span>
                        <span id="exhaust-system-label"></span>
                    </div>
                    <div class="checklist-item">
                        <span class="check-icon" id="emissions-test">✓</span>
                        <span id="emissions-test-label"></span>
                    </div>
                </div>
            </div>

            <div class="result-section">
                <div id="passed-content" class="hidden">
                    <h2 class="passed" id="passed-title"></h2>
                    <p id="passed-description"></p>
                    <div class="stamp passed-stamp" id="passed-stamp"></div>
                </div>
                
                <div id="failed-content" class="hidden">
                    <h2 class="failed" id="failed-title"></h2>
                    <p id="failed-description"></p>
                    <div class="stamp failed-stamp" id="failed-stamp"></div>
                    <div class="failure-notes">
                        <h4 id="failure-notes-title"></h4>
                        <ul id="failure-list"></ul>
                    </div>
                </div>
            </div>

            <div class="footer">
                <div class="footer-text">
                    <p id="footer-text-1"></p>
                    <p id="footer-text-2"></p>
                </div>
                <div class="barcode">
                    <div class="barcode-lines"></div>
                    <span class="barcode-number" id="barcode-number"></span>
                </div>
                <button id="close-button"></button> <!-- Texto removido aqui -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>