{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block base %}
    <style>
        th, td {
            padding-top: 0px;
            padding-bottom: 0px;
        }
    </style>
    <div style="position:absolute;right:5px;top:5px;">
        <a href="/line/analysis/detail/{{ data.id }}/" class="btn btn-dark shadowed">Back</a>
        <button type="button" class="btn btn-primary" onclick="printMe()">Print</button>
    </div>
    <div class="container-fluid my-5 p-5" id="GFG">
        <div class="form__head text-center">
            <h5>INTERCONTINENTAL DISTILLERS LIMITED</h5>
            <h5>QUALITY ASSURANCE PRODUCTION ANALYSIS LOG</h5>
            <h3>LINE ANALYSIS</h3>
        </div>
        <div>
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                    <th><p class="mb-0"><strong>BLEND NUMBER</strong>: {{ data.blend_number}}</p></th>
                    <th><p class="mb-0"><strong>REF No. : PC4A</strong></p></th>
                    <th><p class="mb-0"><strong>DATE</strong>: {{ data.date}}</p></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="form__body my-3">
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th>LINE : <strong>{{ data.line }}</strong></th>
                        <th>INSPECTORS : <strong>{{ data.inspector  }}</strong></th>
                        <th>SHIFT : <strong>{{ data.shift }}</strong></th>
                    </tr>
                    <tr>
                        <th colspan="3">PRODUCT : <strong>{{ data.product}} / {{ data.product_size }} ML</strong></th>
                    </tr>
                </thead>
            </table>
            <table class="table table-bordered border-primary table-sm">
                <thead>
                    <tr>
                        <th class="py-1">PARAMETER HRS.</th>
                        {% for h in hours %}
                                <td class="text-center">{{h}} - {% if h|add:1 < 10 %}0{{ h|add:1}}{%else %}{{ h|add:1 }}{% endif %}</td>
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">TASTE</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                <td class="text-center py-0">{% if value.taste == 'OKAY' %}<span style="color:green;">&#x2714;</span>{% elif value.taste == 'NOT OKAY' %}<span style="color:red;">&#x2716;</span>{% else %}<span> - </span>{% endif %}</td>
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">CONDUCTIVITY</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                {% if value.activity == 'BOTTLING' %}<td class="text-center py-0">{{ value.conductivity }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">pH</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-0">{{ value.ph }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">PDT. CLARITY</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-0">{{ value.clarity }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% if product_type == 'ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">% VOL. ALC.</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-0">{{ value.alcoholic_strength }}%</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% elif product_type == 'NON-ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">CO<sub>2</sub> BEFORE PAST.</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.co2_level_before_past }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    <tr>
                        <th class="py-1">CO<sub>2</sub> AFTER PAST.</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.co2_level_after_past }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% endif %}

                    <tr>
                        <th class="py-1">VOLUME</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.volume }} ML</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">BOTTLE</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.bottle_defect }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% if product_type == 'ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">CAPS</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.cap_defect }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% elif product_type == 'NON-ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">CORKING / CAPS</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.corking_caping_defect }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% endif %}

                    <tr>
                        <th class="py-1">LABEL</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.label_defect }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">MANUFACTURING DATE</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.manufacturing_date }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">BATCH NUMBER</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.batch_number }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% if product_type == 'ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">CASE STAMP CODE</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.case_code }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    {% elif product_type == 'NON-ALCOHOLIC' %}
                    <tr>
                        <th class="py-1">BEST BEFORE DATE</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.best_before_date }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    <tr>
                        <th class="py-1">ENVIRONMENT</th>
                        {% for h in hours %}
                            {% for key, value in form_data.items %}
                                {% if key == h %}
                                    {% if value.activity == 'BOTTLING' %}<td class="text-center py-1">{{ value.environment }}</td>{% elif value.activity == 'FAULT' %}<td class="text-center p-0" style="color:red;"><sup>{{ value.fault|truncatechars:15}}</sup></td>{% else %}<td class="text-center py-1"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>
                    {% endif %}

                </thead>
            </table>
        </div>
        <div class="px-3">
            <h5>WASHING METHOD : <strong>{{ data.washing_method }}</strong></h5>
        </div>
        <div class="form__faults">
            <div class="row">
                <div class="col-sm-12 col-lg-7">
                    <div class="px-3">
                        <table class="table table-bordered" style="border:1px solid rgba(0,0,0,0.3);">
                            <thead>
                                <tr>
                                    <th>FAULT</th><th>CORRECTIVE ACTION</th><th>RESULT</th>
                                </tr>
                            </thead>
                            <tbody style="font-size: 12px;">
                                {% for f in fault_data %}
                                <tr>
                                    <td>{{ f.fault }} at {{ f.hour }}Hrs.</td>
                                    <td>{{ f.corrective_action }}</td>
                                    <td>{{ f.result }}</td>
                                </tr>
                                {% endfor %}
                                <tr><td><br/><br/><br/></td><td></td><td></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-5">
                    <div class="px-3">
                        <table class="table table-bordered border-primary table-sm">
                            <thead>
                                <tr><th class="py-0">FAULT KEY</th><th class="py-0">M : RAW MATERIAL</th></tr>
                            </thead>
                            <tbody style="font-size: 12px;">
                                <tr><td class="py-0">F1 : Rinser Machine</td><td class="py-0">E : ENGINEERING</td></tr>
                                <tr><td class="py-0">F2 : Filler Machine</td><td class="py-0">W : MAINTENANCE SETTING</td></tr>
                                <tr><td class="py-0">F3 : Capper / Capping</td><td class="py-0">O : HUMAN</td></tr>
                                <tr><td class="py-0">F4 : Labeller / Labelling</td><td class="py-0">X : MINOR DEFECT</td></tr>
                                <tr><td class="py-0">F5 : Operator</td><td class="py-0">Y : MAJOR DEFECT</td></tr>
                                <tr><td class="py-0">F6 : Bottle</td><td class="py-0">Z : CRITICAL DEFECT</td></tr>
                                <tr><td class="py-0">F7 : Cork / Corking / Cap</td><td class="py-0">A : MACHINE BEHAVING ERRATICALLY</td></tr>
                                <tr><td class="py-0">F8 : Labels</td><td class="py-0">B : APPLICATION DISPENSING FAULT</td></tr>
                                <tr><td class="py-0">F9 : Glue</td><td class="py-0">C : EQUIPMENT INCORRECT CLEANING</td></tr>
                                <tr><td class="py-0">F10 : Particle</td><td class="py-0">F : OTHERS</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="row">
                <div class="col-sm-12 col-lg-6">
                    <div class="p-3">
                        <table class="table table-bordered border-primary">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>{{ data.shift }} SHIFT</th>
                                </tr>
                                <tr>
                                    <th>PRODUCT ANALYST</th>
                                    <th>{{ data.product_analyst }}</th>
                                </tr>
                                <tr>
                                    <th>LINE SUPERVISOR</th>
                                    <th>{{ data.supervisor }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-2 text-center">
                    <br/><br/><br/>
                    <p>{{ workflow.analysed_by }}</p>
                    <p>IPMO</p>
                </div>
                <div class="col-sm-12 col-lg-2 text-center">
                    <br/><br/><br/>
                    <p>{{ workflow.checked_by}}</p>
                    <p>CPMO</p>
                </div>
                <div class="col-sm-12 col-lg-2 text-center">
                    <br/><br/><br/>
                    <p>{{ workflow.approved_by }}</p>
                    <p>QAM</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
    function printMe(){
        const screenshotTarget = document.getElementById("GFG");

        html2canvas(screenshotTarget).then((canvas) => {
            const base64image = canvas.toDataURL("image/png");
            //window.location.href = base64image;
            window.open(base64image, "_blank"); 
        });
        }
</script>
{% endblock %}