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

{% block title %}Envoyer un Nouveau Message - {{ block.super }}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/messaging/send_message_form.css' %}">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 col-lg-8 mx-auto">
        <!-- En-tête de la page -->
        <div class="mb-4">
            <h1 class="display-6 fw-bold text-dark mb-2">
                <i class="fas fa-paper-plane me-3 text-primary"></i>
                Envoyer un Nouveau Message
            </h1>
            <p class="lead text-muted">
                Composez votre message pour un client ou un affilié.
            </p>
        </div>
        
        <!-- Structure du formulaire -->
        <div class="card shadow-sm">
            <div class="card-body">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <!-- Affichage des erreurs générales du formulaire -->
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ form.non_field_errors }}
                        </div>
                    {% endif %}
                    
                    <!-- Champ Destinataire -->
                    <div class="mb-3">
                        <label for="{{ form.recipient.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-user me-1 text-muted"></i>
                            {{ form.recipient.label }}
                            {% if form.recipient.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        {{ form.recipient }}
                        {% if form.recipient.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.recipient.errors.0 }}
                            </div>
                        {% endif %}
                        {% if form.recipient.help_text %}
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ form.recipient.help_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ Sujet -->
                    <div class="mb-3">
                        <label for="{{ form.subject.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-tag me-1 text-muted"></i>
                            {{ form.subject.label }}
                            {% if form.subject.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        {{ form.subject }}
                        {% if form.subject.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.subject.errors.0 }}
                            </div>
                        {% endif %}
                        {% if form.subject.help_text %}
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ form.subject.help_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ Corps du Message -->
                    <div class="mb-3">
                        <label for="{{ form.body.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-edit me-1 text-muted"></i>
                            {{ form.body.label }}
                            {% if form.body.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <textarea 
                            name="{{ form.body.html_name }}" 
                            id="{{ form.body.id_for_label }}"
                            class="form-control{% if form.body.errors %} is-invalid{% endif %}"
                            rows="10"
                            placeholder="Rédigez votre message ici..."
                            {% if form.body.field.required %}required{% endif %}>{{ form.body.value|default_if_none:"" }}</textarea>
                        {% if form.body.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.body.errors.0 }}
                            </div>
                        {% endif %}
                        {% if form.body.help_text %}
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ form.body.help_text }}
                            </div>
                        {% endif %}
                        
                        <!-- Compteur de caractères -->
                        <div class="form-text text-end">
                            <small class="text-muted">
                                <span id="char-count">0</span> caractères
                            </small>
                        </div>
                    </div>
                    
                    <!-- Aperçu du message (optionnel) -->
                    <div class="mb-3">
                        <div class="card bg-light border-0">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-lightbulb me-2 text-warning"></i>
                                    <small class="text-muted">
                                        <strong>Conseil :</strong> Relisez votre message avant de l'envoyer. Une fois envoyé, il ne pourra plus être modifié.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Boutons d'action -->
                    <div class="mt-4 text-end">
                        <a href="{% url 'accounts:dashboard_redirect' %}" class="btn btn-secondary me-2">
                            <i class="fas fa-times me-1"></i>
                            Annuler
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-1"></i>
                            Envoyer le message
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Actions rapides -->
        <div class="mt-3">
            <div class="row">
                <div class="col-md-6">
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>
                        Votre message sera envoyé immédiatement
                    </small>
                </div>
                <div class="col-md-6 text-md-end">
                    <a href="{% url 'messaging:inbox' %}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-inbox me-1"></i>
                        Voir mes messages envoyés
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Script pour le compteur de caractères -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variable globale pour indiquer si le formulaire est en cours de soumission
    let isSubmitting = false;
    
    // Compteur de caractères pour le textarea
    const textarea = document.getElementById('{{ form.body.id_for_label }}');
    const charCount = document.getElementById('char-count');
    
    if (textarea && charCount) {
        function updateCharCount() {
            charCount.textContent = textarea.value.length;
        }
        
        textarea.addEventListener('input', updateCharCount);
        updateCharCount(); // Initialisation
    }
    
    // Gestion de la soumission du formulaire
    const form = document.querySelector('form[method="post"]');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Marquer le formulaire comme en cours de soumission
            isSubmitting = true;
        });
    }
    
    // Confirmation avant de quitter si du contenu est saisi
    window.addEventListener('beforeunload', function(e) {
        // SI le formulaire est en cours de soumission, ne rien faire
        if (isSubmitting) {
            return; // Quitte la fonction immédiatement
        }
        
        const subjectInput = document.querySelector('input[name*="subject"]');
        const bodyTextarea = document.querySelector('textarea[name*="body"]');
        
        const hasContent = (subjectInput && subjectInput.value.trim()) ||
                         (bodyTextarea && bodyTextarea.value.trim());
        
        if (hasContent) {
            e.preventDefault();
            e.returnValue = 'Vous avez du contenu non enregistré. Êtes-vous sûr de vouloir quitter ?';
            return e.returnValue;
        }
    });
});
</script>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/messaging/send_message_form.js' %}"></script>
{% endblock %}