{% 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>
    <!-- Stylesheet -->
    <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_style1 tm_type3" id="tm_download_section">
                <!-- Decorative Shapes -->
                <div class="tm_shape_1">
                    <svg width="850" height="151" viewBox="0 0 850 151" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M850 0.889398H0V150.889H184.505C216.239 150.889 246.673 141.531 269.113 124.872L359.112 58.0565C381.553 41.3977 411.987 32.0391 443.721 32.0391H850V0.889398Z" fill="#007AFF" fill-opacity="0.1"/>
                    </svg>
                </div>
                <div class="tm_shape_2">
                    <svg width="850" height="151" viewBox="0 0 850 151" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 150.889H850V0.889408H665.496C633.762 0.889408 603.327 10.2481 580.887 26.9081L490.888 93.7224C468.447 110.381 438.014 119.74 406.279 119.74H0V150.889Z" fill="#007AFF" fill-opacity="0.1"/>
                    </svg>
                </div>
                <!-- Invoice Content -->
                <div class="tm_invoice_in">
                    <!-- Invoice Header -->
                    <div class="tm_invoice_head tm_align_center tm_mb20">
                        <div class="tm_invoice_left">
                            {% if logo_url %}
                                <div class="tm_logo">
                                    <img src="{{ logo_url }}" alt="Logo" style="width: 120px;">
                                </div>
                            {% else %}
                                <div class="tm_logo">
                                    <img src="{% static 'assets/img/default_logo.png' %}" alt="Logo" style="width: 120px;">
                                </div>
                            {% endif %}
                        </div>
                        <div class="tm_invoice_right tm_text_right">
                            <h1 class="tm_primary_color tm_f50 tm_text_uppercase">{{ title }}</h1>
                            {% if stamp_url %}
                                <div class="tm_stamp">
                                    <img src="{{ stamp_url }}" alt="Stamp" style="width: 80px; margin-left: 20px;">
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <!-- Invoice Info -->
                    <div class="tm_invoice_info tm_mb20">
                        <div class="tm_invoice_seperator">
                            <img src="{% static 'assets/img/arrow_bg.svg' %}" alt="Separator">
                        </div>
                        <div class="tm_invoice_info_list">
                            <p class="tm_invoice_number tm_m0">Invoice No: <b class="tm_primary_color">{{ tracking_code }}</b></p>
                            <p class="tm_invoice_date tm_m0">Date: <b class="tm_primary_color">{{ invoice_date|date:"F j, Y" }}</b></p>
                            <div class="tm_invoice_info_list_bg tm_accent_bg_10"></div>
                        </div>
                    </div>
                    <!-- Customer Info -->
                    <div class="tm_invoice_head tm_mb10">
                        <div class="tm_invoice_left">
                            <p class="tm_mb2"><b class="tm_primary_color">Invoice To:</b></p>
                            <p>
                                {{ customer_name }}<br>
                                {{ customer_email }}
                                {{ customer_phone}}
                            </p>
                        </div>
                    </div>
                    <!-- Items Table -->
                    <div class="tm_table tm_style1 tm_mb30">
                        <div class="tm_table_responsive">
                            <table class="tm_border_bottom">
                                <thead>
                                    <tr class="tm_border_top">
                                        <th class="tm_width_1 tm_semi_bold tm_primary_color tm_accent_bg_10">#</th>
                                        <th class="tm_width_3 tm_semi_bold tm_primary_color tm_accent_bg_10">Item Description</th>
                                        {% for column in custom_columns %}
                                            <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10">{{ column }}</th>
                                        {% endfor %}
                                        <th class="tm_width_1 tm_semi_bold tm_primary_color tm_accent_bg_10">Quantity</th>
                                        <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10 tm_text_right">Unit Price</th>
                                        <th class="tm_width_2 tm_semi_bold tm_primary_color tm_accent_bg_10 tm_text_right">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in items %}
                                        <tr>
                                            <td class="tm_width_1">{{ forloop.counter }}</td>
                                            <td class="tm_width_3">{{ 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_2 tm_text_right">{{ item.unit_price }} {{ currency }}</td>
                                            <td class="tm_width_2 tm_text_right">{{ item.total_price }} {{ currency }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <!-- Invoice Footer -->
                        <div class="tm_invoice_footer">
                            <div class="tm_left_footer">
                                <p class="tm_mb2"><b class="tm_primary_color">Payment info:</b></p>
                                <p class="tm_m0">{{ payment_info }}</p>
                            </div>
                            <div class="tm_right_footer">
                                <table>
                                    <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_primary_color tm_border_none tm_pt0">Discount <span class="tm_ternary_color">({{ discount_percentage }}%)</span></td>
                                            <td class="tm_width_3 tm_primary_color tm_text_right tm_border_none tm_pt0">-{{ discount_amount }}</td>
                                        </tr>
                                        <tr>
                                            <td class="tm_width_3 tm_primary_color tm_border_none tm_pt0">Concession <span class="tm_ternary_color">({{ concession_percentage }}%)</span></td>
                                            <td class="tm_width_3 tm_primary_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 <span class="tm_ternary_color">({{ tax_percentage }}%)</span></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 tm_border_bottom">
                                            <td class="tm_width_3 tm_border_top_0 tm_bold tm_f16 tm_primary_color">Grand Total</td>
                                            <td class="tm_width_3 tm_border_top_0 tm_bold tm_f16 tm_primary_color tm_text_right">{{ grand_total }} {{ currency }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- Signature -->
                                {% if sign_url %}
                                    <div class="tm_sign_area tm_align_right" style="text-align: center; margin-top: 20px;">
                                        <img src="{{ sign_url }}" alt="Signature" style="width: 250px;">
                                        <p class="tm_m0 tm_primary_color" style="margin-top: 5px;">Signature</p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <!-- Terms & Conditions -->
                    <div class="tm_padd_15_20">
                    </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>
            <!-- Print Button -->
            <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>
            </div>
        </div>
    </div>
    <!-- Scripts -->
    <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>
