{% extends "layouts/base.html" %}
{% load i18n static %}

{% block title %}{% trans "Send Appreciation" %} - {% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'appreciation:appreciation_list' %}">{% trans "Appreciation" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans "Send Appreciation" %}</li>
        </ol>
    </nav>

    <!-- Send Appreciation Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="bi-send me-2"></i>
                        {% trans "Send Appreciation" %}
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" id="appreciationForm">
                        {% csrf_token %}
                        
                        <!-- Recipient Type -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="recipient_type" class="form-label">
                                    {% trans "Recipient Type" %} <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" id="recipient_type" name="recipient_type" required>
                                    <option value="user">{% trans "User" %}</option>
                                    <option value="physician">{% trans "Physician" %}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="hospital_id" class="form-label">
                                    {% trans "Hospital" %} <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" id="hospital_id" name="hospital_id" required>
                                    <option value="">-- {% trans "Select Hospital" %} --</option>
                                    {% for hospital in hospitals %}
                                        <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Recipient -->
                        <div class="mb-3">
                            <label for="recipient_id" class="form-label">
                                {% trans "Recipient" %} <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" id="recipient_id" name="recipient_id" required disabled>
                                <option value="">-- {% trans "Select Recipient" %} --</option>
                            </select>
                            <div class="form-text" id="recipientHelp">{% trans "Select a hospital first" %}</div>
                        </div>

                        <!-- Department (Optional) -->
                        <div class="mb-3">
                            <label for="department_id" class="form-label">{% trans "Department" %}</label>
                            <select class="form-select" id="department_id" name="department_id">
                                <option value="">-- {% trans "Select Department" %} --</option>
                            </select>
                            <div class="form-text">{% trans "Optional: Select if related to a specific department" %}</div>
                        </div>

                        <!-- Category -->
                        <div class="mb-3">
                            <label for="category_id" class="form-label">{% trans "Category" %}</label>
                            <select class="form-select" id="category_id" name="category_id">
                                <option value="">-- {% trans "Select Category" %} --</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">
                                        <i class="{{ category.icon }}"></i> {{ category.name_en }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Message (English) -->
                        <div class="mb-3">
                            <label for="message_en" class="form-label">
                                {% trans "Message (English)" %} <span class="text-danger">*</span>
                            </label>
                            <textarea 
                                class="form-control" 
                                id="message_en" 
                                name="message_en" 
                                rows="4" 
                                required
                                placeholder="{% trans 'Write your appreciation message here...' %}"
                            ></textarea>
                            <div class="form-text">{% trans "Required: Appreciation message in English" %}</div>
                        </div>

                        <!-- Message (Arabic) -->
                        <div class="mb-3">
                            <label for="message_ar" class="form-label">{% trans "Message (Arabic)" %}</label>
                            <textarea 
                                class="form-control" 
                                id="message_ar" 
                                name="message_ar" 
                                rows="4" 
                                dir="rtl"
                                placeholder="{% trans 'اكتب رسالة التقدير هنا...' %}"
                            ></textarea>
                            <div class="form-text">{% trans "Optional: Appreciation message in Arabic" %}</div>
                        </div>

                        <!-- Visibility -->
                        <div class="mb-3">
                            <label for="visibility" class="form-label">{% trans "Visibility" %}</label>
                            <select class="form-select" id="visibility" name="visibility">
                                {% for choice in visibility_choices %}
                                    <option value="{{ choice.0 }}" {% if choice.0 == 'private' %}selected{% endif %}>
                                        {{ choice.1 }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Anonymous -->
                        <div class="mb-4">
                            <div class="form-check">
                                <input 
                                    class="form-check-input" 
                                    type="checkbox" 
                                    id="is_anonymous" 
                                    name="is_anonymous"
                                >
                                <label class="form-check-label" for="is_anonymous">
                                    {% trans "Send anonymously" %}
                                </label>
                                <div class="form-text">{% trans "Your name will not be shown to the recipient" %}</div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{% url 'appreciation:appreciation_list' %}" class="btn btn-outline-secondary">
                                <i class="bi-x me-2"></i>
                                {% trans "Cancel" %}
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi-send me-2"></i>
                                {% trans "Send Appreciation" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Tips -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0">
                        <i class="bi-lightbulb me-2"></i>
                        {% trans "Tips for Writing Appreciation" %}
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="bi-check text-success me-2"></i>
                            {% trans "Be specific about what you appreciate" %}
                        </li>
                        <li class="mb-2">
                            <i class="bi-check text-success me-2"></i>
                            {% trans "Use the person's name when addressing them" %}
                        </li>
                        <li class="mb-2">
                            <i class="bi-check text-success me-2"></i>
                            {% trans "Mention the impact of their actions" %}
                        </li>
                        <li class="mb-2">
                            <i class="bi-check text-success me-2"></i>
                            {% trans "Be sincere and authentic" %}
                        </li>
                        <li>
                            <i class="bi-check text-success me-2"></i>
                            {% trans "Keep it positive and uplifting" %}
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Visibility Guide -->
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0">
                        <i class="bi-info-circle me-2"></i>
                        {% trans "Visibility Levels" %}
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <strong>{% trans "Private:" %}</strong>
                            <p class="small text-muted mb-0">
                                {% trans "Only you and the recipient can see this appreciation" %}
                            </p>
                        </li>
                        <li class="mb-2">
                            <strong>{% trans "Department:" %}</strong>
                            <p class="small text-muted mb-0">
                                {% trans "Visible to everyone in the selected department" %}
                            </p>
                        </li>
                        <li class="mb-2">
                            <strong>{% trans "Hospital:" %}</strong>
                            <p class="small text-muted mb-0">
                                {% trans "Visible to everyone in the selected hospital" %}
                            </p>
                        </li>
                        <li>
                            <strong>{% trans "Public:" %}</strong>
                            <p class="small text-muted mb-0">
                                {% trans "Visible to all PX360 users" %}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hospitalSelect = document.getElementById('hospital_id');
    const recipientTypeSelect = document.getElementById('recipient_type');
    const recipientSelect = document.getElementById('recipient_id');
    const departmentSelect = document.getElementById('department_id');
    const recipientHelp = document.getElementById('recipientHelp');
    
    let recipientData = [];
    
    // Load recipients when hospital changes
    hospitalSelect.addEventListener('change', function() {
        const hospitalId = this.value;
        const recipientType = recipientTypeSelect.value;
        
        recipientSelect.disabled = true;
        recipientSelect.innerHTML = '<option value="">Loading...</option>';
        recipientHelp.textContent = 'Loading recipients...';
        
        if (!hospitalId) {
            recipientSelect.innerHTML = '<option value="">-- Select Recipient --</option>';
            recipientSelect.disabled = true;
            recipientHelp.textContent = 'Select a hospital first';
            return;
        }
        
        // Fetch recipients
        const url = recipientType === 'user' 
            ? "{% url 'appreciation:get_users_by_hospital' %}?hospital_id=" + hospitalId
            : "{% url 'appreciation:get_physicians_by_hospital' %}?hospital_id=" + hospitalId;
        
        fetch(url)
            .then(response => response.json())
            .then(data => {
                recipientData = recipientType === 'user' ? data.users : data.physicians;
                
                recipientSelect.innerHTML = '<option value="">-- Select Recipient --</option>';
                recipientData.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.name;
                    recipientSelect.appendChild(option);
                });
                
                recipientSelect.disabled = false;
                recipientHelp.textContent = `${recipientData.length} recipients found`;
            })
            .catch(error => {
                console.error('Error:', error);
                recipientSelect.innerHTML = '<option value="">Error loading recipients</option>';
                recipientHelp.textContent = 'Error loading recipients';
            });
    });
    
    // Load departments when hospital changes
    hospitalSelect.addEventListener('change', function() {
        const hospitalId = this.value;
        
        departmentSelect.innerHTML = '<option value="">-- Select Department --</option>';
        
        if (!hospitalId) return;
        
        fetch("{% url 'appreciation:get_departments_by_hospital' %}?hospital_id=" + hospitalId)
            .then(response => response.json())
            .then(data => {
                data.departments.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.name;
                    departmentSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });
    
    // Refresh recipients when recipient type changes
    recipientTypeSelect.addEventListener('change', function() {
        if (hospitalSelect.value) {
            hospitalSelect.dispatchEvent(new Event('change'));
        }
    });
});
</script>
{% endblock %}