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

{% block title %}{% if object %}Edit Broadcast{% else %}Create Broadcast{% endif %} - Communications{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'communications:dashboard' %}">Communications</a></li>
    <li class="breadcrumb-item"><a href="{% url 'communications:broadcast_list' %}">Broadcasts</a></li>
    <li class="breadcrumb-item active">{% if object %}Edit{% else %}Create{% endif %}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {% if object %}Edit Broadcast{% else %}Create New Broadcast{% endif %}
    <small>{% if object %}{{ object.title }}{% else %}Mass Communication{% endif %}</small>
</h1>
<!-- END page-header -->

<form method="post" id="broadcast-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-xl-8">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Broadcast Information</h4>
                </div>
                <div class="panel-body">
                    <div class="mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        {{ form.title }}
                        {% if form.title.errors %}
                        <div class="text-danger">{{ form.title.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Type <span class="text-danger">*</span></label>
                                {{ form.type }}
                                {% if form.type.errors %}
                                <div class="text-danger">{{ form.type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Priority <span class="text-danger">*</span></label>
                                {{ form.priority }}
                                {% if form.priority.errors %}
                                <div class="text-danger">{{ form.priority.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                <div class="text-danger">{{ form.status.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Message <span class="text-danger">*</span></label>
                        {{ form.message }}
                        {% if form.message.errors %}
                        <div class="text-danger">{{ form.message.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Enter the broadcast message content</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Target Audience</label>
                        {{ form.target_audience }}
                        {% if form.target_audience.errors %}
                        <div class="text-danger">{{ form.target_audience.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Describe who should receive this broadcast</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Scheduled At</label>
                                {{ form.scheduled_at }}
                                {% if form.scheduled_at.errors %}
                                <div class="text-danger">{{ form.scheduled_at.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">Leave empty to send immediately</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Expires At</label>
                                {{ form.expires_at }}
                                {% if form.expires_at.errors %}
                                <div class="text-danger">{{ form.expires_at.errors.0 }}</div>
                                {% endif %}
                                <div class="form-text">When this broadcast should expire</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END panel -->

            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Delivery Options</h4>
                </div>
                <div class="panel-body">
                    <div class="mb-3">
                        <label class="form-label">Delivery Channels</label>
                        {{ form.channels }}
                        {% if form.channels.errors %}
                        <div class="text-danger">{{ form.channels.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Select which channels to use for delivery</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Recipient Groups</label>
                        {{ form.recipient_groups }}
                        {% if form.recipient_groups.errors %}
                        <div class="text-danger">{{ form.recipient_groups.errors.0 }}</div>
                        {% endif %}
                        <div class="form-text">Select user groups to receive this broadcast</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                {{ form.require_acknowledgment }}
                                <label class="form-check-label" for="{{ form.require_acknowledgment.id_for_label }}">
                                    Require acknowledgment
                                </label>
                                <div class="form-text">Recipients must acknowledge receipt</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                {{ form.send_to_all_users }}
                                <label class="form-check-label" for="{{ form.send_to_all_users.id_for_label }}">
                                    Send to all users
                                </label>
                                <div class="form-text">Override group selection</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END panel -->
        </div>

        <div class="col-xl-4">
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Form Actions</h4>
                </div>
                <div class="panel-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fa fa-save me-2"></i>
                            {% if object %}Update Broadcast{% else %}Save Broadcast{% endif %}
                        </button>
                        
                        <button type="submit" name="save_and_send" class="btn btn-success">
                            <i class="fa fa-paper-plane me-2"></i>Save & Send Now
                        </button>
                        
                        <button type="submit" name="save_as_draft" class="btn btn-warning">
                            <i class="fa fa-file me-2"></i>Save as Draft
                        </button>
                        
                        <a href="{% if object %}{% url 'communications:broadcast_detail' object.pk %}{% else %}{% url 'communications:broadcast_list' %}{% endif %}" class="btn btn-secondary">
                            <i class="fa fa-times me-2"></i>Cancel
                        </a>
                        
                        {% if object %}
                        <hr>
                        <a href="{% url 'communications:broadcast_delete' object.pk %}" class="btn btn-danger">
                            <i class="fa fa-trash me-2"></i>Delete Broadcast
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- END panel -->

            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Preview</h4>
                </div>
                <div class="panel-body">
                    <div id="message-preview" class="bg-light p-3 rounded">
                        <div class="text-muted">Message preview will appear here...</div>
                    </div>
                    <div class="mt-3">
                        <small class="text-muted">
                            <strong>Character count:</strong> <span id="char-count">0</span>
                        </small>
                    </div>
                </div>
            </div>
            <!-- END panel -->

            {% if object %}
            <!-- BEGIN panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Broadcast Status</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-borderless">
                        <tr>
                            <td class="fw-bold">Status:</td>
                            <td>
                                <span class="badge bg-{% if object.status == 'SENT' %}success{% elif object.status == 'SCHEDULED' %}warning{% elif object.status == 'DRAFT' %}secondary{% else %}danger{% endif %}">
                                    {{ object.get_status_display }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Created:</td>
                            <td>{{ object.created_at|date:"M d, Y H:i" }}</td>
                        </tr>
                        {% if object.sent_at %}
                        <tr>
                            <td class="fw-bold">Sent:</td>
                            <td>{{ object.sent_at|date:"M d, Y H:i" }}</td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td class="fw-bold">Recipients:</td>
                            <td>{{ object.total_recipients|default:"0" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- END panel -->
            {% endif %}
        </div>
    </div>
</form>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Update preview when message changes
    $('#id_message').on('input', function() {
        var message = $(this).val();
        $('#message-preview').html(message ? message.replace(/\n/g, '<br>') : '<div class="text-muted">Message preview will appear here...</div>');
        $('#char-count').text(message.length);
    });
    
    // Initialize preview
    $('#id_message').trigger('input');
    
    // Form validation
    $('#broadcast-form').on('submit', function(e) {
        var isValid = true;
        var errors = [];
        
        if (!$('#id_title').val().trim()) {
            errors.push('Title is required');
            isValid = false;
        }
        
        if (!$('#id_message').val().trim()) {
            errors.push('Message is required');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            toastr.error('Please correct the following errors:<br>' + errors.join('<br>'));
        }
    });
});
</script>
{% endblock %}