{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %} Close Dispute | IQChem {% endblock %}

{% block content %}
    <h3>CLOSE DISPUTE</h3>
    <p>Chemical Section Platform</p>
    <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
    <div>
        <h5>ENTRANCE INFORMATION&nbsp;&nbsp;&nbsp;&nbsp;
            {% if mat1.result == 'FAIL' %}
                <span style="border-radius:50%;background-color:red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            {% elif mat1.result == 'PASS' %}
                <span style="border-radius:50%;background-color:green;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            {% endif %}
        </h5>
        <p class="mb-1">MATERIAL : <strong>{{mat1.material}}</strong></p>
        <p class="mb-1">REFERENCE : <strong>{{mat1.reference}}</strong></p>
        <p class="mb-1">DESCRIPTION : <strong>{{mat1.material_description}}</strong></p>
        <p class="mb-1">SUPPLER : <strong>{{mat1.supplier}}</strong></p>
        <p class="mb-1">SAMPLED BY : <strong>{{mat1.sampled_by}}</strong></p>
        <p class="mb-1">DATE SAMPLED : <strong>{{mat1.date_sampled}}</strong></p>
        <p class="mb-1">QUANTITY : <strong>{{mat1.quantity}}</strong></p>
        <p class="mb-1">VEHICLE NUMBER : <strong>{{mat1.vehicle_number}}</strong></p>
        <p class="mb-1">TECHNOLOGIST : <strong>{{mat1.technologist}}</strong></p>
        <p class="mb-1">RESULT : <strong>{{mat1.result}}</strong></p>
        <p class="mb-1">COMMENT : <strong>{{mat1.comment}}</strong></p>
        <p class="mb-1">STATUS : <strong>{{mat1.status}}</strong></p>
        <p class="mb-1">RECORDED BY : <strong>{{mat1.created_by}}</strong></p>
        <p class="mb-1">DATE RECORDED : <strong>{{mat1.datetime}}</strong></p>

        {% if mat1.status == 'checked' %}
            <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            <p class="mb-1">CHECKED BY : <strong>{{mat1.checked_by}}</strong></p>
            <p class="mb-1">CHECKER COMMENT : <strong>{{mat1.checked_comment}}</strong></p>
            <p class="mb-1"><sup>Checked {{mat1.checked_by_date}}</sup></p>
        {% endif %}
        <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            
        
            {% if mat2 %}
                <h5>ANALYSIS INFORMATION</h5>
                {% for k,v in mat2.items %}
                <p class="mb-1"><span class="analysis_tab_list">{{k|upper}}</span> : <strong>{{v}}</strong></p>
                {% endfor %}
                <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            {% else %}
                <h5>MATERIAL HAVE NOT BEEN ANALYSED!</h5>
                <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
            {% endif %}

            <h5>DISPUTE</h5>
            <p class="mb-1">DISPUTE : <strong>{{dispute.dispute}}</strong></p>
            <p class="mb-1">AREA : <strong>{{dispute.area_of_dispute}}</strong></p>
            <p class="mb-1">RAISED BY : <strong>{{dispute.created_by}}</strong></p>
            <sup>Created at {{dispute.datetime_created}}</sup>
            <hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">

                <!--CLOSE DISPUTE FORM -->
                <div class="mb-3" class="col-sm-12 col-lg-6 shadowed__box mb-3" style="padding:15px;">
                    <form method="POST" action="" id="formPage">
                        {% csrf_token %}
                        <h5>CLOSE DISPUTE FORM</h5>
                        
                        <div class="mb-3">
                            <label class="form-label">Dispute Close Comment</label><br>
                            <textarea name="close_comment" class="form-control"></textarea>
                        </div>
                        <input type="hidden" value="{{dispute.id}}" name="disputeid">
                        <button type="submit" class="btn btn-primary btn-sm mt-1 mb-2" id="submit_btn" onclick="if (confirm(`Are you sure you want to close this dispute?`)){return true;}else{event.stopPropagation();event.preventDefault();}">CLOSE DISPUTE</button>
                        <a href="/dispute/" class="btn btn-secondary btn-sm mt-1 mb-2" id="cancel__btn">&nbsp;&nbsp;CANCEL&nbsp;&nbsp;</a>
                    </form>
                </div>
    </div>



    <script>
        $(document).ready(function(){
            analysis_tab_list_formater();
        });
    </script>

<script>
    function analysis_tab_list_formater(){
        var analysis_tab_list = $('.analysis_tab_list');

        $.each(analysis_tab_list, function(index, val){
            var elm = val.innerText;
            var elm_list = elm.replace(/_/g, ' ')
            val.innerText= elm_list;

        })
    }
</script>

<script>
    document.getElementById("formPage").onsubmit = function() {
        document.getElementById("submit_btn").disabled = true;
        document.getElementById("cancel__btn").disabled = true;
        document.getElementById("submit_btn").innerText = 'CLOSING';
    }
</script>

    <script>
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>
    
{% endblock %}