{% extends "./base.html" %}
{% load custom_tags %}

{% block bodyPage %}
<div class="container is-fluid mt-4 mb-6">
    
    <div class="columns is-vcentered pb-4 mb-5" style="border-bottom: 2px solid #f5f5f5;">
        <div class="column is-12-mobile is-half-tablet has-text-centered-mobile">
            <h1 class="title is-4 is-size-5-mobile has-text-dark">اتاق فرمان مالی و داشبورد تجاری</h1>
            <p class="subtitle is-7 has-text-grey mt-1">رصد زنده شریان نقدینگی، سن مطالبات و مانیتورینگ پویای انبار | <span class="tag is-dark is-light">سال مالی</span></p>
        </div>
        
        <div class="column is-12-mobile is-half-tablet">
            <form method="GET" class="box shadow-sm bg-light-filter p-3 m-0">
                <div class="columns is-mobile is-multiline is-vcentered m-0">
                    <div class="column is-6-mobile is-narrow-tablet p-1">
                        <label class="label is-size-7 pr-1 mb-1">از تاریخ</label>
                        <input type="text" class="input is-small date-picker-az pwt-datepicker-input-element w-100" placeholder="آغاز دوره">
                        <input type="hidden" name="azTarikh" id="azTarikhAlt" value="{{ filters.azTarikh }}">
                    </div>
                    <div class="column is-6-mobile is-narrow-tablet p-1">
                        <label class="label is-size-7 pr-1 mb-1">تا تاریخ</label>
                        <input type="text" class="input is-small date-picker-ta pwt-datepicker-input-element w-100" placeholder="پایان دوره">
                        <input type="hidden" name="taTarikh" id="taTarikhAlt" value="{{ filters.taTarikh }}">
                    </div>
                    <div class="column is-12-mobile is-narrow-tablet p-1 mt-auto has-text-centered-mobile">
                        <button type="submit" class="button is-danger is-small is-fullwidth-mobile px-4">
                            <span>اعمال گزارش پویا</span>
                        </button>
                    </div>
                    {% if filters.azTarikh or filters.taTarikh %}
                    <div class="column is-12-mobile is-narrow-tablet p-1 mt-auto has-text-centered-mobile">
                        <a href="{% url 'admin_panel:financial_dashboard' %}" class="button is-light is-small is-fullwidth-mobile has-text-grey">حذف فیلتر</a>
                    </div>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <!-- هشدار هوشمند خطاهای سیستمی -->
    {% if group1_count > 0 or group2_count > 0 or group4_count > 0 %}
    <div class="notification is-danger is-light mb-4 py-3 shadow-sm is-flex is-align-items-center is-justify-content-space-between is-flex-wrap-wrap">
        <div class="mb-2-mobile">
            <span class="icon has-text-danger"><i class="fas fa-exclamation-circle"></i></span>
            <strong class="has-text-danger-dark">حسابرسی خودکار سیستم:</strong> 
            تعداد <b>{{ group1_count }} مورد</b> بدهی پرخطر، <b>{{ group2_count }} مورد</b> خطای ثبتی چک و <b>{{ group4_count }} مورد</b> رکورد نامتعارف یافت شد!
        </div>
        <a href="#audit-section" class="button is-danger is-small is-rounded is-outlined px-4">مشاهده گزارش حسابرسی (پایین صفحه)</a>
    </div>
    {% endif %}

    <!-- بخش اول: کارت‌های شاخص (KPI) -->
    <div class="columns is-multiline">
        <div class="column is-12-mobile is-4-tablet">
            <div class="box p-4 has-background-white shadow-card border-left-success h-100">
                <div class="level is-mobile m-0">
                    <div class="level-left">
                        <div>
                            <p class="heading has-text-grey-dark is-size-7 mb-1" title="مجموع مبلغ اسناد در دست (چک‌ها و سررسیدهای پرداخت نشده)">مطالبات دارای سند (چک/سررسید)</p>
                            <p class="title is-size-4 is-size-5-mobile toCurrency has-text-success-dark">{{ kpi_total_unpaid }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column is-12-mobile is-4-tablet">
            <div class="box p-4 has-background-white shadow-card border-left-info h-100">
                <div class="level is-mobile m-0">
                    <div class="level-left">
                        <div>
                            <p class="heading has-text-grey-dark is-size-7 mb-1">حجم ناخالص فروش در بازه انتخابی</p>
                            <p class="title is-size-4 is-size-5-mobile toCurrency has-text-info-dark">{{ kpi_total_sales }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column is-12-mobile is-4-tablet">
            <div class="box p-4 has-background-danger-light shadow-card border-left-danger h-100" title="بدهی مشتریانی که هیچ‌گونه چک یا سررسیدی برای بدهی خود ارائه نکرده‌اند">
                <div class="level is-mobile m-0">
                    <div class="level-left">
                        <div>
                            <p class="heading has-text-danger-dark is-size-7 mb-1 font-weight-bold">مجموع مطالبات پرخطر (بدون سند)</p>
                            <p class="title is-size-4 is-size-5-mobile toCurrency has-text-danger-dark">{{ group1_total }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- بخش دوم: نمودارها -->
    <div class="columns is-multiline mt-1">
        <div class="column is-12">
            <div class="box p-4 shadow-card">
                <div class="level is-mobile is-flex-wrap-wrap mb-4 pb-2" style="border-bottom: 1px solid #f0f0f0;">
                    <div class="level-left mb-2-mobile">
                        <p class="title is-6 is-size-7-mobile mb-0">📈 روند جمع کل بدهی مشتریان در ۱۲ ماه گذشته</p>
                    </div>
                    <div class="level-right">
                        <span class="tag is-info is-light is-rounded is-small-mobile">محاسبه بر اساس ماهیانه</span>
                    </div>
                </div>
                <div class="chart-wrapper-medium">
                    <canvas id="debtTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="columns is-multiline mt-1">
        <div class="column is-12-mobile is-7-desktop">
            <div class="box p-4 shadow-card h-100">
                <p class="title is-6 is-size-7-mobile pb-2 mb-4" style="border-bottom: 1px solid #f0f0f0;">
                    📊 ماتریس ریسک و تحلیل سنی اسناد (چک/نسیه)
                </p>
                <div class="chart-wrapper-tall">
                    <canvas id="agingChart"></canvas>
                </div>
                <div class="notification is-light is-danger is-paddingless p-3 mt-4 is-size-7" style="line-height: 1.6;">
                    📌 <strong>سیگنال مدیریتی:</strong> مبالغ انباشته شده در بخش <strong>بحرانی (قرمز)</strong> پتانسیل بالایی برای تبدیل شدن به سوخت سرمایه دارند.
                </div>
            </div>
        </div>

        <div class="column is-12-mobile is-5-desktop">
            <div class="box p-4 shadow-card h-100">
                <p class="title is-6 is-size-7-mobile pb-2 mb-4" style="border-bottom: 1px solid #f0f0f0;">
                    💳 آنالیز کانال‌های مالی ورودی نقدینگی
                </p>
                <div class="chart-wrapper-tall">
                    <canvas id="paymentMethodsChart"></canvas>
                </div>
            </div>
        </div>

        <div class="column is-12">
            <div class="box p-4 shadow-card">
                <p class="title is-6 is-size-7-mobile pb-2 mb-4" style="border-bottom: 1px solid #f0f0f0;">
                    📦 رادار هزینه‌های جانبی کالا (مقایسه آماری خروج گارانتی در برابر اشانتیون)
                </p>
                <div class="columns is-vcentered is-multiline">
                    <div class="column is-12-mobile is-7-desktop">
                        <div class="chart-wrapper-short">
                            <canvas id="inventoryLeakChart"></canvas>
                        </div>
                    </div>
                    <div class="column is-12-mobile is-5-desktop responsive-border-between">
                        <div class="px-3">
                            <h4 class="title is-7 mb-3 has-text-grey-dark">🔍 خلاصه وضعیت خروجی‌های غیردرآمدی انبار:</h4>
                            <div class="tags has-addons mb-2 is-justify-content-space-between-mobile">
                                <span class="tag is-warning is-light is-flex-grow-1-mobile">حجم کالای مصرفی در تعهدات گارانتی</span>
                                <span class="tag is-warning">{{ warranty_qty }} عدد</span>
                            </div>
                            <div class="tags has-addons mb-4 is-justify-content-space-between-mobile">
                                <span class="tag is-info is-light is-flex-grow-1-mobile">حجم کالای مصرفی در جوایز و اشانتیون</span>
                                <span class="tag is-info">{{ promotion_qty }} عدد</span>
                            </div>
                            <p class="is-size-7 has-text-grey" style="text-align: justify; line-height: 1.8;">
                                💡 <strong>راهبرد نظارتی انبار:</strong> نوسان شدید در این دو نمودار به مدیر کمک می‌کند تا متوجه افت کیفیت در محصولات تامین‌شده (جهش گارانتی) یا توزیع بی‌ضابطه و خارج از فاکتور توسط اپراتورها (جهش اشانتیون) شود.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================================= -->
    <!-- بخش سوم: کالبدشکافی ۳۶۰ درجه و سیستم جامع حسابرسی -->
    <!-- ========================================================= -->
    <div id="audit-section" class="columns is-multiline mt-5 mb-4">
        
        <div class="column is-12">
            <h3 class="title is-5 mb-2"><i class="fas fa-microscope has-text-primary mr-2"></i> سیستم حسابرسی و مغایرت‌گیری </h3>
            
            <!-- خلاصه تراز کل -->
            <div class="box p-3 has-background-light shadow-sm" style="border: 1px solid #e0e0e0;">
                <div class="columns is-mobile is-multiline has-text-centered is-size-7">
                    <div class="column is-4-tablet is-12-mobile">
                        <span class="has-text-grey">مجموع تراز دفتر کل:</span> <br>
                        <strong class="is-size-5 toCurrency">{{ global_mande }}</strong>
                    </div>
                    <div class="column is-4-tablet is-12-mobile" style="border-right: 1px solid #ddd; border-left: 1px solid #ddd;">
                        <span class="has-text-grey">مجموع چک‌ها/اسناد در سیستم:</span> <br>
                        <strong class="is-size-5 toCurrency has-text-success-dark">{{ g_sar }}</strong>
                    </div>
                    <div class="column is-4-tablet is-12-mobile">
                        <span class="has-text-grey">اختلاف ریاضی سیستم:</span> <br>
                        <strong class="is-size-5 toCurrency has-text-danger-dark" dir="ltr">{{ global_diff }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- 🔴 گروه اول: بدهکاران پرخطر -->
        <div class="column is-12">
            <div class="box p-4 shadow-card border-left-danger">
                <div class="level is-mobile is-flex-wrap-wrap mb-4 pb-2" style="border-bottom: 1px solid #fee2e2;">
                    <div class="level-left mb-2-mobile">
                        <p class="title is-6 is-size-7-mobile mb-0 has-text-danger-dark">
                            <span class="icon is-small ml-1"><i class="fas fa-exclamation-triangle"></i></span>
                            گروه ۱: مطالبات فاقد پوشش (کسری چک / بدهی خطرناک)
                        </p>
                    </div>
                    <div class="level-right">
                        <span class="tag is-danger is-light ml-2">مجموع کسر سند: <span class="toCurrency mr-1">{{ group1_total }}</span> تومان</span>
                        <span class="tag is-danger">تعداد: {{ group1_count }} نفر</span>
                    </div>
                </div>
                
                {% if group1_sample %}
                <div class="table-container">
                    <table class="table is-fullwidth is-hoverable is-striped is-bordered is-size-7">
                        <thead>
                            <tr class="has-background-danger-light">
                                <th class="has-text-centered">ردیف</th>
                                <th>نام مشتری</th>
                                <th>تراز دفتر کل (بدهی)</th>
                                <th>اسناد موجود</th>
                                <th class="has-text-danger-dark">مقدار کسر چک (بدهی روی هوا)</th>
                                <th class="has-text-centered">عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in group1_sample %}
                            <tr>
                                <td class="has-text-centered">{{ forloop.counter }}</td>
                                <td><strong>{{ c.name_family }}</strong></td>
                                <td class="toCurrency has-text-grey">{{ c.net_debt }}</td>
                                <td class="toCurrency has-text-success">{{ c.t_sarresid }}</td>
                                <td class="toCurrency has-text-danger has-text-weight-bold">{{ c.diff }}</td>
                                <td class="has-text-centered">
                                    <a href="{% url 'admin_panel:customer' c.id %}" target="_blank" class="button is-small is-light is-danger is-outlined rounded">ثبت چک/پیگیری</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if group1_count > 20 %}
                <p class="is-size-7 has-text-grey mt-2 has-text-centered">
                    * جهت جلوگیری از کندی سیستم، صرفاً ۲۰ مشتری با <strong>بیشترین بدهی رو هوا</strong> نمایش داده شده‌اند.
                </p>
                {% endif %}
                {% else %}
                <div class="notification is-success is-light has-text-centered py-4">
                    🎉 عالی! هیچ مشتری بدهکاری فاقد ثبت پوشش سند (کسری چک) در سیستم وجود ندارد.
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 🟡 گروه دوم: چک‌های اضافی و خطای اپراتور -->
        <div class="column is-12">
            <div class="box p-4 shadow-card border-left-warning">
                <div class="level is-mobile is-flex-wrap-wrap mb-4 pb-2" style="border-bottom: 1px solid #fff3c4;">
                    <div class="level-left mb-2-mobile">
                        <p class="title is-6 is-size-7-mobile mb-0 has-text-warning-dark">
                            <span class="icon is-small ml-1"><i class="fas fa-search-dollar"></i></span>
                            گروه ۲: خطای ثبتی اپراتورها (چک پاس‌نشده اضافی در سیستم)
                        </p>
                    </div>
                    <div class="level-right">
                        <span class="tag is-warning is-light ml-2">جمع خطای مالی: <span class="toCurrency mr-1">{{ group2_total }}</span> تومان</span>
                        <span class="tag is-warning">تعداد: {{ group2_count }} فقره</span>
                    </div>
                </div>
                
                <p class="is-size-7 has-text-grey-dark mb-3">
                    💡 <b>راهنما:</b> این افراد چک خود را نقدی یا کارت‌به‌کارت تسویه کرده‌اند، اما اپراتور فراموش کرده وضعیت چک را از "پرداخت‌نشده" به "پاس‌شده" تغییر دهد.
                </p>

                {% if group2_sample %}
                <div class="table-container">
                    <table class="table is-fullwidth is-hoverable is-striped is-bordered is-size-7">
                        <thead>
                            <tr class="has-background-warning-light">
                                <th class="has-text-centered">ردیف</th>
                                <th>نام مشتری</th>
                                <th>تراز واقعی مشتری</th>
                                <th>چک‌های ثبت‌شده (غلط)</th>
                                <th class="has-text-danger-dark">مبلغ چک اضافه در سیستم</th>
                                <th class="has-text-centered">عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in group2_sample %}
                            <tr>
                                <td class="has-text-centered">{{ forloop.counter }}</td>
                                <td><strong>{{ c.name_family }}</strong></td>
                                <td class="toCurrency has-text-info">{{ c.net_debt }}</td>
                                <td class="toCurrency has-text-grey">{{ c.t_sarresid }}</td>
                                <td class="toCurrency has-text-danger has-text-weight-bold">{{ c.fake_amount }}</td>
                                <td class="has-text-centered">
                                    <a href="{% url 'admin_panel:customer' c.id %}" target="_blank" class="button is-small is-light is-warning is-outlined rounded">اصلاح چک‌ها</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if group2_count > 20 %}
                <p class="is-size-7 has-text-grey mt-2 has-text-centered">
                    * جهت جلوگیری از کندی سیستم، صرفاً ۲۰ مشتری با <strong>بیشترین میزان خطای ثبتی</strong> نمایش داده شده‌اند.
                </p>
                {% endif %}
                {% else %}
                <div class="notification is-success is-light has-text-centered py-4">
                    🎉 عالی! هیچ چک اضافی یا پاس‌نشده‌ی اشتباهی در سیستم یافت نشد.
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 🟢 گروه سوم: پیش‌دریافت‌ها -->
        <div class="column is-12">
            <div class="box p-4 shadow-card border-left-success">
                <div class="level is-mobile is-flex-wrap-wrap mb-4 pb-2" style="border-bottom: 1px solid #d4edda;">
                    <div class="level-left mb-2-mobile">
                        <p class="title is-6 is-size-7-mobile mb-0 has-text-success-dark">
                            <span class="icon is-small ml-1"><i class="fas fa-hand-holding-usd"></i></span>
                            گروه ۳: پیش‌دریافت‌ها و بستانکاری‌های خالص (بدون چک)
                        </p>
                    </div>
                    <div class="level-right">
                        <span class="tag is-success is-light ml-2">مجموع تعهدات: <span class="toCurrency mr-1" dir="ltr">{{ group3_total }}</span> تومان</span>
                        <span class="tag is-success">تعداد: {{ group3_count }} نفر</span>
                    </div>
                </div>
                
                {% if group3_sample %}
                <div class="table-container">
                    <table class="table is-fullwidth is-hoverable is-striped is-bordered is-size-7">
                        <thead>
                            <tr class="has-background-success-light">
                                <th class="has-text-centered">ردیف</th>
                                <th>نام مشتری</th>
                                <th>شماره تماس</th>
                                <th class="has-text-success-dark">مبلغ بستانکاری (تراز منفی)</th>
                                <th class="has-text-centered">وضعیت چک</th>
                                <th class="has-text-centered">عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in group3_sample %}
                            <tr>
                                <td class="has-text-centered">{{ forloop.counter }}</td>
                                <td><strong>{{ c.name_family }}</strong></td>
                                <td><span dir="ltr">{{ c.phone1 }}</span></td>
                                <td class="toCurrency has-text-success-dark has-text-weight-bold" dir="ltr">{{ c.net_debt }}</td>
                                <td class="has-text-centered has-text-grey">ندارد</td>
                                <td class="has-text-centered">
                                    <a href="{% url 'admin_panel:customer' c.id %}" target="_blank" class="button is-small is-light is-success is-outlined rounded">بررسی پرونده</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if group3_count > 20 %}
                <p class="is-size-7 has-text-grey mt-2 has-text-centered">
                    * جهت جلوگیری از کندی سیستم، صرفاً ۲۰ مشتری بستانکار نمایش داده شده‌اند.
                </p>
                {% endif %}
                {% else %}
                <div class="notification is-light has-text-centered py-4">
                    هیچ پیش‌دریافت یا بستانکاری خالصی در سیستم یافت نشد.
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 🟣 گروه چهارم: رکوردهای نامتعارف -->
        {% if group4_count > 0 %}
        <div class="column is-12">
            <div class="box p-4 shadow-card" style="border-right: 4px solid #b86bff !important;">
                <div class="level is-mobile is-flex-wrap-wrap mb-4 pb-2" style="border-bottom: 1px solid #f3e8ff;">
                    <div class="level-left mb-2-mobile">
                        <p class="title is-6 is-size-7-mobile mb-0" style="color: #6b21a8;">
                            <span class="icon is-small ml-1"><i class="fas fa-bug"></i></span>
                            گروه ۴: رکوردهای نامتعارف (بستانکارانی که چک پرداخت‌نشده دارند!)
                        </p>
                    </div>
                    <div class="level-right">
                        <span class="tag is-light ml-2" style="background-color: #f3e8ff; color: #6b21a8;">مجموع اختلاف: <span class="toCurrency mr-1" dir="ltr">{{ group4_total }}</span></span>
                        <span class="tag" style="background-color: #b86bff; color: white;">تعداد: {{ group4_count }} مورد</span>
                    </div>
                </div>

                <p class="is-size-7 has-text-grey-dark mb-3">
                    💡 <b>توجه:</b> این مشتریان در دفتر کل طلبکارند، اما اپراتور چک پرداخت‌نشده‌ای هم از آن‌ها نگه داشته است! (نیاز به بررسی حسابداری دارد).
                </p>
                
                <div class="table-container">
                    <table class="table is-fullwidth is-hoverable is-striped is-bordered is-size-7">
                        <thead>
                            <tr style="background-color: #faf5ff;">
                                <th class="has-text-centered">ردیف</th>
                                <th>نام مشتری</th>
                                <th>تراز واقعی (بستانکار)</th>
                                <th>چک ثبت‌شده</th>
                                <th class="has-text-centered">عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for c in group4_sample %}
                            <tr>
                                <td class="has-text-centered">{{ forloop.counter }}</td>
                                <td><strong>{{ c.name_family }}</strong></td>
                                <td class="toCurrency has-text-success-dark" dir="ltr">{{ c.net_debt }}</td>
                                <td class="toCurrency has-text-danger">{{ c.t_sarresid }}</td>
                                <td class="has-text-centered">
                                    <a href="{% url 'admin_panel:customer' c.id %}" target="_blank" class="button is-small is-light is-outlined rounded" style="border-color: #b86bff; color: #b86bff;">بررسی فنی</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}

    </div>

