{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}
{% load panel_extras %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.purchased_sessions %} class="active" {% endblock %}

{% block content %}
<div class="content">
    <!-- Flash Messages -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            </div>
        {% endfor %}
    {% endif %}
    
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ total_sessions }}</h4>
                            <p class="card-text">{% trans "کل جلسات" %}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-calendar fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ upcoming_count }}</h4>
                            <p class="card-text">{% trans "جلسات آینده" %}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-clock-o fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ completed_count }}</h4>
                            <p class="card-text">{% trans "جلسات تکمیل شده" %}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upcoming Sessions -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{% trans "جلسات آینده" %}</h4>
                    <p class="card-category">{% trans "جلساتی که در 7 روز آینده برگزار می‌شوند" %}</p>
                </div>
                <div class="card-body">
                    {% if upcoming_sessions %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>{% trans "تاریخ و زمان" %}</th>
                                        <th>{% trans "بیمار" %}</th>
                                        <th>{% trans "شماره تماس" %}</th>
                                        <th>{% trans "نوع پرداخت" %}</th>
                                        <th>{% trans "لینک تماس" %}</th>
                                        <th>{% trans "عملیات" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for session in upcoming_sessions %}
                                    <tr>
                                        <td>
                                            <strong>{{ session.time_slot.start_time|date:"Y/m/d" }}</strong><br>
                                            <small>{{ session.time_slot.start_time|time:"H:i" }} - {{ session.time_slot.start_time|add_minutes:session.time_slot.duration|time:"H:i" }}</small>
                                        </td>
                                        <td>
                                            <strong>{{ session.user.profile.first_name }} {{ session.user.profile.last_name }}</strong>
                                        </td>
                                        <td>{{ session.user.phone_number }}</td>
                                        <td>
                                            {% if session.payment_type == 'coin' %}
                                                <span class="badge badge-warning">{% trans "کوین" %} ({{ session.coin_amount }})</span>
                                            {% else %}
                                                <span class="badge badge-success">{% trans "پول" %} ({{ session.money_amount|floatformat:0 }} تومان)</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if session.time_slot.appointment_link %}
                                                <span class="badge badge-success">{% trans "تنظیم شده" %}</span>
                                                <br><small><a href="{{ session.time_slot.appointment_link }}" target="_blank" class="text-info">{% trans "مشاهده لینک" %}</a></small>
                                            {% else %}
                                                <span class="badge badge-secondary">{% trans "تنظیم نشده" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-info btn-sm" onclick="openCallLinkModal({{ session.id }}, '{{ session.user.profile.first_name }} {{ session.user.profile.last_name }}')">
                                                    <i class="fa fa-video-camera"></i> {% trans "تنظیم لینک تماس" %}
                                                </button>
                                                <a href="{% url 'panel-assistant-show-patient' session.user.id %}" class="btn btn-primary btn-sm">
                                                    <i class="fa fa-user"></i> {% trans "پروفایل" %}
                                                </a>
                                                <form method="POST" action="{% url 'panel-assistant-complete-session' session.id %}" style="display: inline;">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('آیا از تکمیل این جلسه اطمینان دارید؟')">
                                                        <i class="fa fa-check"></i> {% trans "تکمیل" %}
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{% trans "هیچ جلسه‌ای در 7 روز آینده ندارید" %}</h5>
                            <p class="text-muted">{% trans "جلسات جدید در اینجا نمایش داده می‌شوند" %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- All Assigned Sessions -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{% trans "همه جلسات تخصیص داده شده" %}</h4>
                    <p class="card-category">{% trans "تمام جلساتی که به شما تخصیص داده شده‌اند" %}</p>
                </div>
                <div class="card-body">
                    {% if assigned_sessions %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>{% trans "تاریخ و زمان" %}</th>
                                        <th>{% trans "بیمار" %}</th>
                                        <th>{% trans "وضعیت" %}</th>
                                        <th>{% trans "نوع پرداخت" %}</th>
                                        <th>{% trans "لینک تماس" %}</th>
                                        <th>{% trans "تاریخ تخصیص" %}</th>
                                        <th>{% trans "عملیات" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for session in assigned_sessions %}
                                    <tr>
                                        <td>
                                            <strong>{{ session.time_slot.start_time|date:"Y/m/d" }}</strong><br>
                                            <small>{{ session.time_slot.start_time|time:"H:i" }} - {{ session.time_slot.start_time|add_minutes:session.time_slot.duration|time:"H:i" }}</small>
                                        </td>
                                        <td>
                                            <strong>{{ session.user.profile.first_name }} {{ session.user.profile.last_name }}</strong>
                                        </td>
                                        <td>
                                            {% if session.status == 'assigned' %}
                                                <span class="badge badge-warning">{% trans "تخصیص داده شده" %}</span>
                                            {% elif session.status == 'completed' %}
                                                <span class="badge badge-success">{% trans "تکمیل شده" %}</span>
                                            {% else %}
                                                <span class="badge badge-secondary">{{ session.status }}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if session.payment_type == 'coin' %}
                                                <span class="badge badge-warning">{% trans "کوین" %} ({{ session.coin_amount }})</span>
                                            {% else %}
                                                <span class="badge badge-success">{% trans "پول" %} ({{ session.money_amount|floatformat:0 }} تومان)</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if session.time_slot.appointment_link %}
                                                <span class="badge badge-success">{% trans "تنظیم شده" %}</span>
                                                <br><small><a href="{{ session.time_slot.appointment_link }}" target="_blank" class="text-info">{% trans "مشاهده لینک" %}</a></small>
                                            {% else %}
                                                <span class="badge badge-secondary">{% trans "تنظیم نشده" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if session.assigned_date %}
                                                {{ session.assigned_date|date:"Y/m/d H:i" }}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-info btn-sm" onclick="openCallLinkModal({{ session.id }}, '{{ session.user.profile.first_name }} {{ session.user.profile.last_name }}')">
                                                    <i class="fa fa-video-camera"></i> {% trans "تنظیم لینک تماس" %}
                                                </button>
                                                <a href="{% url 'panel-assistant-show-patient' session.user.id %}" class="btn btn-primary btn-sm">
                                                    <i class="fa fa-user"></i> {% trans "پروفایل" %}
                                                </a>
                                                {% if session.status == 'assigned' %}
                                                    <form method="POST" action="{% url 'panel-assistant-complete-session' session.id %}" style="display: inline;">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('آیا از تکمیل این جلسه اطمینان دارید؟')">
                                                            <i class="fa fa-check"></i> {% trans "تکمیل" %}
                                                        </button>
                                                    </form>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{% trans "هیچ جلسه‌ای به شما تخصیص داده نشده است" %}</h5>
                            <p class="text-muted">{% trans "جلسات خریداری شده توسط دکتر به شما تخصیص داده می‌شوند" %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Call Link Modal -->
<div class="modal fade" id="callLinkModal" tabindex="-1" role="dialog" aria-labelledby="callLinkModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="callLinkModalLabel">تنظیم لینک تماس</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="callLinkForm">
                    {% csrf_token %}
                    <input type="hidden" id="sessionId" name="session_id">
                    <div class="form-group">
                        <label for="callLink">لینک تماس:</label>
                        <input type="url" class="form-control" id="callLink" name="call_link" placeholder="https://meet.google.com/..." required>
                        <small class="form-text text-muted">لینک تماس خود را وارد کنید (مثل Google Meet، Zoom، یا سایر پلتفرم‌ها)</small>
                    </div>
                    <div class="form-group">
                        <label for="callNotes">یادداشت (اختیاری):</label>
                        <textarea class="form-control" id="callNotes" name="call_notes" rows="3" placeholder="توضیحات اضافی برای بیمار..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-primary" onclick="submitCallLink()">ارسال لینک و اطلاع‌رسانی</button>
            </div>
        </div>
    </div>
</div>

<style>
.badge {
    font-size: 0.8em;
}
.table th {
    background-color: #f8f9fa;
    border-top: none;
}
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.bg-primary, .bg-warning, .bg-success {
    border: none;
}
.table-responsive {
    border-radius: 8px;
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.btn-group .btn {
    margin-right: 2px;
}
</style>

<script>
function openCallLinkModal(sessionId, patientName) {
    // Set session ID in hidden input
    document.getElementById('sessionId').value = sessionId;
    
    // Update modal title with patient name
    document.getElementById('callLinkModalLabel').textContent = `تنظیم لینک تماس - ${patientName}`;
    
    // Clear previous values
    document.getElementById('callLink').value = '';
    document.getElementById('callNotes').value = '';
    
    // Show modal
    $('#callLinkModal').modal('show');
}

function submitCallLink() {
    const sessionId = document.getElementById('sessionId').value;
    const callLink = document.getElementById('callLink').value;
    const callNotes = document.getElementById('callNotes').value;
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    if (!callLink) {
        alert('لطفاً لینک تماس را وارد کنید');
        return;
    }
    
    // Show loading state
    const submitBtn = document.querySelector('#callLinkModal .btn-primary');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'در حال ارسال...';
    submitBtn.disabled = true;
    
    // Send AJAX request
    const formData = new FormData();
    formData.append('session_id', sessionId);
    formData.append('call_link', callLink);
    formData.append('call_notes', callNotes);
    
    fetch('{% url "panel-assistant-set-call-link" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            alert('لینک تماس با موفقیت تنظیم شد و اطلاع‌رسانی ارسال شد');
            
            // Close modal
            $('#callLinkModal').modal('hide');
            
            // Reload page to show updated data
            location.reload();
        } else {
            alert('خطا: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطا در ارسال درخواست');
    })
    .finally(() => {
        // Restore button state
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    });
}

// Close modal on escape key
$(document).keyup(function(e) {
    if (e.key === "Escape") {
        $('#callLinkModal').modal('hide');
    }
});
</script>
{% endblock %}