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

{% 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 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">مانیتورینگ بازخوردها و پیگیری مشتریان ناراضی جهت جلب رضایت مجدد</p>
        </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-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 has-text-success-dark">{{ total_surveys }} <span class="is-size-6">مورد</span></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">{{ avg_grade }} <span class="is-size-6">از ۲۰</span></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-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 has-text-danger-dark">{{ unhappy_count }} <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-mobile is-4-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>
                {% if has_chart_data %}
                <div class="chart-wrapper-medium">
                    <canvas id="satisfactionChart"></canvas>
                </div>
                {% else %}
                <div class="notification is-light has-text-centered my-5 is-size-7">
                    هنوز داده‌ای برای رسم نمودار رضایت‌مندی ثبت نشده است.
                </div>
                {% endif %}
            </div>
        </div>

        <div class="column is-12-mobile is-8-desktop">
            <div class="box p-4 shadow-card h-100">
                <p class="title is-6 is-size-7-mobile pb-2 mb-4 has-text-danger-dark" style="border-bottom: 1px solid #f0f0f0;">
                    📞 لیست پیگیری و جلب رضایت (امتیاز ضعیف و بد)
                </p>
                
                {% if not low_score_actions %}
                <div class="notification is-success is-light has-text-centered mt-5">
                    خوشبختانه در حال حاضر هیچ مشتری ناراضی برای پیگیری وجود ندارد.
                </div>
                {% endif %}

                <div class="table-container" style="max-height: 400px; overflow-y: auto;">
                    <table class="table is-fullwidth is-hoverable is-striped">
                        <thead>
                            <tr>
                                <th>مشتری</th>
                                <th>توضیحات نظرسنجی قبلی</th>
                                <th>امتیاز</th>
                                <th>تاریخ ثبت</th>
                                <th>عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for action in low_score_actions %}
                            <tr>
                                <td class="is-vcentered">
                                    <a href="{% url 'admin_panel:customerNew' action.customer.id %}" target="_blank">
                                        {{ action.customer.name_family }}
                                    </a>
                                </td>
                                <td class="is-vcentered is-size-7" style="max-width: 250px; white-space: normal;">
                                    {{ action.nazar|default:"-" }}
                                </td>
                                <td class="is-vcentered">
                                    {% if action.grade == 15 %}
                                    <span class="tag is-info is-light">متوسط (۱۵)</span>
                                    {% elif action.grade == 10 %}
                                    <span class="tag is-warning is-light">ضعیف (۱۰)</span>
                                    {% elif action.grade == 5 %}
                                    <span class="tag is-danger is-light">بد (۵)</span>
                                    {% else %}
                                    <span class="tag is-info is-light">{{ action.grade }}</span>
                                    {% endif %}
                                </td>
                                <td class="is-vcentered is-size-7 ss02">
                                    {{ action.nazarDT|toJalali }}
                                </td>
                                <td class="is-vcentered">
                                    <button class="button is-small is-info is-outlined actionBoxOpenB" 
                                            action_id="{{ action.id }}" 
                                            customer_id="{{ action.customer.id }}">
                                        تماس و بروزرسانی
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<form id="ActionBox" class="modal" method="post" action="">
    {% csrf_token %}
    <div class="modal-background closeActionBox"></div>
    <div class="modal-card">
        <header class="modal-card-head has-background-info-light">
            <p class="modal-card-title is-size-5 has-text-info-dark">بروزرسانی فرم رضایت‌مندی</p>
            <button type="button" class="delete closeActionBox" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="columns is-mobile is-multiline">
                
                <div class="field column is-12-desktop is-12-mobile m-0 pb-4" style="border-bottom: 1px dashed #ddd;">
                    <div class="control" id="customerData">
                        <p class="has-text-centered is-size-6 has-text-grey mb-2">در حال تماس با:</p>
                        <p id="csName" class="has-text-centered is-size-4 has-text-weight-bold mb-3"></p>
                        <p class="has-text-centered is-size-5 csphones">
                            <span id="csphone1" class="is-hidden hidephone tag is-medium is-success is-light mx-1"></span>
                            <span id="csphone2" class="is-hidden hidephone tag is-medium is-success is-light mx-1"></span>
                            <span id="csphone3" class="is-hidden hidephone tag is-medium is-success is-light mx-1"></span>
                        </p>
                    </div>
                </div>

                <div class="field column is-12-desktop is-12-mobile mt-4 m-0">
                    <div class="control">
                        <label class="label mb-1">نتیجه تماس و نظر جدید مشتری:</label>
                        <p class="is-size-7 has-text-grey mb-2">توضیحات و دلایل تغییر نظر مشتری را اینجا ثبت کنید.</p>
                        <textarea id="csDesc" required name="csDesc" class="textarea" placeholder="پس از تماس و پیگیری، مشکل برطرف شد و مشتری اعلام رضایت کرد..."></textarea>
                    </div>
                </div>
        
                <div class="field column is-12-desktop is-12-mobile m-0">
                    <label class="label">امتیاز مشتری</label>
                    <div class="control">
                        <div class="select" style="width: 100%;">
                            <select id="csGrade" required name="csGrade" style="width: 100%;">
                                <option value="">انتخاب کنید</option>
                                <option value="20">عالی</option>
                                <option value="15">متوسط</option>
                                <option value="10">ضعیف</option>
                                <option value="5">بد</option>
                                <option value="-1">عدم موفقیت در انجام نظرسنجی (تعویق ۳ روز)</option>
                                <option value="-2">کنسل کردن این نظرسنجی</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <footer class="modal-card-foot">
            <span class="button closeActionBox">انصراف</span>
            <input type="submit" class="button is-success" value="ثبت نتیجه جدید"/>
        </footer>
    </div>
