{% extends "layout.html" %}
{% load app_filters %}
{% load humanize %}
{% load tz %}
{% block styles %}
    <style type="text/css">  
        @page {
            size: 8.5in 14in;
            margin: .2in 1in .2in .5in;
        } 
        .print-only{
            display: none;
        }
        @media screen {
            .p-soh {
                padding-left: 0px;
                margin-left: 10px;
            }
            .data-list {
                height: 600px;
                width:1130px;
                overflow-y: auto;
                overflow-x: hidden;
                padding-left: 15px;
            }
        }
        @media print {
            .no-print {
                display: none;
            }
            .print-only{
                display: block;
            }
        }
        @media print{
            .printfooter {
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            footer.footer {
                display: none;
            }
            .p-soh {
                padding-left: 1em;
                margin-left: 1em;
            }
            .breaker {
                page-break-after: always;
            }
        }
    </style>
{% endblock styles %}
{% block content %}
    
<div class="row no-print">
    <div class="col-1"><a href="{% url 'home' %}" class="btn btn-primary btn-sm" role="button" id="id_done_btn">Done</a></div>
    <div class="col-1"><button class="btn btn-primary btn-sm" onclick="window.print()">Print</button></div>
    {% if export_available %}
    <div class="col-2">
         <form class="export_excel" id="export_form" method="post" action="/reports/get_excel">
            {% csrf_token %}
             <input type="hidden" name="export_filename" id="id_export_filename" value="{{ export_filename }}" />
             <input type="hidden" name="export_report_name" id="id_export_report_name" value="{{ export_report_name }}" />
             <input type="hidden" name="export_initial_filters" id="id_export_initial_filters" value="{{ initial_filters }}" />
             <input type="hidden" name="export_filters" id="id_export_filters" />
             <input type="hidden" name="export_buildings" id="id_export_buildings" value="B1B2"/>
             <input type="hidden" name="export_username" id="id_export_username" value="{{ username }}" />
            <button class="btn btn-primary btn-sm" value="Export to Excel" type="submit">Export To Excel</button>
         </form>
    </div>
    {% endif %}
</div>
<div class="no-print">
<div class="row">
    <div class="col-2 text-left">
        {% timezone "America/Chicago" %}
        <div class="row">Issued: {% now "m/d/y" %}</div>
        {% endtimezone %}
    </div>
    <div class="col-2 text-left">
        {% timezone "America/Chicago" %}
        <div class="row">{% now "h:i:s A" %}</div>
        {% endtimezone %}
    </div>
    <div class="col-5 justify-content-center">
        <div><h4 class="text-center">{{ report_title }}</h4></div>
    </div>
    <div class="col-3 text-right">
        <div class="row">Page {{ page.page }} of {{ page_total }}</div>
        <div class="row text-center text-nowrap font-italic">Confidential Information</div>
    </div>    
</div>
<div class="row small text-nowrap">
    <div class="col-5 text-nowrap">
        <div class="row text-nowrap">
            <div class="col-2 mr-2">
                <div class="row font-weight-bolder">Job:</div>
                <div class="row font-weight-bolder">Line:</div>
                <div class="row font-weight-bolder">Customer:</div>
            </div>
            <div class="col-3">
                <div class="row">{{ job.job }}</div>
                <div class="row">{{ job.line }}</div>
                <div class="row">{{ job.customer }}</div>
            </div>
            <div class="col-3">
                <div class="row font-weight-bolder">Product:</div>
                <div class="row font-weight-bolder">Lot:</div>
                <div class="row font-weight-bolder">Qty Ordered:</div>
            </div>
            <div class="col-3">
                <div class="row">{{ job.product }}</div>
                <div class="row">{{ job.lot }}</div>
                <div class="row">{{ job.qty_ordered | floatformat:'0' | intcomma }}</div>
            </div>
        </div>
    </div>
    <div class="col-1">
        <div class="row mb-2">
            <div class="col text-right text-nowrap"><span class="font-weight-bolder">Ver: </span><span>{{ job.frm_ver }}</span></div>
        </div>
        <div class="row small text-right"><div class="col text-right p-0">DATE:</div></div>
        <div class="row small text-right text-nowrap"><div class="col text-right p-0">STAGED BY:</div></div>
        <div class="row small text-right text-nowrap"><div class="col text-right p-0">CHECKED BY:</div></div>
    </div>
    <div class="col mt-2">
        <div class="row">
            <div class="col-6 text-center">MATERIAL STAGING</div>
            <div class="col-3 text-center">DESTAGING</div>
            <div class="col-3 text-center">CONSUMPTION</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
    </div>
</div>
<div class="row small">
    <div class="col-6">
        <div class="row align-items-end">
            <div class="col-3 p-0">INGREDIENT</div>
            <div class="col-1 p-0">WT%</div>
            <div class="col-1 p-0">LBS REQ'D</div>
            <div class="col-2 p-0">RECEIVER</div>
            <div class="col-2 p-0">LOT</div>
            <div class="col-1 p-0 mr-4">PACKAGE</div>
            <div class="col-1 p-soh text-nowrap text-right">SYSTEM<br />ON HAND</div>
        </div>
    </div>
    <div class="col-6">
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">1st LBS<br />STAGED</div>
            <div class="col border-dark border-right pr-4">2nd LBS<br />STAGED</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL<br />STAGED</div>
            <div class="col border-dark border-right border-left pr-4">RETURN LOC-<br />#UNITS/LBS</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL<br />DESTAGED</div>
            <div class="col border-dark border-right border-left p-0 text-center">TOTAL LBS<br />CONSUMED</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL LBS<br />TOTALIZER</div>
        </div>
    </div>
</div>
</div>

<div class="data-list">
{% for page in page_list %}
<div class="print-only">
<div class="row">
    <div class="col-2 text-left">
        {% timezone "America/Chicago" %}
        <div class="row">Issued: {% now "m/d/y" %}</div>
        {% endtimezone %}
    </div>
    <div class="col-2 text-left">
        {% timezone "America/Chicago" %}
        <div class="row">{% now "h:i:s A" %}</div>
        {% endtimezone %}
    </div>
    <div class="col-5 justify-content-center">
        <div><h4 class="text-center">{{ report_title }}</h4></div>
    </div>
    <div class="col-3 text-right">
        <div class="row">Page {{ page.page }} of {{ page_total }}</div>
        <div class="row text-center text-nowrap font-italic">Confidential Information</div>
    </div>    
</div>
<div class="row small text-nowrap">
    <div class="col-5 text-nowrap">
        <div class="row text-nowrap">
            <div class="col-2 mr-2">
                <div class="row font-weight-bolder">Job:</div>
                <div class="row font-weight-bolder">Line:</div>
                <div class="row font-weight-bolder">Customer:</div>
            </div>
            <div class="col-3">
                <div class="row">{{ job.job }}</div>
                <div class="row">{{ job.line }}</div>
                <div class="row">{{ job.customer }}</div>
            </div>
            <div class="col-3">
                <div class="row font-weight-bolder">Product:</div>
                <div class="row font-weight-bolder">Lot:</div>
                <div class="row font-weight-bolder">Qty Ordered:</div>
            </div>
            <div class="col-3">
                <div class="row">{{ job.product }}</div>
                <div class="row">{{ job.lot }}</div>
                <div class="row">{{ job.qty_ordered | floatformat:'0' | intcomma  }}</div>
            </div>
        </div>
    </div>
    <div class="col-1">
        <div class="row mb-2">
            <div class="col text-right text-nowrap"><span class="font-weight-bolder">Ver: </span><span>{{ job.frm_ver }}</span></div>
        </div>
        <div class="row small text-right"><div class="col text-right p-0">DATE:</div></div>
        <div class="row small text-right text-nowrap"><div class="col text-right p-0">STAGED BY:</div></div>
        <div class="row small text-right text-nowrap"><div class="col text-right p-0">CHECKED BY:</div></div>
    </div>
    <div class="col mt-2">
        <div class="row">
            <div class="col-6 text-center">MATERIAL STAGING</div>
            <div class="col-3 text-center">DESTAGING</div>
            <div class="col-3 text-center">CONSUMPTION</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left pr-4">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
            <div class="col border-dark border-right border-left p-0">&nbsp;</div>
            <div class="col border-dark border-right p-0">&nbsp;</div>
        </div>
    </div>
</div>
<div class="row small">
    <div class="col-6">
        <div class="row align-items-end">
            <div class="col-3 p-0">INGREDIENT</div>
            <div class="col-1 p-0">WT%</div>
            <div class="col-1 p-0">LBS REQ'D</div>
            <div class="col-2 p-0">RECEIVER</div>
            <div class="col-2 p-0">LOT</div>
            <div class="col-1 p-0 mr-4">PACKAGE</div>
            <div class="col-1 p-soh text-nowrap text-right">SYSTEM<br />ON HAND</div>
        </div>
    </div>
    <div class="col-6">
        <div class="row border-dark border-top border-left border-right small">
            <div class="col border-dark border-right border-left pr-4">1st LBS<br />STAGED</div>
            <div class="col border-dark border-right pr-4">2nd LBS<br />STAGED</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL<br />STAGED</div>
            <div class="col border-dark border-right border-left pr-4">RETURN LOC-<br />#UNITS/LBS</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL<br />DESTAGED</div>
            <div class="col border-dark border-right border-left p-0 text-center">TOTAL LBS<br />CONSUMED</div>
            <div class="col border-dark border-right p-0 text-center">TOTAL LBS<br />TOTALIZER</div>
        </div>
    </div>
</div>
</div>
{% for record in page.page_records %}
<div class="row small{% ifchanged record.item.name %} mt-1 border-dark border-top{% endifchanged %}">
    <div class="col-6">
        <div class="row">
            <div class="col-3 border-dark border-left border-right border-bottom">
                <div class="row p-0" title="{{ record.item.name }}">{% ifchanged record.item.name %}{{ record.item.name | truncatechars:17 }}{% else %}&nbsp;{% endifchanged %}</div>
                <div class="row">
                    <div class="col p-0">{% if record.receiver.cofa_mfr %}CofAMFR:{% else %}&nbsp;{% endif %}</div>
                    <div class="col p-0">{% if record.receiver.cofa_mfr %}{{ record.receiver.cofa_mfr | floatformat:'2' | intcomma }}{% else %}&nbsp;{% endif %}</div>
                </div>
            </div>
            <div class="col-1 p-0 pr-1 border-dark border-right border-bottom text-right">{% ifchanged record.item.name %}{{ record.pct | floatformat:'3' }}{% endifchanged %}</div>
            <div class="col-1 p-0 pr-1 border-dark border-right border-bottom text-right">{% ifchanged record.item.name %}{{ record.qty_req | floatformat:'0' | intcomma }}{% endifchanged %}</div>
            <div class="col-2 p-0 pl-1 border-dark border-right border-bottom">{{ record.receiver | default_if_none:"" }}</div>
            <div class="col-2 p-0 pl-1 border-dark border-right border-bottom">{{ record.receiver.lot }}</div>
            <div class="col-2 p-0 pl-1 border-dark border-right border-bottom">{% if record.car and record.receiver.package.name == "BULK" %}{{ record.car }}<br />{{ record.car_location }}{% else %}{{ record.receiver.package }}{% endif %}</div>
            <div class="col-1 p-0 pr-1 text-right border-dark border-right border-bottom">{{ record.receiver.qty_on_hand | floatformat:'0' | intcomma }}</div>
        </div>
    </div>
    <div class="col-6">
        <div class="row">
            <div class="col border-dark border-right border-left border-bottom pr-4 text-right">
                <div class="row"><div class="col text-right">{{ record.staged | floatformat:'0' | intcomma }}</div></div>
            </div>
            <div class="col border-dark border-right border-bottom pr-4">
                <div class="row">&nbsp;</div>
                <div class="row">&nbsp;</div>
            </div>
            <div class="col border-dark border-right border-bottom p-0">&nbsp;</div>
            <div class="col border-dark border-right border-bottom pr-4">&nbsp;</div>
            <div class="col border-dark border-right border-bottom p-0">&nbsp;</div>
            <div class="col border-dark border-right border-bottom p-0">&nbsp;</div>
            <div class="col border-dark border-right border-bottom p-0">&nbsp;</div>
        </div>
    </div>
</div>
{% endfor %}
<div class="small print-only">
<div class="row printfooter small">
    <div class="col text-nowrap">Production Inventory Planner</div> 
    <div class="col text-nowrap">FRM-141 Revision Level: 006</div>
    <div class="col text-nowrap">Issued: 01/05/12</div>
    <div class="col text-nowrap">Approved By: SEO</div>
    <div class="col text-nowrap">Reviewed By: Lynn Newton</div>
    <div class="col text-nowrap">Retention Requirements: 3 Years in Job Packet</div>
    <div class="col text-nowrap">Reference: ORD-003 Production Order Handling</div>
</div>
</div>
{% if not forloop.last %}<div class="breaker"></div>{% endif %}
{% endfor %}
    
</div>
{% endblock content %} 

{% block body_scripts %}
    <script>
        var URL = "{% url 'location' %}" + window.location.search;
        window.open(URL, '_blank');
    </script>
{% endblock body_scripts %}