{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block base %}
    <style>
        th, td {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        
        
        
          @media print {
            .print__hidden {display:none; visibility:hidden;}
            .container1 {margin: auto;}
            p {font-size: 11px;}
            /*h3 {font-size: 18px;}
            h5 {font-size: 14px;}*/
            #answers_table { font-size: 12px; }
            #answers_table td {padding: 1px; }
            /*th, td {padding-top: 0px; padding-bottom: 0px; }*/
            .form__faults {table-layout: fixed;}
            #fault__defect_info_table{width:100%;display: flex;flex-direction: row;}
            #fault_table {width: 60%;}
            #defect_info_table {width:35%;}
          }
    </style>
    <div style="position:absolute;right:5px;top:5px;">
        <a href="/line/inspection/detail/{{ data.id }}/" class="btn btn-dark shadowed">Back</a>
        <button type="button" class="btn btn-primary" onclick="printMe()">Print</button>
    </div>
    <div class="container1 my-5 p-5" id="GFG">
        <div class="form__head text-center">
            <h3>INTERCONTINENTAL DISTILLERS LIMITED</h3>
            <h5>QUALITY ASSURANCE PRODUCTION INSPECTION LOG</h5>
            <h5>LINE INSPECTION</h5>
        </div>

        <div>
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th><p class="mb-0"><strong>LINE : {{ data.l_id.line }}</strong></p></th>
                        <th><p class="mb-0">REF No. : {% if product_type == 'ALCOHOLIC' %}PC5B1{% elif product_type == 'NON-ALCOHOLIC' %}PC 12-3{% endif %}</p></th>
                        <th><p class="mb-0"><strong>DATE : {{ data.date }}</strong></p></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="form__body my-3">
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th>BLEND NUMBER : <strong>{{ data.blend_number }}</strong></th>
                        <th>SHIFT : <strong>{{ data.shift }}</strong></th>
                    </tr>
                </thead>
            </table>

            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th>PRODUCT : <strong>{{ data.product_id.product_name }} / {{ data.product_id.product_size }} ML by {{ data.product_id.case_quantity }}</strong></th>
                    </tr>
                </thead>
            </table>

            <table class="table table-bordered border-primary table-sm">
                <thead style="font-size: 12px;">
                    
                    <tr>
                        <th class="py-1">PARAMETER HRS.</th>

                        {% if product_type == 'NON-ALCOHOLIC' %}
                                <th class="py-1 text-center">SPECIFICATION</th>
                        {% endif %}

                        {% 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>
                    {% if product_type == 'ALCOHOLIC' %}
                    <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">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>

                    <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-0">{{ 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-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">CAP</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.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-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <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-0">{{ 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-0"> -- </td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                    </tr>

                    <tr>
                        <th class="py-1">SHRINK WRAPPING</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.shrink_wrapping_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">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">{% if value.case_stamp_code != '' %}{{ value.case_stamp_code }}{% else %}--{% endif %}</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>NYLON-C/D</th>
                        <th colspan="8">{{ pkg_codes.nylon_code }}</th>
                    </tr>
                    
                    <tr>
                        <th>CAP'S-C/D</th>
                        <th colspan="8">{{ pkg_codes.cap_code }}</th>
                    </tr>

                    <tr>
                        <th>LABEL'S-C/D</th>
                        <th colspan="8">{{ pkg_codes.label_code }}</th>
                    </tr>

                    <tr>
                        <th>BOTTLE-C/D</th>
                        <th colspan="8">{{ pkg_codes.bottle_code }}</th>
                    </tr>

                    <tr>
                        <th>CASE-C/D / TRAY-C/D</th>
                        <th colspan="8">{{ pkg_codes.case_code }}</th>
                    </tr>

                    <tr>
                        <th class="py-1">1<sup>ST</sup> SIGHTER</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.sighter1|truncatechars:12 }}</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">2<sup>2ND</sup> SIGHTER</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.sighter2|truncatechars:12 }}</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">3<sup>RD</sup> SIGHTER</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.sighter3|truncatechars:12 }}</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">4<sup>TH</sup> SIGHTER</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.sighter4|truncatechars:12 }}</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>

        <h5>WASHING METHOD : {{ data.washing_method }}</h5>
        
        <div class="form__faults">
            <div class="row" id="fault__defect_info_table">
                <div  class="col-xs-12 col-lg-7" id="fault_table">
                    <div class="px-3">
                        <table class="table table-bordered" style="table-layout: fixed; border-top:1px solid rgba(0,0,0,0.3);border-right:1px solid rgba(0,0,0,0.3);border-left: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: 10px;">
                                {% 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 %}
                                {% if data.comment %}
                                <tr>
                                    <td colspan="3">
                                        <p class="mb-0" style="font-size: 10px;"><u>NB</u> : {{ data.comment }}</p>
                                    </td>
                                </tr>
                                {% endif %}
                                {% if workflow.analysed_comment %}
                                <tr>
                                    <td colspan="3">
                                        <p class="mb-0" style="font-size: 10px;"><u>NB</u> : {{ workflow.analysed_comment }}</p>
                                    </td>
                                </tr>
                                {% endif %}
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.3);"><td colspan="3"><br/><br/><br/></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-xs-12 col-lg-5">
                    <div class="px-3" id="defect_info_table">
                        <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 : {% if product_type == 'ALCOHOLIC' %}Labels{% elif product_type == 'NON-ALCOHOLIC' %}Foil / Foiling{% endif %}</td><td class="py-0">B : APPLICATION DISPENSING FAULT</td></tr>
                                <tr><td class="py-0">F9 : {% if product_type == 'ALCOHOLIC' %}Glue{% elif product_type == 'NON-ALCOHOLIC' %}Basket{% endif %}</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>
                                {% if product_type == 'NON-ALCOHOLIC' %}
                                <tr><td class="py-0">F11 : Pasteurisation</td><td class="py-0"></td></tr>
                                <tr><td class="py-0">F12 : Heat Exchanger</td><td class="py-0"></td></tr>
                                <tr><td class="py-0">F13 : Carbonator</td><td class="py-0"></td></tr>
                                <tr><td class="py-0">F14 : Wire Hooder</td><td class="py-0"></td></tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="row">
                <div class="col-sm-12 col-lg-6">
                    <div class="p-3">
                        <table style="table-layout: fixed;" class="table table-bordered border-primary">
                            <thead style="font-size: 12px;">
                                <tr>
                                    <th>SHIFT</th>
                                    <th>{{ data.shift }} SHIFT</th>
                                </tr>
                                <tr>
                                    <th>LINE INSPECTOR</th>
                                    <th>{{ data.inspector }}</th>
                                </tr>
                                <tr>
                                    <th>LINE SUPERVISOR</th>
                                    <th>{{ data.supervisor }}</th>
                                </tr>
                                <tr>
                                    <th>LINE FOREMAN</th>
                                    <th>{{ data.foreman }}</th>
                                </tr>
                                <tr>
                                    <th style="font-size: 12px;">LINE SIGHTERS</th>
                                    <th style="font-size: 12px;">{{ sighters }}</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 src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.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"); 

            //var doc = new jsPDF('p', 'mm');
            //doc.addImage(base64image, 'PNG', 10, 10);
            //console.log('doc==========', doc);
            //doc.save('sample-file.pdf');
            //window.open('MyPDF.pdf', '_blank', 'fullscreen=yes')

            //var string = doc.output('datauristring');
            //var embed = "<embed width='100%' height='100%' src='" + string + "'/>"
            //var x = window.open();
            //x.document.open();
            //x.document.write(embed);
            //x.document.close();
        });
        }
</script>

 <script>
    $(document).ready(function(){})
</script>
{% endblock %}