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

{% block title %}TV Channels - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/css/buttons.bootstrap5.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">TV Channels</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">TV Channels</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channels Management</h3>
                <div class="card-options">
                    <a href="{% url 'channels:channel_create' %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Add New Channel
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="channels-table">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0">Name</th>
                                <th class="wd-20p border-bottom-0">Description</th>
                                <th class="wd-15p border-bottom-0">Status</th>
                                <th class="wd-15p border-bottom-0">Created</th>
                                <th class="wd-15p border-bottom-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in channels %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            <span class="avatar avatar-md brround" style="background-image: url({% static 'images/brand/logo-white.png' %})"></span>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ channel.name }}</h6>
                                            <small class="text-muted">ID: {{ channel.id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ channel.description|truncatechars:50 }}</td>
                                <td>
                                    {% if channel.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ channel.created_at|date:"M d, Y" }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'channels:channel_detail' channel.pk %}" class="btn btn-sm btn-info" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'channels:channel_update' channel.pk %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" onclick="deleteChannel({{ channel.pk }})">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">No channels found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/jszip.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.print.min.js' %}"></script>

<!-- Sweet Alert -->
<script src="{% static 'plugins/sweet-alert/sweetalert.min.js' %}"></script>

<script>
$(document).ready(function() {
    $('#channels-table').DataTable({
        "responsive": true,
        "pageLength": 25,
        "order": [[ 3, "desc" ]],
        "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
});

function deleteChannel(channelId) {
    swal({
        title: "Are you sure?",
        text: "This action cannot be undone!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            // Create a form and submit it
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/channels/' + channelId + '/delete/';
            
            var csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrfmiddlewaretoken';
            csrfToken.value = '{{ csrf_token }}';
            form.appendChild(csrfToken);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>
{% endblock %}