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

{% block title %}Send Message{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/summernote/dist/summernote-lite.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-10">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'communications:message_list' %}">Messages</a></li>
                    <li class="breadcrumb-item active">Send Message</li>
                </ul>
                
                <h1 class="page-header">Send Message</h1>
                
                <div class="card">
                    <div class="card-body">
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                        
                        <form method="post" class="form-horizontal" enctype="multipart/form-data">
                            {% csrf_token %}
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Message Type <span class="text-danger">*</span></label>
                                <div class="col-md-10">
                                    <select name="message_type" class="form-select" required>
                                        <option value="">Select Type</option>
                                        <option value="announcement" {% if form.message_type.value == 'announcement' %}selected{% endif %}>Announcement</option>
                                        <option value="alert" {% if form.message_type.value == 'alert' %}selected{% endif %}>Alert</option>
                                        <option value="notification" {% if form.message_type.value == 'notification' %}selected{% endif %}>Notification</option>
                                        <option value="reminder" {% if form.message_type.value == 'reminder' %}selected{% endif %}>Reminder</option>
                                        <option value="update" {% if form.message_type.value == 'update' %}selected{% endif %}>System Update</option>
                                        <option value="personal" {% if form.message_type.value == 'personal' %}selected{% endif %}>Personal Message</option>
                                    </select>
                                    {% if form.message_type.errors %}
                                        <div class="text-danger">{{ form.message_type.errors.0 }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Recipients <span class="text-danger">*</span></label>
                                <div class="col-md-10">
                                    <div class="btn-group mb-2" role="group">
                                        <input type="radio" class="btn-check" name="recipient_type" id="recipient_individual" value="individual" checked>
                                        <label class="btn btn-outline-primary" for="recipient_individual">Individual</label>
                                        
                                        <input type="radio" class="btn-check" name="recipient_type" id="recipient_group" value="group">
                                        <label class="btn btn-outline-primary" for="recipient_group">Group</label>
                                        
                                        <input type="radio" class="btn-check" name="recipient_type" id="recipient_department" value="department">
                                        <label class="btn btn-outline-primary" for="recipient_department">Department</label>
                                        
                                        <input type="radio" class="btn-check" name="recipient_type" id="recipient_all" value="all">
                                        <label class="btn btn-outline-primary" for="recipient_all">All Staff</label>
                                    </div>
                                    
                                    <div id="individual_recipients">
                                        <select name="individual_users" class="form-select" multiple>
                                            {% for user in users %}
                                                <option value="{{ user.id }}">{{ user.get_full_name }} ({{ user.email }})</option>
                                            {% endfor %}
                                        </select>
                                        <small class="form-text text-muted">Select individual users to send the message to</small>
                                    </div>
                                    
                                    <div id="group_recipients" style="display: none;">
                                        <select name="groups" class="form-select" multiple>
                                            {% for group in groups %}
                                                <option value="{{ group.id }}">{{ group.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <small class="form-text text-muted">Select user groups</small>
                                    </div>
                                    
                                    <div id="department_recipients" style="display: none;">
                                        <select name="departments" class="form-select" multiple>
                                            {% for department in departments %}
                                                <option value="{{ department.id }}">{{ department.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <small class="form-text text-muted">Select departments</small>
                                    </div>
                                    
                                    <div id="all_recipients" style="display: none;">
                                        <div class="alert alert-warning">
                                            <i class="fa fa-exclamation-triangle me-2"></i>
                                            This message will be sent to all staff members in the system.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Priority</label>
                                <div class="col-md-10">
                                    <select name="priority" class="form-select">
                                        <option value="normal" {% if form.priority.value == 'normal' %}selected{% endif %}>Normal</option>
                                        <option value="high" {% if form.priority.value == 'high' %}selected{% endif %}>High</option>
                                        <option value="urgent" {% if form.priority.value == 'urgent' %}selected{% endif %}>Urgent</option>
                                        <option value="low" {% if form.priority.value == 'low' %}selected{% endif %}>Low</option>
                                    </select>
                                    {% if form.priority.errors %}
                                        <div class="text-danger">{{ form.priority.errors.0 }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Subject <span class="text-danger">*</span></label>
                                <div class="col-md-10">
                                    <input type="text" name="subject" class="form-control" 
                                           value="{{ form.subject.value|default:'' }}" required
                                           placeholder="Enter message subject">
                                    {% if form.subject.errors %}
                                        <div class="text-danger">{{ form.subject.errors.0 }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Message Content <span class="text-danger">*</span></label>
                                <div class="col-md-10">
                                    <textarea name="content" id="messageContent" class="form-control" required>{{ form.content.value|default:'' }}</textarea>
                                    {% if form.content.errors %}
                                        <div class="text-danger">{{ form.content.errors.0 }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Delivery Method</label>
                                <div class="col-md-10">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="delivery_methods" value="in_app" id="delivery_in_app" checked>
                                        <label class="form-check-label" for="delivery_in_app">In-App Notification</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="delivery_methods" value="email" id="delivery_email">
                                        <label class="form-check-label" for="delivery_email">Email</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="delivery_methods" value="sms" id="delivery_sms">
                                        <label class="form-check-label" for="delivery_sms">SMS</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="delivery_methods" value="push" id="delivery_push">
                                        <label class="form-check-label" for="delivery_push">Push Notification</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Schedule Delivery</label>
                                <div class="col-md-10">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="radio" name="delivery_timing" id="send_now" value="now" checked>
                                        <label class="form-check-label" for="send_now">Send Now</label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="radio" name="delivery_timing" id="schedule_later" value="scheduled">
                                        <label class="form-check-label" for="schedule_later">Schedule for Later</label>
                                    </div>
                                    
                                    <div id="schedule_options" style="display: none;">
                                        <div class="row mt-2">
                                            <div class="col-md-6">
                                                <input type="datetime-local" name="scheduled_at" class="form-control">
                                                <small class="form-text text-muted">Select date and time</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Attachments</label>
                                <div class="col-md-10">
                                    <input type="file" name="attachments" class="form-control" multiple 
                                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif">
                                    <small class="form-text text-muted">
                                        Supported formats: PDF, Word, Excel, Images. Max 10MB per file.
                                    </small>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Options</label>
                                <div class="col-md-10">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="require_acknowledgment" id="require_acknowledgment">
                                        <label class="form-check-label" for="require_acknowledgment">
                                            Require acknowledgment from recipients
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="track_read_status" id="track_read_status" checked>
                                        <label class="form-check-label" for="track_read_status">
                                            Track read status
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" name="allow_replies" id="allow_replies" checked>
                                        <label class="form-check-label" for="allow_replies">
                                            Allow recipients to reply
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="auto_archive" id="auto_archive">
                                        <label class="form-check-label" for="auto_archive">
                                            Auto-archive after 30 days
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-form-label col-md-2">Message Template</label>
                                <div class="col-md-10">
                                    <select name="template" class="form-select" id="templateSelect">
                                        <option value="">No Template</option>
                                        {% for template in message_templates %}
                                            <option value="{{ template.id }}" data-subject="{{ template.subject }}" data-content="{{ template.content }}">
                                                {{ template.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <small class="form-text text-muted">Select a template to pre-fill the message</small>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-10 offset-md-2">
                                    <button type="submit" name="action" value="send" class="btn btn-primary">
                                        <i class="fa fa-paper-plane me-2"></i>Send Message
                                    </button>
                                    <button type="submit" name="action" value="draft" class="btn btn-secondary ms-2">
                                        <i class="fa fa-save me-2"></i>Save as Draft
                                    </button>
                                    <button type="button" class="btn btn-info ms-2" onclick="previewMessage()">
                                        <i class="fa fa-eye me-2"></i>Preview
                                    </button>
                                    <a href="{% url 'communications:message_list' %}" class="btn btn-outline-secondary ms-2">
                                        <i class="fa fa-times me-2"></i>Cancel
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Message Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="previewContent">
                <!-- Preview content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>
<script src="{% static 'assets/plugins/summernote/dist/summernote-lite.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('select[multiple]').select2({
        placeholder: 'Select options...',
        allowClear: true
    });
    
    // Initialize Summernote
    $('#messageContent').summernote({
        height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
    
    // Handle recipient type changes
    $('input[name="recipient_type"]').change(function() {
        var type = $(this).val();
        $('.col-md-10 > div[id$="_recipients"]').hide();
        $('#' + type + '_recipients').show();
    });
    
    // Handle delivery timing
    $('input[name="delivery_timing"]').change(function() {
        if ($(this).val() === 'scheduled') {
            $('#schedule_options').show();
        } else {
            $('#schedule_options').hide();
        }
    });
    
    // Handle template selection
    $('#templateSelect').change(function() {
        var selected = $(this).find('option:selected');
        if (selected.val()) {
            var subject = selected.data('subject');
            var content = selected.data('content');
            
            if (subject) {
                $('input[name="subject"]').val(subject);
            }
            if (content) {
                $('#messageContent').summernote('code', content);
            }
        }
    });
    
    // Set default scheduled time to 1 hour from now
    var now = new Date();
    now.setHours(now.getHours() + 1);
    var dateTimeString = now.toISOString().slice(0, 16);
    $('input[name="scheduled_at"]').val(dateTimeString);
});

function previewMessage() {
    var formData = new FormData($('form')[0]);
    var content = $('#messageContent').summernote('code');
    
    var previewHtml = `
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-0">${$('input[name="subject"]').val()}</h6>
                        <small class="text-muted">From: ${$('#user-name').text() || 'Current User'}</small>
                    </div>
                    <div>
                        <span class="badge bg-${getPriorityColor($('select[name="priority"]').val())}">${$('select[name="priority"] option:selected').text()}</span>
                    </div>
                </div>
            </div>
            <div class="card-body">
                ${content}
            </div>
            <div class="card-footer">
                <small class="text-muted">
                    Type: ${$('select[name="message_type"] option:selected').text()} | 
                    Delivery: ${getDeliveryMethods()} | 
                    Recipients: ${getRecipientCount()}
                </small>
            </div>
        </div>
    `;
    
    $('#previewContent').html(previewHtml);
    $('#previewModal').modal('show');
}

function getPriorityColor(priority) {
    switch(priority) {
        case 'urgent': return 'danger';
        case 'high': return 'warning';
        case 'low': return 'secondary';
        default: return 'primary';
    }
}

function getDeliveryMethods() {
    var methods = [];
    $('input[name="delivery_methods"]:checked').each(function() {
        methods.push($(this).next('label').text());
    });
    return methods.join(', ') || 'In-App Only';
}

function getRecipientCount() {
    var type = $('input[name="recipient_type"]:checked').val();
    switch(type) {
        case 'individual':
            return $('select[name="individual_users"]').val()?.length || 0 + ' users';
        case 'group':
            return $('select[name="groups"]').val()?.length || 0 + ' groups';
        case 'department':
            return $('select[name="departments"]').val()?.length || 0 + ' departments';
        case 'all':
            return 'All staff';
        default:
            return '0 recipients';
    }
}
</script>
{% endblock %}