{% 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="/sachet/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="container1 my-5 p-5" id="GFG">
        <div class="form__head text-center">
            <h5>INTERCONTINENTAL DISTILLERS LIMITED</h5>
            <h3>DAILY MINIPACK PRODUCTION QUALITY ASSURANCE LOG</h3>
        </div>

        <div>
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th><p class="mb-0"><strong>ANALYSIS FORM :</strong>(REF No. : PC4A)</p></th>
                        <th><p class="mb-0"><strong>DATE</strong>: {{ data.date}}</p></th>
                        <th><p class="mb-0"><strong>SHIFT : {{ data.shift }}</strong></p></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="form__body my-3">
            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th>LINE INSPECTOR(S) : <strong>{{ data.inspector }}</strong></th>
                        <th>SUPERVISOR(S) : <strong>{{ data.supervisor }}</strong></th>
                    </tr>
                </thead>
            </table>

            <table class="table table-bordered border-primary">
                <thead>
                    <tr>
                        <th>MACHINE : <strong>{{ data.mc_id.machine }}</strong></th>
                        <th>PRODUCT : <strong>{{ data.product_id.product_name }} / {{ data.product_id.product_size }} ML by {{ data.product_id.case_quantity }}</strong></th>
                        <th>BLEND NUMBER : <strong>{{ data.blend_number }}</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 %}
                                <td class="text-center py-0">{{ value.conductivity }}</td>
                                {% 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>

                    <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>

                    <tr>
                        <th class="py-1">AVG. VOLUME (ML)</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">DEFECT(S)</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.defect != '' %}{{ value.defect }}{% 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 class="py-1">WEIGHT (GM)</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.weight }} GM</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">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_stamp_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>

                </thead>
            </table>
        </div>
        
        <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" 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: 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>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.3);"><td><br/><br/><br/></td><td></td><td></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 colspan="2" class="py-0">FAULT BOX</th></tr>
                            </thead>
                            <tbody style="font-size: 12px;">
                                <tr><td class="py-0" style="background-color:rgb(222, 171, 171);">MINOR</td><td class="py-0" style="background-color:rgb(222, 171, 171);">CRITICAL</td></tr>
                                <tr><td class="py-0">S1 : COLOR VARIATION</td><td class="py-0">S13 : POOR SEALING</td></tr>
                                <tr><td class="py-0">S2 : POOR REGISTRATION AND PRINTING</td><td class="py-0">S14 : LEAKAGES</td></tr>
                                <tr><td class="py-0" style="background-color:rgb(222, 171, 171);">MAJOR</td><td class="py-0">S15 : DELAMINATION</td></tr>
                                <tr><td class="py-0">S3 : OVERDRAWING</td><td class="py-0">S16 : PERFORATED LAMINATE</td></tr>
                                <tr><td class="py-0">S4 : POOR ALIGNMENT</td><td class="py-0">S17 : FOREIGN MATERIALS</td></tr>
                                <tr><td class="py-0">S5 : LOW VOLUME</td><td class="py-0">M : RAW MATERIAL</td></tr>
                                <tr><td class="py-0">S6 : HIGH VOLUME</td><td class="py-0">E : ENGINEERING</td></tr>
                                <tr><td class="py-0">S7 : POOR SERATION</td><td class="py-0">W : MAINTENANCE SETTING</td></tr>
                                <tr><td class="py-0">S8 : SHORT PACKING</td><td class="py-0">O : HUMAN</td></tr>
                                <tr><td class="py-0">S9 : OVER PACKING</td><td class="py-0">X : MINOR DEFECT</td></tr>
                                <tr><td class="py-0">S10 : WRONG CODING</td><td class="py-0">Y : MAJOR DEFECT</td></tr>
                                <tr><td class="py-0">S11 : IMPROPER CODING</td><td class="py-0">Z : CRITICAL DEFECT</td></tr>
                                <tr><td class="py-0">S12 : OVER HEATING</td><td class="py-0"></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 style="table-layout: fixed;" 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>

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