{% extends 'base.html' %}
{% block title %} Announcement Detail {% endblock %}

{% block header %}
<div class="row noprint">
    <div class="col-sm-12 col-md-12">
        <ol class="breadcrumb">
            <li><a href="{% url 'plugins:netbox_announcement:announcement_list' %}">Announcements</a></li>
            <li>{{ announcement.slug }}</li>
        </ol>
    </div>
</div>
<h1>Announcement Detail</h1>
{% endblock %}
{% block content %}
<div class="row">
    <form class="form form-horizontal">
    {% csrf_token %}
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Main Announcement</strong>
                </div>
                <table class="table table-hover panel-body attr-table">
                    <tr>
                        <td> Subject:</td>
                        <td>{{ announcement.subject }}</td>
                    </tr>
                    <tr>
                        <td> Current Status: </td>
                        <td><span class="label label-{{ announcement.status.status_label }}">{{ announcement.status }}</span></td>
                    </tr>
                    <tr>
                        <td> Content: </td>
                        <td><textarea class="form-control" cols="40" rows="10" readonly>{{ announcement.content }}</textarea></td>
                    </tr>
                </table>
                <div class="panel-footer text-center noprint">
                        <div class="col-md-6">
                            <select id="status_update" name="status_update"
                                class="netbox-select2-api form-control select2-hidden-accessible" 
                                data-url="/api/plugins/announcement/status/"
                                display-field="status" required>
                            </select>
                        </div>
                        <button class="btn btn-primary" id="btn_update" name="btn_update"><i class="fa fa-edit"></i> Status Update</button>
                </div>
            </div>
        </div>
    </form>
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Announcement Updates</strong>
            </div>
            <table class="table table-hover table-headings panel-body component-list">
                <thead>
                    <tr>
                        <th>Create Time</th>
                        <th>Author</th>
                        <th>Content</th>
                    </tr>
                </thead>
                <tbody>
                {% for update in announcement_updates %}
                    {% include 'netbox_announcement/announcement_update_table.html' %}
                {% empty %}
                    <tr><td colspan="4" class="text-center text-muted">&mdash; No announcement updates &mdash;</td></tr>
                {% endfor %}
                </tbody>
            </table>
            <form class="form form-horizontal">
            {% csrf_token %}
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="update_content"> Update Announcement:</label>
                        <div class="col-md-9">
                            <textarea id="update_content" name="update_content" class="form-control" cols="40" rows="5" placeholder="Update Announcement Content"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <div class="checkbox">
                                <label for="mailed">
                                    <input type="checkbox" name="mailed" id="mailed" /> Mailed
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="update_status"> Announcement Update Status:</label>
                        <div class="col-md-4">
                            <select id="update_status" name="update_status"
                                class="netbox-select2-api form-control select2-hidden-accessible" 
                                data-url="/api/plugins/announcement/status/"
                                display-field="status" required>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-right noprint">
                    <button class="btn btn-primary" id="btn_post_update" name="btn_post_update"><i class="fa fa-plus"></i> Post Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
$(document).ready(function(){

    $('#btn_update').click(function(){
        if ($('#status_update').val() == null) {
            alert('Select updated status!');
            return false
        }
        var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
        $.ajax({
            url: "{% url 'plugins:netbox_announcement:announcement' pk=announcement.pk %}",
            method: 'POST',
            dataType: 'json',
            data: {
                'status_update': $('#status_update').val()
            },
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token)
            },
            success: function(result) {
                window.location.href = "{% url 'plugins:netbox_announcement:announcement' pk=announcement.pk %}"
            },
            error: function(xhr, ajaxOptions, thrownError) {
                if (xhr.status == 403) {
                    alert("Permission denied.");
                } else {
                    alert(xhr.responseText)
                }
            }

        })
    });
    $('#btn_post_update').click(function(){
        var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
        if ($('#update_status').val() == null) {
            alert('Select Announcement update status!');
            return false
        }
        
        $.ajax({
            url: "{% url 'plugins:netbox_announcement:announcement_update' pk=announcement.pk %}",
            method: 'POST',
            dataType: 'json',
            data: {
                'update_status': $('#update_status').val(),
                'update_content':$('#update_content').val(),
                'mailed': $('#mailed').val()
            },
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token)
            },
            success: function(result) {
                window.location.href = "{% url 'plugins:netbox_announcement:announcement' pk=announcement.pk %}"
            },
            error: function(xhr, ajaxOptions, thrownError) {
                if (xhr.status == 403) {
                    alert("Permission denied.");
                } else {
                    alert(xhr.responseText)
                }
            }
            
        })
    });
})
</script>
{% endblock %}