{% extends "layout.html" %}
{% load tz %}
{% load humanize %}
{% load app_filters %}
{% block styles %}
    {{ block.super }}
    <style type="text/css">
        @media print {
            .no-print {
                display: none;
            }
        }
        .line-height-0 {
          line-height: 1 !important;
        }
        .line-height-1 {
          line-height: 1.1 !important;
        }
        .line-height-2 {
          line-height: 1.2 !important;
        }
        .line-height-3 {
          line-height: 1.3 !important;
        }
        .line-height-4 {
          line-height: 1.4 !important;
        }
        .line-height-5 {
          line-height: 1.5 !important;
        }
        .font-weight-semibold {
            font-weight: 500 !important;
        }
    </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()" id="id_print_btn">Print</button></div>
</div>
<script>
    var locations = {{ all_locations | safe }};
</script>

{% for page in 1|range:7 %}
<div class="row">
    <div class="col-4 text-left">
    {% timezone "America/Chicago" %}
    <div class="row">{% now "m/d/y" %}</div>
    <div class="row">{% now "h:i:s A" %}</div>
    {% endtimezone %}
    </div>
    <div class="col-4 justify-content-center">
    <div><h4 class="text-center text-danger">{{ report_title }}</h4></div>
    <div><div class="text-center font-italic">Confidential Information</div></div>
    </div>
    <div class="col-4 justify-content-end text-right">
        <div class="row justify-content-end text-right">Port Rd ^</div>
        <div class="row justify-content-end text-right">Page: {{ page }} of 7</div>
    </div>
