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

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.timeslot %} 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-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ total_timeslots }}</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-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ available_timeslots }}</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 class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ purchased_timeslots_count }}</h4>
                            <p class="card-text">{% trans "خریداری شده" %}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-shopping-cart fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ assigned_timeslots }}</h4>
                            <p class="card-text">{% trans "تخصیص داده شده" %}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-user fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">{% trans "عملیات سریع" %}</h5>
                        </div>
                        <div>
                            <a href="{% url 'panel-doctor-create-timeslot' %}" class="btn btn-primary">
                                <i class="fa fa-plus"></i> {% trans "ایجاد زمان جدید" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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 "تمام زمان‌هایی که کاربران خریداری کرده‌اند" %}</p>
                </div>
                <div class="card-body">
                    {% if purchased_timeslots %}
                        <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 payment in purchased_timeslots %}
                                    <tr>
                                        <td>
                                            <strong>{{ payment.time_slot.start_time|date:"Y/m/d" }}</strong><br>
                                            <small>{{ payment.time_slot.start_time|time:"H:i" }} - {{ payment.time_slot.start_time|add_minutes:payment.time_slot.duration|time:"H:i" }}</small>
                                        </td>
                                        <td>
                                            <strong>{{ payment.user.profile.first_name }} {{ payment.user.profile.last_name }}</strong>
                                        </td>
                                        <td>{{ payment.user.phone_number }}</td>
                                        <td>
                                            {% if payment.payment_type == 'coin' %}
                                                <span class="badge badge-warning">{% trans "کوین" %} ({{ payment.coin_amount }})</span>
                                            {% else %}
                                                <span class="badge badge-success">{% trans "پول" %} ({{ payment.money_amount|floatformat:0 }} تومان)</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if payment.status == 'pending' %}
                                                <span class="badge badge-warning">{% trans "در انتظار تخصیص" %}</span>
                                            {% elif payment.status == 'assigned' %}
                                                <span class="badge badge-info">{% trans "تخصیص داده شده" %}</span>
                                            {% elif payment.status == 'completed' %}
                                                <span class="badge badge-success">{% trans "تکمیل شده" %}</span>
                                            {% elif payment.status == 'cancelled' %}
                                                <span class="badge badge-danger">{% trans "لغو شده" %}</span>
                                            {% else %}
                                                <span class="badge badge-secondary">{% trans "نامشخص" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if payment.assigned_therapist %}
                                                <strong>{{ payment.assigned_therapist.first_name }} {{ payment.assigned_therapist.last_name }}</strong>
                                                {% if payment.assigned_date %}
                                                    <br><small class="text-muted">{{ payment.assigned_date|date:"Y/m/d H:i" }}</small>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if payment.status == 'pending' %}
                                                <button type="button" class="btn btn-primary btn-sm" 
                                                        data-toggle="modal" 
                                                        data-target="#assignModal{{ payment.id }}">
                                                    {% trans "تخصیص به درمانگر" %}
                                                </button>
                                            {% elif payment.status == 'assigned' %}
                                                <button type="button" class="btn btn-info btn-sm" 
                                                        data-toggle="modal" 
                                                        data-target="#changeAssignModal{{ payment.id }}">
                                                    {% trans "تغییر تخصیص" %}
                                                </button>
                                                <br><small class="text-muted">{% trans "درمانگر فعلی: " %}{{ payment.assigned_therapist.first_name }} {{ payment.assigned_therapist.last_name }}</small>
                                            {% elif payment.status == 'completed' %}
                                                <span class="badge badge-success">{% trans "تکمیل شده" %}</span>
                                            {% elif payment.status == 'cancelled' %}
                                                <span class="badge badge-danger">{% trans "لغو شده" %}</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    
                                    <!-- Assignment Modal -->
                                    <div class="modal fade" id="assignModal{{ payment.id }}" tabindex="-1" role="dialog">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">{% trans "تخصیص به درمانگر" %}</h5>
                                                    <button type="button" class="close" data-dismiss="modal">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <form method="POST" action="{% url 'panel-doctor-assign-timeslot' %}">
                                                    {% csrf_token %}
                                                    <div class="modal-body">
                                                        <p><strong>{% trans "بیمار:" %}</strong> {{ payment.user.profile.first_name }} {{ payment.user.profile.last_name }}</p>
                                                        <p><strong>{% trans "زمان:" %}</strong> {{ payment.time_slot.start_time|date:"Y/m/d H:i" }}</p>
                                                        <input type="hidden" name="payment_id" value="{{ payment.id }}">
                                                        
                                                        <div class="form-group">
                                                            <label for="therapist{{ payment.id }}">{% trans "انتخاب درمانگر:" %}</label>
                                                            <select class="form-control" name="therapist_id" id="therapist{{ payment.id }}" required>
                                                                <option value="">{% trans "درمانگر را انتخاب کنید" %}</option>
                                                                {% for therapist in therapists %}
                                                                <option value="{{ therapist.id }}">
                                                                    {{ therapist.first_name }} {{ therapist.last_name }}
                                                                </option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "انصراف" %}</button>
                                                        <button type="submit" class="btn btn-primary">{% trans "تخصیص" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Change Assignment Modal -->
                                    {% if payment.status == 'assigned' %}
                                    <div class="modal fade" id="changeAssignModal{{ payment.id }}" tabindex="-1" role="dialog">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">{% trans "تغییر تخصیص درمانگر" %}</h5>
                                                    <button type="button" class="close" data-dismiss="modal">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <form method="POST" action="{% url 'panel-doctor-change-assignment' %}">
                                                    {% csrf_token %}
                                                    <div class="modal-body">
                                                        <p><strong>{% trans "بیمار:" %}</strong> {{ payment.user.profile.first_name }} {{ payment.user.profile.last_name }}</p>
                                                        <p><strong>{% trans "زمان:" %}</strong> {{ payment.time_slot.start_time|date:"Y/m/d H:i" }}</p>
                                                        <p><strong>{% trans "درمانگر فعلی:" %}</strong> {{ payment.assigned_therapist.first_name }} {{ payment.assigned_therapist.last_name }}</p>
                                                        <input type="hidden" name="payment_id" value="{{ payment.id }}">
                                                        <input type="hidden" name="current_therapist_id" value="{{ payment.assigned_therapist.id }}">
                                                        
                                                        <div class="form-group">
                                                            <label for="newTherapist{{ payment.id }}">{% trans "انتخاب درمانگر جدید:" %}</label>
                                                            <select class="form-control" name="therapist_id" id="newTherapist{{ payment.id }}" required>
                                                                <option value="">{% trans "درمانگر جدید را انتخاب کنید" %}</option>
                                                                {% for therapist in therapists %}
                                                                <option value="{{ therapist.id }}" {% if therapist.id == payment.assigned_therapist.id %}disabled{% endif %}>
                                                                    {{ therapist.first_name }} {{ therapist.last_name }}
                                                                    {% if therapist.id == payment.assigned_therapist.id %} (فعلی){% endif %}
                                                                </option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "انصراف" %}</button>
                                                        <button type="submit" class="btn btn-warning">{% trans "تغییر تخصیص" %}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas 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>

<style>
.badge {
    font-size: 0.8em;
    padding: 0.4em 0.6em;
}
.badge-warning {
    background-color: #ffc107;
    color: #212529;
}
.badge-info {
    background-color: #17a2b8;
    color: white;
}
.badge-success {
    background-color: #28a745;
    color: white;
}
.badge-danger {
    background-color: #dc3545;
    color: white;
}
.badge-secondary {
    background-color: #6c757d;
    color: white;
}
.table th {
    background-color: #f8f9fa;
    border-top: none;
}
.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.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-success, .bg-warning, .bg-info {
    border: none;
}
.table-responsive {
    border-radius: 8px;
}
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>
{% endblock %}