<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Purple Sheet - Load {{ doc.name }}</title>
    <style>
        @page { size: letter; margin: 0.5in; }
        body { font-family: Arial, sans-serif; font-size: 11pt; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .logo { max-width: 200px; }
        .title { font-size: 24pt; font-weight: bold; color: #6f42c1; }
        .subtitle { font-size: 14pt; color: #666; }
        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        th, td { border: 1px solid #000; padding: 8px; text-align: left; }
        th { background-color: #f0f0f0; font-weight: bold; }
        .section { margin: 20px 0; }
        .section-title { font-size: 14pt; font-weight: bold; background: #6f42c1; color: white; padding: 5px 10px; margin-bottom: 10px; }
        .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
        .info-field { border: 1px solid #ccc; padding: 8px; }
        .info-label { font-size: 9pt; color: #666; margin-bottom: 3px; }
        .info-value { font-size: 11pt; font-weight: bold; }
        .footer { margin-top: 30px; border-top: 2px solid #6f42c1; padding-top: 10px; font-size: 9pt; color: #666; }
        .service-level { font-size: 18pt; font-weight: bold; color: #d63384; text-transform: uppercase; }
        .checkbox { display: inline-block; width: 15px; height: 15px; border: 1px solid #000; margin-right: 5px; }
        .checked { background: #000; }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <div class="title">PURPLE SHEET</div>
            <div class="subtitle">Load Tracking Worksheet</div>
        </div>
        <div style="text-align: right;">
            <div><strong>Load #:</strong> {{ doc.name }}</div>
            <div><strong>Date:</strong> {{ doc.received_date or doc.modified }}</div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Customer Information</div>
        <div class="info-grid">
            <div class="info-field">
                <div class="info-label">Customer Name</div>
                <div class="info-value">{{ doc.customer_name or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Customer #</div>
                <div class="info-value">{{ doc.customer_number or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Service Level</div>
                <div class="info-value service-level">{{ doc.service_level or '________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Address</div>
                <div class="info-value">{{ doc.customer_address or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Contact</div>
                <div class="info-value">{{ doc.contact_name or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Phone</div>
                <div class="info-value">{{ doc.contact_phone or '________________' }}</div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Load Details</div>
        <div class="info-grid">
            <div class="info-field">
                <div class="info-label">Status</div>
                <div class="info-value">{{ doc.status or 'Received' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Data Status</div>
                <div class="info-value">{{ doc.data_status or 'D0' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Inbound Weight (lbs)</div>
                <div class="info-value">{{ doc.inbound_weight or '____' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Estimated Pallets</div>
                <div class="info-value">{{ doc.estimated_pallets or '____' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Actual Pallets</div>
                <div class="info-value">____</div>
            </div>
            <div class="info-field">
                <div class="info-label">Driver</div>
                <div class="info-value">________________</div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <span class="checkbox {% if doc.certificate %}checked{% endif %}"></span> COR/AoR Requested
        </div>
    </div>

    <div class="section">
        <div class="section-title">Material Breakdown</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 25%;">Material Type</th>
                    <th style="width: 15%;">Count</th>
                    <th style="width: 15%;">Weight (lbs)</th>
                    <th style="width: 15%;">Data Status</th>
                    <th style="width: 15%;">Send-To</th>
                    <th style="width: 15%;">Disposition</th>
                </tr>
            </thead>
            <tbody>
                {% for item in doc.items %}
                <tr>
                    <td>{{ item.material_type or '________________' }}</td>
                    <td>{{ item.count or '____' }}</td>
                    <td>{{ item.weight or '____' }}</td>
                    <td>{{ item.data_status or '____' }}</td>
                    <td>{{ item.send_to or '________________' }}</td>
                    <td>{{ item.disposition or '________________' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="6" style="height: 30px;"></td></tr>
                <tr><td colspan="6" style="height: 30px;"></td></tr>
                <tr><td colspan="6" style="height: 30px;"></td></tr>
                <tr><td colspan="6" style="height: 30px;"></td></tr>
                <tr><td colspan="6" style="height: 30px;"></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Pallet List</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 20%;">Pallet #</th>
                    <th style="width: 20%;">Status</th>
                    <th style="width: 20%;">Weight (lbs)</th>
                    <th style="width: 20%;">Data Status</th>
                    <th style="width: 20%;">Notes</th>
                </tr>
            </thead>
            <tbody>
                {% for pallet in doc.pallets %}
                <tr>
                    <td>{{ doc.pallet_number or '________________' }}</td>
                    <td>{{ doc.status or '________' }}</td>
                    <td>{{ doc.inbound_weight or '____' }}</td>
                    <td>{{ doc.data_status or '____' }}</td>
                    <td>{{ doc.notes or '________________' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="5" style="height: 30px;"></td></tr>
                <tr><td colspan="5" style="height: 30px;"></td></tr>
                <tr><td colspan="5" style="height: 30px;"></td></tr>
                <tr><td colspan="5" style="height: 30px;"></td></tr>
                <tr><td colspan="5" style="height: 30px;"></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="footer">
        <strong>Westech Electronics</strong> | R2 Certified Recycling | Phone: (555) 123-4567<br>
        Printed: {{ doc.modified }} | Page 1 of 1
    </div>
</body>
</html>
