{% load static custom_filters %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Laralink">
    <!-- Site Title -->
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
</head>

<body>
    <div class="tm_container">
        <div class="tm_invoice_wrap">
            <div class="tm_invoice tm_style2" id="tm_download_section">
                <div class="tm_invoice_in">
                    <div class="tm_invoice_head tm_top_head tm_mb20">
                        <div class="tm_invoice_left">
                            {% if logo_url %}
                                <div class="tm_logo">
                                    <img src="{{ logo_url }}" alt="Logo">
                                </div>
                            {% else %}
                                <div class="tm_logo">
                                    <img src="{% static 'assets/img/default_logo.png' %}" alt="Logo">
                                </div>
                            {% endif %}
                        </div>
                        <div class="tm_invoice_right">
                        </div>
                    </div>
                    <div class="tm_invoice_info tm_mb10">
                        <div class="tm_invoice_info_left">
                            <p class="tm_mb2"><b>Invoice To:</b></p>
                            <p>
                                <b class="tm_f16 tm_primary_color">{{ customer_name }}</b> <br>
                                {{ customer_address }} <br>
                                {{ customer_email }} <br>
                                {{ customer_phone }}
                            </p>
                        </div>
                        <div class="tm_invoice_info_right">
                            <div class="tm_ternary_color tm_f50 tm_text_uppercase tm_text_center tm_invoice_title tm_mb15 tm_mobile_hide">{{ title }}</div>
                            <div class="tm_grid_row tm_col_3 tm_invoice_info_in tm_accent_bg">
                                <div>
                                    <span class="tm_white_color_60">Grand Total:</span> <br>
                                    <b class="tm_f16 tm_white_color">{{ grand_total }} {{ currency }}</b>
                                </div>
                                <div>
                                    <span class="tm_white_color_60">Invoice Date:</span> <br>
                                    <b class="tm_f16 tm_white_color">{{ invoice_date|date:"F j, Y" }}</b>
                                </div>
                                <div>
                                    <span class="tm_white_color_60">Invoice No:</span> <br>
                                    <b class="tm_f16 tm_white_color">{{ tracking_code }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tm_table tm_style1">
                        <div class="tm_round_border">
                            <div class="tm_table_responsive">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="tm_width_7 tm_semi_bold tm_accent_color">Item</th>
                                            {% for column in custom_columns %}
                                                <th class="tm_width_2 tm_semi_bold tm_accent_color">{{ column }}</th>
                                            {% endfor %}
                                            <th class="tm_width_1 tm_semi_bold tm_accent_color">Qty</th>
                                            <th class="tm_width_1 tm_semi_bold tm_accent_color">Unit price</th>

                                            <th class="tm_width_2 tm_semi_bold tm_accent_color tm_text_right">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in items %}
                                            <tr class="{% if forloop.counter|divisibleby:2 %}tm_gray_bg{% endif %}">
                                                <td class="tm_width_7">
                                                    <p class="tm_m0 tm_f16 tm_primary_color">{{ item.name }}</p>
                                                    {{ item.description }}
                                                </td>
                                                {% for column in custom_columns %}
                                                    <td class="tm_width_2">{{ item.custom_data|get_item:column }}</td>
                                                {% endfor %}
                                                <td class="tm_width_1">{{ item.quantity }} {{ item.measurement }}</td>
                                                <td class="tm_width_1">{{ item.unit_price }} {{ currency  }}</td>
                                                <td class="tm_width_2 tm_text_right">{{ item.total_price }} {{ currency  }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tm_invoice_footer tm_mb15 tm_m0_md">
                            <div class="tm_left_footer">
                            </div>
                            <div class="tm_right_footer">
                                <table class="tm_mb15">
                                    <tbody>
                                        <tr>
                                            <td class="tm_width_3 tm_primary_color tm_border_none tm_bold">Subtotal</td>
                                            <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_bold">{{ subtotal }} {{currency}}</td>
                                        </tr>
                                        <tr>
                                            <td class="tm_width_3 tm_danger_color tm_border_none tm_pt0">Discount {{ discount_percentage }}%</td>
                                            <td class="tm_width_3 tm_danger_color tm_text_right tm_border_none tm_pt0">-{{ discount_amount }}</td>
                                        </tr>
                                        <tr>
                                            <td class="tm_width_3 tm_danger_color tm_border_none tm_pt0">Concession {{ concession_percentage }}%</td>
                                            <td class="tm_width_3 tm_danger_color tm_text_right tm_border_none tm_pt0">-{{ concession_amount }}</td>
                                        </tr>
                                        <tr>
                                            <td class="tm_width_3 tm_primary_color tm_border_none tm_pt0">Tax {{ tax_percentage }}%</td>
                                            <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_pt0">+{{ tax_amount }}</td>
                                        </tr>
                                        <tr class="tm_border_top_0 tm_bold tm_f16 tm_white_color tm_accent_bg tm_radius_6_0_0_6">
                                            <td class="tm_width_3 tm_bold tm_f16 tm_white_color tm_accent_bg tm_radius_6_0_0_6">Grand Total</td>
                                            <td class="tm_width_3 tm_bold tm_f16 tm_primary_color tm_text_right tm_white_color tm_accent_bg tm_radius_0_6_6_0">{{ grand_total }} {{currency}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tm_invoice_footer tm_type1">
                            <div class="tm_left_footer"></div>
                            <div class="tm_right_footer">
                                <div class="tm_sign tm_text_center">
                                    {% if sign_url %}
                                        <img src="{{ sign_url }}" alt="Sign">
                                    {% else %}
                                        <img src="{% static 'assets/img/default_signature.png' %}" alt="Sign">
                                    {% endif %}
                                    <p class="tm_m0 tm_ternary_color">{{ signatory_name }}</p>
                                    <p class="tm_m0 tm_f16 tm_primary_color">{{ signatory_title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% for field in additional_fields %}
                    <div class="tm_padd_15_20 tm_round_border tm_mb15">
                        <div class="tm_note_section">
                        <p class="tm_mb5"><b class="tm_primary_color">{{ field.label }}:</b></p>
                        <ul class="tm_m0 tm_note_list">
                            {% for sentence in field.content|split_by_period %}
                            <li>{{ sentence }}</li>
                            {% endfor %}
                        </ul>
                        </div>
                    </div>
                    {% endfor %}

                </div>
            </div>
            <div class="tm_invoice_btns tm_hide_print">
                <a href="javascript:window.print()" class="tm_invoice_btn tm_color1">
                    <span class="tm_btn_icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
                            <path d="M384 368h24a40.12 40.12 0 0040-40V168a40.12 40.12 0 00-40-40H104a40.12 40.12 0 00-40 40v160a40.12 40.12 0 0040 40h24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
                            <rect x="128" y="240" width="256" height="208" rx="24.32" ry="24.32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
                            <path d="M384 128v-24a40.12 40.12 0 00-40-40H168a40.12 40.12 0 00-40 40v24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
                            <circle cx="392" cy="184" r="24" fill="currentColor"/>
                        </svg>
                    </span>
                    <span class="tm_btn_text">Print</span>
                </a>
                <button id="tm_download_btn" class="tm_invoice_btn tm_color2">
                    <span class="tm_btn_icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
                            <path d="M320 336h76c55 0 100-21.21 100-75.6s-53-73.47-96-75.6C391.11 99.74 329 48 256 48c-69 0-113.44 45.79-128 91.2-60 5.7-112 35.88-112 98.4S70 336 136 336h56M192 400.1l64 63.9 64-63.9M256 224v224.03" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                        </svg>
                    </span>
                    <span class="tm_btn_text">Download</span>
                </button>
            </div>
        </div>
    </div>
    <script src="{% static 'assets/js/jquery.min.js' %}"></script>
    <script src="{% static 'assets/js/jspdf.min.js' %}"></script>
    <script src="{% static 'assets/js/html2canvas.min.js' %}"></script>
    <script src="{% static 'assets/js/main.js' %}"></script>
</body>

</html>
