{% 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>

    <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-danger 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-danger-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-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">حجم ناخالص فروش در بازه انتخابی</p>
                            <p class="title is-size-4 is-size-5-mobile toCurrency has-text-success-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-white shadow-card border-left-warning 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 has-text-warning-dark">{{ kpi_overdue_checks }} <span class="is-size-6">فقره</span></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>

<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-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 } } }
                }
            }
        });
    });
</script>
{% endblock %}