</form>

<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; }
    .h-100 { height: 100%; }
    .chart-wrapper-medium { position: relative; height: 280px; width: 100%; }
</style>
{% endblock %}

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

<script>
$(document).ready(function() {
    
    // ۱. مقداردهی و رسم نمودار دایره‌ای Chart.js
    {% if has_chart_data %}
    var ctxChart = document.getElementById('satisfactionChart').getContext('2d');
    new Chart(ctxChart, {
        type: 'doughnut',
        data: {
            labels: {{ chart_labels_json|safe }},
            datasets: [{
                data: {{ chart_data_json|safe }},
                backgroundColor: ['#48c78e', '#3e8ed0', '#ffdd57', '#f14668'],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { 
                    position: 'bottom',
                    labels: { font: { family: 'Tahoma, Vazir', size: 12 } } 
                }
            }
        }
    });
    {% endif %}

    // ۲. بستن مدال
    $(".closeActionBox").click(function(){
        $("#ActionBox").removeClass("is-active");
    });

    // ۳. باز کردن مدال و بارگذاری اطلاعات مشتری و اقدام
    $(".actionBoxOpenB").click(function(){
        // ریست کردن بخش تلفن‌ها و ورودی‌ها
        $(".hidephone").addClass("is-hidden").html('');
        $("#csDesc").val("");
        $("#csGrade").val("");
        
        var action_id = $(this).attr("action_id");
        var customer_id = $(this).attr("customer_id");
        
        // تنظیم آدرس ارسال فرم اکشن
        var actionEditUrl = "{% url 'admin_panel:rezayatEdit' 2222 %}";
        actionEditUrl = actionEditUrl.replace('2222', action_id);
        $("#ActionBox").prop("action", actionEditUrl);
        
        // دریافت مشخصات مشتری
        $.getJSON('/panel/CustomerJson/' + customer_id, function(data) {
            var CustomerParseData = JSON.parse(data);
            $("#csName").html(CustomerParseData[0]['fields']['name_family']);
            var csphone1 = CustomerParseData[0]['fields']['phone1'];
            var csphone2 = CustomerParseData[0]['fields']['phone2'];
            var csphone3 = CustomerParseData[0]['fields']['phone3'];

            if(csphone1 && csphone1.length > 4){
                $("#csphone1").html('<a href="tel:' + csphone1 + '">' + csphone1 + '</a>').removeClass("is-hidden");
            }
            if(csphone2 && csphone2.length > 4){
                $("#csphone2").html('<a href="tel:' + csphone2 + '">' + csphone2 + '</a>').removeClass("is-hidden");
            }
            if(csphone3 && csphone3.length > 4){
                $("#csphone3").html('<a href="tel:' + csphone3 + '">' + csphone3 + '</a>').removeClass("is-hidden");
            }
        });

        // دریافت رکورد نظرسنجی قبلی
        $.getJSON('/panel/ActionJson/' + action_id, function(data) {
            var ActionParseData = JSON.parse(data);
            var previousComment = ActionParseData[0]['fields']['nazar'];
            if(previousComment) {
                $("#csDesc").val("نظر قبلی مشتری: " + previousComment + "\n\n--- نتیجه پیگیری جدید ---\n");
            }
            $("#ActionBox").addClass("is-active");
        });
    });

});
</script>
{% endblock %}