{% extends 'doctor/base.html' %}
{% load static %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.analyze %} class="active" {% endblock %}

{% block content %}
    <div class="content">
        <!-- Existing sections unchanged -->
        <div class="row text-center align-items-center">
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget" style="border-radius: 15px;">
                    <span class="dash-widget-bg1"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3 style="margin-right: 40px">{{ number_of_assistant }}</h3>
                        <span class="widget-title1">دستیاران<i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-9 col-xl-9">
                <div class="card" style="border-radius: 20px">
                    <div class="card-body">
                        <div class="chart-title text-center">
                            <h4 style="color: #009A6E">نمودار امتیازها</h4>
                        </div>
                        <canvas id="assistant_points_chart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-box mb-0" style="border-radius: 20px">
                    <div class="card-header bg-white">
                        <h4 class="card-title mb-0 text-right titles" style="color: #009A6E">دستیاران</h4>
                    </div>
                    <div class="card-body scrollable">
                        <ul class="contact-list">
                            {% for u in assistant %}
                            <li>
                                <div class="contact-cont">
                                    <div class="float-left user-img m-r-10">
                                        <a href="#" title={{u.first_name}} class="avatar"><img src="{{ u.image.url }}"
                                                                                               alt=""
                                                                                               style="width: 40px; height: 50px"></a>
                                    </div>
                                    <div class="contact-info">
                                        <span class="contact-name">{{ u.first_name }}</span>
                                        <span class="contact-name">{{ u.last_name }}</span>
                                        <span class="contact-date text-ellipsis">{{ u.last_login }}</span>
                                    </div>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-6 col-xl-6">
                <div class="card" style="border-radius: 20px;">
                    <div class="card-body">
                        <div class="chart-title text-center">
                            <h4 style="color: #009A6E">فعالیت مربی ها</h4>
                        </div>
                        <canvas id="assistant_data"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-0" style="border-radius: 20px;">
                    <div class="card-header text-right">
                        <h4 class="card-title d-inline-block" style="color: #009A6E">جلسات پیش رو</h4> <a href="/panel/doctor/appointments/" style="border-radius: 15px" class="btn btn-primary float-left">ثبت زمان آزاد</a>
                    </div>
                    <div class="card-body p-0 scrollable2">
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <tbody>
                                    {% for session in upcoming %}
                                        <tr>
                                            <td>
                                                <img width="28" height="28" src="{% static 'panel/doctor' %}/img/user.jpg" class="rounded-circle m-r-5" alt="">
                                                {% if number != 0 %}
                                                    <span class="badge badge-pill bg-success float-left">{{ number }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <h5 class="time-title p-0 text-right">مربی</h5>
                                                <p class="text-right">{{ session.therapist.first_name }}{{ session.therapist.last_name}}</p>
                                            </td>
                                            <td>
                                                <h5 class="time-title p-0 text-right">جلسه با</h5>
                                                <p class="text-right">{{ session.patient.profile.first_name }} {{ session.patient.profile.last_name }}</p>
                                            </td>
                                            <td>
                                                <h5 class="time-title p-0 text-right">زمان برگزاری</h5>
                                                <p class="text-right">{{ session.start_time }}</p>
                                            </td>
                                            <td class="text-right">
                                                {% if session.appointment_link %}
                                                    <a href="{{ session.appointment_link }}" class="btn btn-outline-primary take-btn">پیوستن به جلسه</a>
                                                {% else %}
                                                    <a href="#" class="btn btn-outline-primary take-btn">لینک جلسه مشخص نشده است</a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-9 col-xl-9">
                <div class="card" style="border-radius: 20px">
                    <div class="card-body">
                        <div class="chart-title text-center">
                            <h4 style="color: #009A6E">پیام‌های ارسالی و دریافتی مربی‌ها (۷ روز اخیر)</h4>
                        </div>
                        <canvas id="assistantMessagesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-9 col-xl-9">
                <div class="card" style="border-radius: 20px">
                    <div class="card-body">
                        <div class="chart-title text-center">
                            <h4 style="color: #009A6E">نمودار رژیم ها</h4>
                        </div>
                        <canvas id="dietActivityChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-9 col-xl-9">
                <div class="card" style="border-radius: 20px">
                    <div class="card-body">
                        <div class="chart-title text-center">
                            <h4 style="color: #009A6E">میانگین تغییرات وزن کاربران مربی‌ها</h4>
                        </div>
                        <canvas id="assistantWeightChangesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>

    <style>
        .titles { text-align: right; font-size: 24px; margin-bottom: 10px; color: #009A6E; }
        .btn-chat { background-color: #009A6E; border-color: #009A6E; color: #fff; padding: 10px 20px; border-radius: 10px; text-decoration: none; transition: background-color 0.3s ease; display: inline-flex; align-items: center; }
        .btn-chat:hover, .btn-chat:focus { background-color: #009A6Eda; color: #fff; }
        body { background-color: #e3e4e7; }
        .text-center { text-align: center; }
        .align-items-center { display: flex; align-items: center; justify-content: center; }
        .scrollable { height: 570px; overflow-y: auto; overflow-x: hidden; }
        .scrollable2 { height: 400px; overflow-y: auto; overflow-x: hidden; }
    </style>
{% endblock %}

{% block script %}
    <script>
    window.CSRF_TOKEN = "{{ csrf_token }}";
    </script>
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/Chart.bundle.js"></script>
    <script src="{% static 'panel/doctor' %}/js/chart.js"></script>
    <script src="{% static 'panel/doctor/js/app.js' %}"></script>
    <script src="{% static 'panel/doctor/js/dashboard.js' %}"></script>

    <!-- Assistant Activity Chart -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/panel/doctor/get/assistant/activity/')
                .then(response => response.json())
                .then(data => {
                    var ctx = document.getElementById('assistant_data').getContext('2d');
                    var predefinedColors = ['#009A6E', '#FF5733', '#ffb1b1', '#3357FF', '#FF33A1', '#2ac0b7', '#8D33FF', '#FF8D33', '#33A1FF', '#A1FF33', '#FF338D', '#FFA133', '#8576ff', '#1679ab', '#FF3357'];
                    var labels = Array.from({length: 7}, (_, i) => {
                        var date = new Date();
                        date.setDate(date.getDate() - i);
                        return date.toISOString().split('T')[0];
                    }).reverse();
                    var datasets = [];
                    var index = 0;

                    for (var assistantName in data) {
                        if (data.hasOwnProperty(assistantName)) {
                            var viewCounts = Array(7).fill(0);
                            data[assistantName].forEach(entry => {
                                var dateIndex = labels.indexOf(entry.date);
                                if (dateIndex !== -1) viewCounts[dateIndex] = entry.viewChatPage;
                            });
                            var color = predefinedColors[index % predefinedColors.length];
                            datasets.push({
                                label: assistantName,
                                data: viewCounts,
                                backgroundColor: color,
                                borderColor: color,
                                borderWidth: 1,
                                hoverBackgroundColor: color,
                                hoverBorderColor: color
                            });
                            index++;
                        }
                    }

                    new Chart(ctx, {
                        type: 'bar',
                        data: { labels: labels, datasets: datasets },
                        options: {
                            responsive: true,
                            scales: { y: { beginAtZero: true, ticks: { stepSize: 1, precision: 0 } } }
                        }
                    });
                })
                .catch(error => console.error('Error fetching assistant activity data:', error));
        });
    </script>

    <!-- Assistant Points Chart -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/panel/doctor/get/assistant/points/data/')
                .then(response => response.json())
                .then(data => {
                    var ctx = document.getElementById('assistant_points_chart').getContext('2d');
                    var predefinedColors = ['#009A6E', '#FF5733', '#8576ff', '#3357FF', '#FF33A1', '#33FFF3', '#8D33FF', '#FF8D33', '#33A1FF', '#A1FF33', '#FF338D', '#FFA133', '#ffcbcb', '#7bc9ff', '#FF3357'];
                    var datasets = data.assistants_data.map((assistant, index) => {
                        var color = predefinedColors[index % predefinedColors.length];
                        return {
                            label: assistant.name,
                            data: assistant.points_last_30_days.map(entry => entry.points),
                            fill: false,
                            borderColor: color,
                            backgroundColor: color,
                            tension: 0.1
                        };
                    });
                    var labels = Array.from({length: 30}, (_, i) => {
                        var date = new Date();
                        date.setDate(date.getDate() - (29 - i));
                        return date.toISOString().split('T')[0];
                    });

                    new Chart(ctx, {
                        type: 'line',
                        data: { labels: labels, datasets: datasets },
                        options: {
                            responsive: true,
                            scales: {
                                y: { beginAtZero: true, ticks: { stepSize: 1, precision: 0 } },
                                x: { type: 'time', time: { unit: 'day', tooltipFormat: 'MMM DD', displayFormats: { day: 'MMM DD' } } }
                            }
                        }
                    });
                })
                .catch(error => console.error('Error fetching assistants points data:', error));
        });
    </script>

    <!-- Diet Activity Chart -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/panel/doctor/get/diet/activity/')
                .then(response => response.json())
                .then(data => {
                    var ctx = document.getElementById('dietActivityChart').getContext('2d');
                    var colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#33FFF3', '#8D33FF', '#FF8D33', '#33A1FF', '#A1FF33', '#FF338D'];
                    var labels = ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
                    var datasets = [];
                    var index = 0;

                    for (var creatorName in data) {
                        if (data.hasOwnProperty(creatorName)) {
                            var activityCounts = labels.map(day => data[creatorName][day]);
                            var color = colors[index % colors.length];
                            datasets.push({
                                label: creatorName,
                                data: activityCounts,
                                backgroundColor: color,
                                borderColor: color,
                                borderWidth: 1
                            });
                            index++;
                        }
                    }

                    new Chart(ctx, {
                        type: 'bar',
                        data: { labels: labels, datasets: datasets },
                        options: {
                            responsive: true,
                            scales: { y: { beginAtZero: true, ticks: { stepSize: 1, precision: 0 } } }
                        }
                    });
                })
                .catch(error => console.error('Error fetching diet activity data:', error));
        });
    </script>

    <!-- Assistant Messages Chart -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/panel/doctor/get/assistant/messages/')
                .then(response => response.json())
                .then(data => {
                    var ctx = document.getElementById('assistantMessagesChart').getContext('2d');
                    var labels = Object.values(data)[0].map(entry => entry.date);
                    var datasets = [];

                    for (var assistantName in data) {
                        if (data.hasOwnProperty(assistantName)) {
                            datasets.push({
                                label: `${assistantName} - ارسالی`,
                                data: data[assistantName].map(entry => entry.sent),
                                backgroundColor: '#009A6E',
                                borderColor: '#009A6E',
                                borderWidth: 1
                            });
                            datasets.push({
                                label: `${assistantName} - دریافتی`,
                                data: data[assistantName].map(entry => entry.received),
                                backgroundColor: '#FF5733',
                                borderColor: '#FF5733',
                                borderWidth: 1
                            });
                        }
                    }

                    new Chart(ctx, {
                        type: 'bar',
                        data: { labels: labels, datasets: datasets },
                        options: {
                            responsive: true,
                            scales: {
                                y: { beginAtZero: true, ticks: { stepSize: 1, precision: 0 } },
                                x: { title: { display: true, text: 'تاریخ (هجری شمسی)' } }
                            },
                            plugins: { legend: { position: 'top' }, title: { display: false } }
                        }
                    });
                })
                .catch(error => console.error('Error fetching assistant messages data:', error));
        });
    </script>

    <!-- Weight Changes Chart -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/panel/doctor/get/assistant/weight/changes/')
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        console.error('Error fetching weight changes:', data.error);
                        return;
                    }

                    const labels = Object.keys(data);
                    const gainData = labels.map(label => data[label].gain);
                    const lossData = labels.map(label => data[label].loss);

                    const gainColors = gainData.map(value => value >= 0 ? '#28a745' : '#dc3545');  // Green if positive, red if negative
                    const lossColors = lossData.map(value => value <= 0 ? '#28a745' : '#dc3545');  // Green if negative, red if positive

                    new Chart(document.getElementById('assistantWeightChangesChart').getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: labels,
                            datasets: [
                                { label: 'افزایش وزن (هدف)', data: gainData, backgroundColor: gainColors, borderColor: gainColors, borderWidth: 1 },
                                { label: 'کاهش وزن (هدف)', data: lossData, backgroundColor: lossColors, borderColor: lossColors, borderWidth: 1 }
                            ]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: { title: { display: true, text: 'تغییر وزن (کیلوگرم)' }, ticks: { callback: value => value + ' کیلوگرم' } },
                                x: { title: { display: true, text: 'نام مربی' } }
                            },
                            plugins: {
                                legend: { display: true, position: 'top' },
                                tooltip: { callbacks: { label: context => `${context.dataset.label}: ${context.raw > 0 ? '+' : ''}${context.raw} کیلوگرم` } }
                            }
                        }
                    });
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
{% endblock %}