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

{% block title %}{{ object.title }} - Broadcast Details{% 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">{{ object.title }}</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {{ object.title }}
    <small>Broadcast Details</small>
</h1>
<!-- END page-header -->

<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 class="panel-heading-btn">
                    <a href="{% url 'communications:broadcast_update' object.pk %}" class="btn btn-xs btn-primary me-2">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" width="150">Title:</td>
                                <td>{{ object.title }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Type:</td>
                                <td>
                                    <span class="badge bg-primary">{{ object.get_type_display }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Priority:</td>
                                <td>
                                    <span class="badge bg-{% if object.priority == 'HIGH' %}danger{% elif object.priority == 'MEDIUM' %}warning{% else %}info{% endif %}">
                                        {{ object.get_priority_display }}
                                    </span>
                                </td>
                            </tr>
                            <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>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold" width="150">Created:</td>
                                <td>{{ object.created_at|date:"M d, Y H:i" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Created By:</td>
                                <td>{{ object.created_by.get_full_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Scheduled For:</td>
                                <td>{{ object.scheduled_at|date:"M d, Y H:i"|default:"Not scheduled" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Sent At:</td>
                                <td>{{ object.sent_at|date:"M d, Y H:i"|default:"Not sent" }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="mt-4">
                    <h6>Message Content</h6>
                    <div class="bg-light p-3 rounded">
                        {{ object.message|linebreaks }}
                    </div>
                </div>

                {% if object.target_audience %}
                <div class="mt-4">
                    <h6>Target Audience</h6>
                    <p>{{ object.target_audience }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        <!-- END panel -->

        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Delivery Statistics</h4>
            </div>
            <div class="panel-body">
                <div class="row text-center">
                    <div class="col-md-3">
                        <div class="fs-24px fw-bold text-primary">{{ object.total_recipients }}</div>
                        <div class="small text-muted">Total Recipients</div>
                    </div>
                    <div class="col-md-3">
                        <div class="fs-24px fw-bold text-success">{{ object.delivered_count }}</div>
                        <div class="small text-muted">Delivered</div>
                    </div>
                    <div class="col-md-3">
                        <div class="fs-24px fw-bold text-warning">{{ object.pending_count }}</div>
                        <div class="small text-muted">Pending</div>
                    </div>
                    <div class="col-md-3">
                        <div class="fs-24px fw-bold text-danger">{{ object.failed_count }}</div>
                        <div class="small text-muted">Failed</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">Quick Actions</h4>
            </div>
            <div class="panel-body">
                <div class="d-grid gap-2">
                    {% if object.status == 'DRAFT' %}
                    <button class="btn btn-success" onclick="sendBroadcast()">
                        <i class="fa fa-paper-plane me-2"></i>Send Now
                    </button>
                    <button class="btn btn-warning" onclick="scheduleBroadcast()">
                        <i class="fa fa-clock me-2"></i>Schedule
                    </button>
                    {% endif %}
                    
                    <a href="{% url 'communications:broadcast_update' object.pk %}" class="btn btn-primary">
                        <i class="fa fa-edit me-2"></i>Edit Broadcast
                    </a>
                    
                    <button class="btn btn-info" onclick="duplicateBroadcast()">
                        <i class="fa fa-copy me-2"></i>Duplicate
                    </button>
                    
                    <hr>
                    
                    <a href="{% url 'communications:broadcast_delete' object.pk %}" class="btn btn-danger">
                        <i class="fa fa-trash me-2"></i>Delete Broadcast
                    </a>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
{% endblock %}

{% block js %}
<script>
function sendBroadcast() {
    if (confirm('Send this broadcast now?')) {
        $.ajax({
            url: '{% url "communications:broadcast_send" object.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success('Broadcast sent successfully');
                    location.reload();
                } else {
                    toastr.error('Failed to send broadcast');
                }
            },
            error: function() {
                toastr.error('An error occurred while sending the broadcast');
            }
        });
    }
}

function scheduleBroadcast() {
    // Implementation for scheduling
    toastr.info('Schedule functionality will be implemented');
}

function duplicateBroadcast() {
    if (confirm('Create a copy of this broadcast?')) {
        $.ajax({
            url: '{% url "communications:broadcast_duplicate" object.pk %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success('Broadcast duplicated successfully');
                    window.location.href = response.redirect_url;
                } else {
                    toastr.error('Failed to duplicate broadcast');
                }
            },
            error: function() {
                toastr.error('An error occurred while duplicating the broadcast');
            }
        });
    }
}
</script>
{% endblock %}