{% extends bill_base %}
{% load static %}


{% block title %} Purchases Bill No : {{ bill.billno }}{% endblock title %}


{% block content %}

    <div style="color:#ea2088; font-style: bold; font-size: 3rem;  border-bottom: 1px solid white;">Purchase Bill No : {{ bill.billno }}</div>

    <br><br>
    
    <form method="post">
    {% csrf_token %}

        <div class="bg">
        
            <br><br>

            <div id="printArea" class="bg">

                <table class="outer-box inner-box" style="width: 800px; margin-left: auto; margin-right: auto;">
                    <tbody>
                        
                        <tr style="height: 1px;">
                            <td> <p style="text-align: center;">TAX INVOICE - PURCHASE</p> </td>
                        </tr>
                        
                        <tr style="text-align: center;">
                            <td >
                                <span style="font-size: 350%;">Company</span> <br>
                                <span style="font-size: 120%; font-weight: bold; text-decoration: underline;">DEALERS IN : Products</span> <br>
                                <span style="text-decoration: underline; font-weight: bold;">REGD ADDRESS :</span> Address Line 1<br>Address line 2<br>
                                <span style="text-decoration: underline; font-weight: bold;">EMAIL : email</span> <br><br>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>
                            <table class="outer-box" style="width: 800px; margin-left: auto; margin-right: auto;">
                                <tbody>
                                    <tr>
                                        <td class="inner-box" style="text-align: center; font-weight: bold;" colspan="3">GSTIN NO - 123456789ABCDEF</td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="width: 50%; font-weight: bold;">&nbsp;NAME OF CONSIGNEE / BUYER</td>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;INVOICE NO</td>
                                        <td class="inner-box" style="width: 25%;">&nbsp;{{ bill.billno }}</td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="width: 50%;">&nbsp;{{ bill.supplier.name }}</td>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;DATE</td>
                                        <td class="inner-box" style="width: 25%;">&nbsp;{{ bill.time.date }}</td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="width: 50%;" rowspan="3">{{ bill.supplier.address|linebreaks }}</td>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;EWAY NO</td>
                                        <td class="inner-box align-middle" style="width: 25%;"> <input type="text" name="eway" class="align-middle" style="border: 0; overflow: hidden;" value="{% if billdetails.eway %}{{ billdetails.eway }}{% endif %}"> </td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;VEH NO</td>
                                        <td class="inner-box align-middle" style="width: 25%;"> <input type="text" name="veh" class="align-middle" style="border: 0; overflow: hidden;" value="{% if billdetails.veh %}{{ billdetails.veh }}{% endif %}"> </td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;DESTINATION</td>
                                        <td class="inner-box align-middle" style="width: 25%;"> <input type="text" name="destination" class="align-middle" style="border: 0; overflow: hidden;" value="{% if billdetails.destination %}{{ billdetails.destination }}{% endif %}"> </td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;GSTIN No : {{ bill.supplier.gstin }}</td>
                                        <td class="inner-box" style="width: 25%; font-weight: bold;">&nbsp;PO NO &amp; DATE</td>
                                        <td class="inner-box align-middle" style="width: 25%;"> <input type="text" name="po" class="align-middle" style="border: 0; overflow: hidden;" value="{% if billdetails.po %}{{ billdetails.po }}{% endif %}"> </td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>
                            <table class="outer-box" style="width: auto; margin-left: auto; margin-right: auto;">
                                <tbody>
                                    <tr>
                                        <td class="inner-box" style="width: 05%; font-weight: bold; text-align: center;">&nbsp;SL NO</td>
                                        <td class="inner-box" style="width: 30%; font-weight: bold; text-align: center;">DESCRIPTION OF THE GOODS</td>
                                        <td class="inner-box" style="width: 12%; font-weight: bold; text-align: center;">&nbsp;HSN/SAC</td>
                                        <td class="inner-box" style="width: 12%; font-weight: bold; text-align: center;">QTY MTS</td>
                                        <td class="inner-box" style="width: 12%; font-weight: bold; text-align: center;">RATE PMT</td>
                                        <td class="inner-box" style="width: 12%; font-weight: bold; text-align: center;">AMOUNT INRS</td>
                                        <td class="inner-box" style="width: 05%; font-weight: bold; text-align: center;">PS</td>
                                    </tr>
                                    {% for item in items %}
                                        <tr style="height: auto;">
                                            <td class="inner-box" style="width: 5%;">&nbsp; {{ forloop.counter }}</td>
                                            <td class="inner-box" style="width: 30%;">&nbsp; {{ item.stock.name }}</td>
                                            <td class="inner-box" style="width: 12%;">&nbsp;</td>
                                            <td class="inner-box" style="width: 12%;">&nbsp; {{ item.quantity }}</td>
                                            <td class="inner-box" style="width: 12%;">&nbsp; {{ item.perprice }}</td>
                                            <td class="inner-box" style="width: 12%;">&nbsp;{{ item.totalprice }}</td>
                                            <td class="inner-box" style="width: 5%;">&nbsp;0</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>
                            <table class="outer-box inner-box" style="width: 800px; margin-left: auto; margin-right: auto;">
                                <tbody>
                                    <tr>
                                        <td class="inner-box" style="width: 35%; text-align: center;" rowspan="6">
                                            <p> <span style="font-weight: bold;">BANK DETAILS <br> company</span> <br>
                                                bank name <br> AC NO-000 000 000 000 000 <br> IFSC CODE - ABCD 000 0000 <br> BRANCH <br> PH NO - 0123456789</p>
                                        </td>
                                        <td class="inner-box" style="width: 30%; font-weight: bold;">&nbsp;CGST @ 2.5%</td>
                                        <td class="inner-box align-middle" style="width: 30%;">&nbsp; <input type="text" name="cgst" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.cgst %}{{ billdetails.cgst }}{% endif %}"></td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;SGST @ 2.5%</td>
                                        <td class="inner-box align-middle">&nbsp; <input type="text" name="sgst" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.sgst %}{{ billdetails.sgst }}{% endif %}"></td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;IGST @ 5% </td>
                                        <td class="inner-box align-middle">&nbsp; <input type="text" name="igst" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.igst %}{{ billdetails.igst }}{% endif %}"></td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;CESS @ 400/PMT </td>
                                        <td class="inner-box align-middle">&nbsp; <input type="text" name="cess" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.cess %}{{ billdetails.cess }}{% endif %}"></td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;TCS @ 1%</td>
                                        <td class="inner-box align-middle">&nbsp; <input type="text" name="tcs" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.tcs %}{{ billdetails.tcs }}{% endif %}"></td>
                                    </tr>
                                    <tr>
                                        <td class="inner-box" style="font-weight: bold;">&nbsp;TOTAL</td>
                                        <td class="inner-box align-middle">&nbsp; <input type="text" name="total" class="align-middle" pattern="[0-9]+\.[0-9]+" style="border: 0; overflow: hidden;" value="{% if billdetails.total %}{{ billdetails.total }}{% endif %}"> </td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>

                        <tr>
                            <td style="text-align: right;">
                                <span style="font-weight: bold;">FOR COMPANY <br><br><br><br> Signature</span>
                            </td>
                        </tr>

                        <tr>
                            <td style="text-align: center;">
                                FINAL TEXT
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>

            <br><br>

        </div>

        <br><br>

        <div class="wrapper">
            <button class="center ghost-blue" onclick="printpage('printArea')">Print</button>
            <button class="center ghost-green" type="submit">Save Draft</button>
            <a href="{% url 'purchases-list' %}" class=" btn center ghost-button">Go Back</a>
        </div>

    </form>

    <script>
        function printpage(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }       
        </script>

{% endblock %}