</div>

<style>
    /* استایل‌های پایه کارت‌ها */
    .shadow-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); border: 1px solid #f0f0f0; border-radius: 8px; }
    .border-left-danger { border-right: 4px solid #f14668 !important; }
    .border-left-success { border-right: 4px solid #48c78e !important; }
    .border-left-info { border-right: 4px solid #3e8ed0 !important; }
    .border-left-warning { border-right: 4px solid #ffdd57 !important; }
    .bg-light-filter { background-color: #fafafa; border-radius: 6px; }
    .h-100 { height: 100%; }
    .w-100 { width: 100%; }

    /* کانتینرهای ریسپانسیو برای نمودارها */
    .chart-wrapper-tall { position: relative; height: 320px; width: 100%; }
    .chart-wrapper-medium { position: relative; height: 280px; width: 100%; }
    .chart-wrapper-short { position: relative; height: 220px; width: 100%; }

    /* کلاس سفارشی برای جداکننده خطی بین متن و نمودار انبار */
    .responsive-border-between {
        border-right: 1px solid #f0f0f0;
    }

    /* مدیا کوئری اختصاصی برای موبایل و تبلت‌های کوچک */
    @media screen and (max-width: 1023px) {
        .responsive-border-between {
            border-right: none;
            border-top: 1px solid #f0f0f0;
            padding-top: 1.5rem !important;
            margin-top: 1rem;
        }
        .chart-wrapper-tall { height: 260px; }
        .chart-wrapper-medium { height: 240px; }
        .chart-wrapper-short { height: 200px; }
        .mb-2-mobile { margin-bottom: 0.5rem !important; }
        .is-flex-grow-1-mobile { flex-grow: 1; text-align: right; }
    }
</style>
{% endblock %}

{% block jsEnd %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    $(document).ready(function() {
        // ۱. پیاده‌سازی موتور تقویم جلالی
        var pickerAz = $(".date-picker-az").pDatepicker({
            altField: '#azTarikhAlt',
            initialValue: false,
            autoClose: true,
            format: 'YYYY/MM/DD',
            calendar: { persian: { locale: 'fa' } },
            responsive: true 
        });

        var pickerTa = $(".date-picker-ta").pDatepicker({
            altField: '#taTarikhAlt',
            initialValue: false,
            autoClose: true,
            format: 'YYYY/MM/DD',
            calendar: { persian: { locale: 'fa' } },
            responsive: true
        });

        {% if filters.azTarikh %} pickerAz.setDate({{ filters.azTarikh }}); {% endif %}
        {% if filters.taTarikh %} pickerTa.setDate({{ filters.taTarikh }}); {% endif %}

        // نمودار روند خطی
        var ctxTrend = document.getElementById('debtTrendChart').getContext('2d');
        var gradientTrend = ctxTrend.createLinearGradient(0, 0, 0, 300);
        gradientTrend.addColorStop(0, 'rgba(62, 142, 208, 0.45)');
        gradientTrend.addColorStop(1, 'rgba(62, 142, 208, 0.0)');

        new Chart(ctxTrend, {
            type: 'line',
            data: {
                labels: {{ trend_labels|safe }},
                datasets: [{
                    label: 'جمع کل بدهی (ریال)',
                    data: {{ trend_data|safe }},
                    backgroundColor: gradientTrend,
                    borderColor: '#3e8ed0', 
                    borderWidth: 2.5,
                    pointBackgroundColor: '#ffffff',
                    pointBorderColor: '#3e8ed0',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    fill: true,
                    tension: 0.35 
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { 
                    legend: { display: false },
                    tooltip: {
                        titleFont: { family: 'Tahoma, Vazir', size: 12 },
                        bodyFont: { family: 'Tahoma, Vazir', size: 12 },
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) { label += ': '; }
                                if (context.parsed.y !== null) {
                                    label += new Intl.NumberFormat('fa-IR').format(context.parsed.y);
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: { beginAtZero: true, ticks: { font: { family: 'Tahoma, Vazir', size: 10 } } },
                    x: { ticks: { font: { family: 'Tahoma, Vazir', size: 10 }, maxRotation: 45, minRotation: 0 }, grid: { display: false } }
                },
                interaction: { intersect: false, mode: 'index' },
            }
        });

        // نمودار سنی مطالبات
        var ctxAging = document.getElementById('agingChart').getContext('2d');
        new Chart(ctxAging, {
            type: 'bar',
            data: {
                labels: ['سررسید آینده', 'تاخیر ناچیز', 'تاخیر پرخطر', 'بحرانی'],
                datasets: [{
                    data: {{ aging_data|safe }},
                    backgroundColor: ['rgba(72, 199, 142, 0.85)', 'rgba(255, 221, 87, 0.85)', 'rgba(241, 70, 104, 0.5)', 'rgba(241, 70, 104, 0.95)'],
                    borderColor: ['#48c78e', '#ffdd57', '#f14668', '#f14668'],
                    borderWidth: 1.5,
                    barThickness: 30 
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, ticks: { font: { family: 'Tahoma, Vazir', size: 10 } } },
                    x: { ticks: { font: { family: 'Tahoma, Vazir', size: 10 } } }
                }
            }
        });

        // نمودار دایره‌ای تسویه مبالغ
        var ctxPay = document.getElementById('paymentMethodsChart').getContext('2d');
        new Chart(ctxPay, {
            type: 'doughnut',
            data: {
                labels: {{ pay_labels|safe }},
                datasets: [{
                    data: {{ pay_data|safe }},
                    backgroundColor: ['#485fc7', '#48c78e', '#ffdd57', '#f14668', '#3e8ed0', '#7a7a7a'],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { 
                        position: window.innerWidth < 768 ? 'bottom' : 'right', 
                        labels: { font: { family: 'Tahoma, Vazir', size: 11 }, boxWidth: 12 } 
                    }
                }
            }
        });

        // نمودار افقی انبار
        var ctxLeak = document.getElementById('inventoryLeakChart').getContext('2d');
        new Chart(ctxLeak, {
            type: 'bar',
            data: {
                labels: ['گارانتی', 'اشانتیون'],
                datasets: [{
                    data: [{{ warranty_qty }}, {{ promotion_qty }}],
                    backgroundColor: ['rgba(255, 221, 87, 0.8)', 'rgba(62, 142, 208, 0.8)'],
                    borderColor: ['#ffdd57', '#3e8ed0'],
                    borderWidth: 1.2,
                    barThickness: 25
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { beginAtZero: true, ticks: { font: { family: 'Tahoma, Vazir', size: 10 } } },
                    y: { ticks: { font: { family: 'Tahoma, Vazir', size: 10 } } }
                }
            }
        });
        
        // اسکرول نرم برای لینک‌های درون صفحه
        $('a[href^="#"]').on('click', function(event) {
            var target = $(this.getAttribute('href'));
            if( target.length ) {
                event.preventDefault();
                $('html, body').stop().animate({
                    scrollTop: target.offset().top - 20
                }, 800);
            }
        });
    });
</script>
{% endblock %}