{% extends 'pos_base.html' %}

{% block content %}
    {% include 'navbar.html' %}
    <!-- check message -->
    {% if message != '' %}
    <div class="modal fade" id="show_message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-body">
            {{message}}
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
                </button>
            </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Modal product -->
    <div class="modal fade" id="product_Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">กรุณายืนยัน</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% comment %} <div class="modal-body">
                ...
            </div> {% endcomment %}
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                <button type="button" class="btn btn-primary" onclick='document.getElementById("product_form").submit();'>เพิ่มสินค้า</button>
            </div>
            </div>
        </div>
    </div>

    <!-- Modal upload file -->
    <div class="modal fade" id="upload_file_Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">กรุณายืนยัน</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% comment %} <div class="modal-body">
                <p>
                    นอนยันการอัพโหลด
                </p>
            </div> {% endcomment %}
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                <button type="button" class="btn btn-primary" onclick='document.getElementById("upload_form").submit();'>อัพโหลด</button>
            </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-6 p-0">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-light ">
                        <h2>เพิ่มสินค้า 1 รายการ</h2> 
                    </li>
                    
                    <li class="list-group-item">
                        <form id='product_form' name='product_form' action="{% url "add_product" %}" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ product_form.as_p }}
                        </form> 
                        <button  class="btn btn-outline-success"  data-toggle="modal" data-target="#product_Modal" >เพิ่มสินค้า</button>
                    </li>
                </ul>

            </div>
            <div class="col-lg-6">
                
                <ul class="list-group">

                    <li class="list-group-item list-group-item-info">
                        <h2>เพิ่มสินค้าโดยใช้ไฟล์ xlsx</h2> 
                    </li>
                    <li class="list-group-item">
                        <a class="nav-link" href="{% url 'download' 'exampleAddProduct.xlsx'%}" id='download'>ตัวอย่างไฟล์</a>
                        <form id='upload_form' name='upload_form' action="{% url "add_product" %}" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            
                            
                            <p>{{ upload_form.non_field_errors }}</p>

                            <p>{{ upload_form.docfile.label_tag }} {{ upload_form.docfile.help_text }}</p>

                            <p>
                                {{ upload_form.docfile.errors }}
                                <input class='btn p-0' type="file" name="docfile" required="" id="id_docfile">
                            </p>
                        </form>
                        <button name='summit_upload_form'   class="btn btn-outline-success" data-toggle="modal" data-target="#upload_file_Modal">อัพโหลด</button>
                    </li>
                </ul>
                          
            </div>        
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(window).on('load', function() {
            $('#show_message').modal('show');
        });
    </script>
{% endblock content %}