<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Special Handling Log - {{ load.name }}</title>
    <style>
        @page { size: letter; margin: 0.5in; }
        body { font-family: Arial, sans-serif; font-size: 10pt; }
        .header { border: 2px solid #000; padding: 10px; margin-bottom: 15px; }
        .title { font-size: 18pt; font-weight: bold; text-align: center; margin-bottom: 5px; }
        .subtitle { font-size: 12pt; text-align: center; margin-bottom: 10px; }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
        .info-field { }
        .info-label { font-weight: bold; display: inline-block; width: 80px; }
        .info-value { border-bottom: 1px solid #000; display: inline-block; min-width: 200px; }
        .section { border: 1px solid #000; padding: 10px; margin: 10px 0; }
        .section-title { font-size: 11pt; font-weight: bold; background: #f0f0f0; padding: 5px; margin: -10px -10px 10px -10px; border-bottom: 1px solid #000; }
        table { width: 100%; border-collapse: collapse; margin: 10px 0; }
        th, td { border: 1px solid #000; padding: 6px; text-align: left; font-size: 9pt; }
        th { background: #f0f0f0; font-weight: bold; }
        .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; font-size: 9pt; }
        .pricing-item { margin: 3px 0; }
        .footer { margin-top: 20px; font-size: 8pt; text-align: center; border-top: 2px solid #000; padding-top: 10px; }
        .red-line { border: 2px solid #d63384; }
        .checkbox { display: inline-block; width: 14px; height: 14px; border: 1px solid #000; margin-right: 5px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="title">SPECIAL HANDLING LOG</div>
        <div class="subtitle">NIST Wipe for Hard Drives | COD Required (Include hard drive count)</div>
        
        <div class="info-grid">
            <div class="info-field">
                <span class="info-label">DATE:</span>
                <span class="info-value">{{ load.received_date or nowdate() }}</span>
            </div>
            <div class="info-field">
                <span class="info-label">TRUCK:</span>
                <span class="info-value">{{ load.truck or '____' }}</span>
            </div>
            <div class="info-field">
                <span class="info-label">DRIVER:</span>
                <span class="info-value">{{ load.driver or '________________' }}</span>
            </div>
            <div class="info-field">
                <span class="info-label">Service Level:</span>
                <span class="info-value" style="font-weight:bold; color:#d63384;">{{ load.service_level or '________' }}</span>
            </div>
        </div>
        
        <div class="info-grid">
            <div class="info-field" style="grid-column: span 2;">
                <span class="info-label">School/Customer:</span>
                <span class="info-value" style="min-width: 400px;">{{ load.customer_name or '________________________________' }}</span>
            </div>
            <div class="info-field" style="grid-column: span 2;">
                <span class="info-label">Address:</span>
                <span class="info-value" style="min-width: 400px;">{{ load.customer_address or '________________________________________' }}</span>
            </div>
            <div class="info-field">
                <span class="info-label">Contact:</span>
                <span class="info-value">{{ load.contact_name or '________________' }}</span>
            </div>
            <div class="info-field">
                <span class="info-label">Phone:</span>
                <span class="info-value">{{ load.contact_phone or '________________' }}</span>
            </div>
        </div>
        
        <div style="margin-top: 10px;">
            <div class="info-label">Pickup Instructions:</div>
            <div style="border: 1px solid #000; padding: 8px; min-height: 40px;">
                {{ load.pickup_instructions or '________________________________________________________________' }}
            </div>
        </div>
    </div>

    <div class="section red-line">
        <div class="section-title" style="background: #d63384; color: white;">RED LINE ENTRY ITEMS</div>
        <div class="pricing-grid">
            <div class="pricing-item"><b>Laptops</b> (Working): $40 each | (Non-working): $.15/lb</div>
            <div class="pricing-item"><b>Desktops</b> (Working): $10 each | (Non-working): $.15/lb</div>
            <div class="pricing-item"><b>Tablets</b> (Working): $3 each | (Non-working): $.15/lb</div>
            <div class="pricing-item"><b>Servers</b> (Working): $40 each | (Non-working): $.15/lb</div>
            <div class="pricing-item"><b>Main Frames</b> (Working): $75 each | (Non-working): $.15/lb</div>
            <div class="pricing-item"><b>High Grade</b>: Chromebooks, projectors, cell phones, switches ($.15/lb)</div>
            <div class="pricing-item"><b>Wire/Boards</b>: Power supplies, circuits, cameras ($.05/lb)</div>
            <div class="pricing-item"><b>No Value</b>: Printers, monitors, TVs, keyboards, mice, batteries ($.00/lb)</div>
        </div>
        <div style="margin-top: 10px; padding: 8px; border: 1px solid #d63384;">
            <b>Hard Drives:</b> Please give all PCs, Laptops, Servers, Loose Hard Drives to HDR<br>
            ☐ NIST Wipe (No charge) &nbsp;&nbsp;&nbsp; ☐ COD: Include Hard Drive Count
        </div>
    </div>

    <div class="section">
        <div class="section-title">Materials / Weight Tracking</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 35%;">MATERIAL</th>
                    <th style="width: 15%;">% OF MATERIAL</th>
                    <th style="width: 15%;">WEIGHT</th>
                    <th style="width: 15%;">SIGN OFF</th>
                    <th style="width: 20%;">DATE</th>
                </tr>
            </thead>
            <tbody>
                {% for item in load.items %}
                <tr>
                    <td>{{ item.material_type or '________________' }}</td>
                    <td>{{ item.percentage or '100%' }}</td>
                    <td>{{ item.weight or '____' }}</td>
                    <td>{{ item.sign_off or '____' }}</td>
                    <td>{{ item.date or '________' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                <tr><td colspan="5" style="height: 25px;"></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Hard Drive Tracking</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 20%;">Category</th>
                    <th style="width: 20%;">SCAN HARD DRIVES</th>
                    <th style="width: 20%;">LIST SENT?</th>
                    <th style="width: 20%;">SIGN OFF</th>
                    <th style="width: 20%;">DATE</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><b># OF PCs</b></td>
                    <td>{{ load.pc_count or '____' }}</td>
                    <td>☐</td>
                    <td>____</td>
                    <td>________</td>
                </tr>
                <tr>
                    <td><b># OF SERVERS</b></td>
                    <td>{{ load.server_count or '____' }}</td>
                    <td>☐</td>
                    <td>____</td>
                    <td>________</td>
                </tr>
                <tr>
                    <td><b># OF HARD DRIVES</b></td>
                    <td>{{ load.hd_count or '____' }}</td>
                    <td>☐</td>
                    <td>____</td>
                    <td>________</td>
                </tr>
                <tr>
                    <td><b># OF LAPTOPS</b></td>
                    <td>{{ load.laptop_count or '____' }}</td>
                    <td>☐</td>
                    <td>____</td>
                    <td>________</td>
                </tr>
                <tr>
                    <td><b>HARD DRIVES (loose)</b></td>
                    <td>{{ load.loose_hd_count or '____' }}</td>
                    <td>☐</td>
                    <td>____</td>
                    <td>________</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="footer">
        <strong>Westech Electronics</strong> | R2 Certified Recycling<br>
        Load: {{ load.name }} | Printed: {{ doc.modified }} | Page 1 of 1
    </div>
</body>
</html>
