frappe.pages["load-detail"].on_page_load = function(wrapper) {
    var page = frappe.ui.make_app_page({
        parent: wrapper,
        title: "Load Detail",
        single_column: true
    });
    var loadName = frappe.utils.get_url_arg("load");
    if (!loadName) {
        $(page.body).html("<div style='padding:40px;text-align:center;'><h2>No load specified</h2><p>Use ?load=MMDDYYYY-XXXX</p></div>");
        return;
    }
    frappe.call({
        method: "frappe.client.get",
        args: { doctype: "Load", name: loadName },
        callback: function(r) {
            if (r.message) { showLoad(page, r.message); }
            else { $(page.body).html("<div style='padding:40px;text-align:center;'><h2>Load not found</h2></div>"); }
        }
    });
    function showLoad(page, load) {
        var h = "<div style='padding:20px;'>";
        h += "<h2>Load: " + load.name + "</h2>";
        h += "<p>Date: " + (load.incoming_date || "N/A") + " | Customer: " + (load.customer_name || load.customer_number || "N/A") + "</p>";
        h += "<p>Total Devices: " + (load.total_devices || 0) + "</p>";
        h += "<table style='width:100%;border-collapse:collapse;margin-top:20px;'><tr style='background:#37474f;color:white;'><th>Material Type</th><th>Count</th><th>Status</th><th>Send To</th></tr>";
        if (load.material_items && load.material_items.length > 0) {
            load.material_items.forEach(function(item) {
                h += "<tr style='border-bottom:1px solid #e0e0e0;'>";
                h += "<td><strong>" + (item.material_type || "") + "</strong></td>";
                h += "<td style='text-align:right;'>" + (item.total_count || "") + "</td>";
                h += "<td>" + (item.initial_data_status || "") + "</td>";
                h += "<td>" + (item.send_to || "") + "</td></tr>";
            });
        }
        h += "</table></div>";
        $(page.body).html(h);
    }
};