</div>
<div class="row small" style="page-break-after: always;">
    {% for col in 1|range:4 %}
    <div class="col border{% if forloop.counter < 3 %} border-right-0{% endif %} border-secondary">
        {% for row in 1|range:13 %}
        <script>
            var page = {{ page }};
            var col = {{ col }};
            var row = {{ row }};
            var index=locations.findIndex(function(location){
                return (location.print_page==page && location.print_row==row && location.print_col==col);
            });
        </script>
        <div id="{{page}}-{{col}}-{{row}}" class="row border border-right-0 border-left-0 border-top-0{% if forloop.counter > 11 %} border-bottom-0{% endif %} border-secondary" style="height:103px;">
            <script>if(typeof locations[index] != "undefined"){$("#{{page}}-{{col}}-{{row}}").html("<span class='pl-3 font-weight-bold'>"+locations[index].name+"</span>");}</script>
            {% for car in cars %}
            {% if car.page == page and car.row == row and car.col == col %}
            <script>$("#{{page}}-{{col}}-{{row}}").html("");</script>
            <div class="col">
                <div class="row line-height-3">
                    <div class="col-2 font-weight-bold">{{ car.location }}</div>  
                    <div class="col-4 font-weight-semibold">{% if car.receiver.inv_class.name == 'RM' %}<mark class="p-0">{% endif %}{{ car.car }}{% if car.receiver.inv_class.name == 'FG' %}</mark>{% endif %} </div> 
                    <div class="col-3 font-weight-semibold">{{ car.receiver.qty_on_hand | floatformat:'0'| intcomma | default_if_none:"" }} </div>
                    <div class="col text-right font-weight-bold">{% if car.receiver.inv_class_id != 'FG' %}{{ car.days | default_if_none:"" }}{% endif %}</div>
                </div>
                {% if car.receiver is not None or car.c1rec is not None or car.c2rec is not None or car.c3rec is not None or car.c4rec is not None %}
                {% if car.receiver %}
                <div class="row pl-1 line-height-3 font-weight-semibold" style="height:65px;">
                    <div class="col-5">
                        <div class="row">Rec:{{ car.receiver }}</div>
                        <div class="row">Itm:{{ car.receiver.item }}</div>
                        <div class="row">Lot:{{ car.receiver.lot | default_if_none:"" }}</div>
                    </div>
                    <div class="col-2 pl-2">{% if car.receiver.group.name == 'QH' %}<div class="row mb-2"></div><div class="row>"><h1>QH</h1></div>{% endif %}</div>
                    <div class="col">
                        <div class="row">
                            <div class="col-1">{{ car.c1 }}</div> 
                            <div class="col">{{ car.c1fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c1sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c2 }}</div> 
                            <div class="col">{{ car.c2fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c2sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c3 }}</div> 
                            <div class="col">{{ car.c3fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c3sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c4 }}</div> 
                            <div class="col">{{ car.c4fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c4sts | default_if_none:"" }}</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8 small pl-1 line-height-0">{{ car.comment1 | default_if_none:"" }}</div>
                    <div class="col align-self-end text-right">{{ car.routing | default_if_none:"" }}</div>
                    <div class="col align-self-end text-right">{{ car.receiver.cofa_mfr | floatformat:'0' | default_if_none:"" }}</div>
                </div>
                {% endif %}
                {% if car.receiver is None %}
                    {% if car.c1rec or car.c2rec or car.c3rec or car.c4rec %}
                    <div class="row">
                        <div class="col-8">
                            <div class="row">
                                <div class="col-4">{{ car.c1rec.receiver | default_if_none:"" }}</div>
                                <div class="col">{{ car.c1rec.item.name | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-4">{{ car.c2rec.receiver | default_if_none:"" }}</div>
                                <div class="col">{{ car.c2rec.item.name | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-4">{{ car.c3rec.receiver | default_if_none:"" }}</div>
                                <div class="col">{{ car.c3rec.item.name | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-4">{{ car.c4rec.receiver | default_if_none:"" }}</div>
                                <div class="col">{{ car.c4rec.item.name | default_if_none:"" }}</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-1">{{ car.c1 }}</div>
                                <div class="col">{{ car.c1fill | default_if_none:"" }}</div>
                                <div class="col pr-1 pl-0">{{ car.c1sts | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-1">{{ car.c2 }}</div>
                                <div class="col">{{ car.c2fill | default_if_none:"" }}</div>
                                <div class="col pr-1 pl-0">{{ car.c2sts | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-1">{{ car.c3 }}</div>
                                <div class="col">{{ car.c3fill | default_if_none:"" }}</div>
                                <div class="col pr-1 pl-0">{{ car.c3sts | default_if_none:"" }}</div>
                            </div>
                            <div class="row">
                                <div class="col-1">{{ car.c4 }}</div>
                                <div class="col">{{ car.c4fill | default_if_none:"" }}</div>
                                <div class="col pr-1 pl-0">{{ car.c4sts | default_if_none:"" }}</div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                <div class="row small">{{ car.comment1 | default_if_none:"" }}</div>
                {% endif %}
                
                {% else %}
                <div class="row">
                    <div class="col-8 pl-1 pt-3">{{ car.comment1 | default_if_none:"" }}</div>
                    <div class="col">
                        <div class="row">
                            <div class="col-1">{{ car.c1 }}</div>
                            <div class="col">{{ car.c1fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c1sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c2 }}</div>
                            <div class="col">{{ car.c2fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c2sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c3 }}</div>
                            <div class="col">{{ car.c3fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c3sts | default_if_none:"" }}</div>
                        </div>
                        <div class="row">
                            <div class="col-1">{{ car.c4 }}</div>
                            <div class="col">{{ car.c4fill | default_if_none:"" }}</div>
                            <div class="col pr-1 pl-0">{{ car.c4sts | default_if_none:"" }}</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col align-self-end text-right">{{ car.routing | default_if_none:"" }}</div>
                    <div class="col align-self-end text-right">{{ car.receiver.cofa_mfr | floatformat:'0' | default_if_none:"" }}</div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>
{% endfor %}

<div class="row pt-5">
    <div class="col-4 text-left">
    {% timezone "America/Chicago" %}
    <div class="row">{% now "m/d/y" %}</div>
    <div class="row">{% now "h:i:s A" %}</div>
    {% endtimezone %}
    </div>
    <div class="col-4 justify-content-center">
    <div><h4 class="text-center text-danger">{{ report_title }}</h4></div>
    <div><div class="text-center font-italic">Confidential Information</div></div>
    </div>
    <div class="col-4 text-right">Port Rd ^</div>
</div>

<div class="row pt-5">
    <div class="col-3 border border-dark border-right-0">
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">Hoses Disconnected</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">Flow Tube Caps Closed</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">X-Braces Cleared</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">Loading Spouts Upright</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">Top of Cars Clear</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">Lanyard Secured</div>
        <div class="row pt-2 pb-2 pl-3 border border-dark">All Other Employees Clear</div>
    </div>
    <div class="col-1 border border-dark border-right-0">
        <div class="row pt-2 pb-2 pl-3 border border-dark">NP1</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
    <div class="col-1 border border-dark border-right-0">
        <div class="row pt-2 pb-2 pl-3 border border-dark">NP2</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
    <div class="col-1 border border-dark border-right-0">
        <div class="row pt-2 pb-2 pl-3 border border-dark">NP3</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
    <div class="col-1 border border-dark border-right-0">
        <div class="row pt-2 pb-2 pl-3 border border-dark">SP1</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
    <div class="col-1 border border-dark border-right-0">
        <div class="row pt-2 pb-2 pl-3 border border-dark">SP2</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
    <div class="col-1 border border-dark">
        <div class="row pt-2 pb-2 pl-3 border border-dark">SP3</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
        <div class="row pt-2 pb-2 border border-dark">&nbsp;</div>
    </div>
</div>
<div class="row pt-3">Radio checks completed prior to movements-   Name_____________________ Date_____________________</div>

{% endblock content %}