{% load static %}
{% load accounts_tags %}
{% load channels_tags %}

<div class="app-sidebar__overlay" data-bs-toggle="sidebar"></div>
<aside class="app-sidebar">
    <div class="side-header">
        <a class="header-brand1" href="{% url 'core:dashboard' %}">
            <img src="{% static 'images/brands/logo_white.png' %}" class="header-brand-img desktop-logo" alt="logo">
            <img src="{% static 'images/Light mode  version.png' %}" class="header-brand-img light-logo" alt="logo">
            <img src="{% static 'images/Dark mode  version.png' %}" class="header-brand-img toggle-logo" alt="logo">
            <img src="{% static 'images/brands/logo_black.png' %}" class="header-brand-img light-logo1" alt="logo">
        </a><!-- LOGO -->
    </div>
    <ul class="side-menu mt-1">
        <li><h3>Main</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'core:dashboard' %}">
                <i class="side-menu__icon fe fe-home"></i>
                <span class="side-menu__label">Dashboard</span>
            </a>
        </li>

        <!-- Channel Management Section -->
        {% if user|user_can_access_channels %}
        <li><h3>Channel Management</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'channels:dashboard' %}">
                <i class="side-menu__icon fe fe-tv"></i>
                <span class="side-menu__label">Channels Dashboard</span>
            </a>
        </li>
        
        <!-- Channels Section -->
        {% if user|has_perm:"channels.view_channel" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-monitor"></i>
                <span class="side-menu__label">Channels</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'channels:channel_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Channels
                </a></li>
                {% if user|has_perm:"channels.add_channel" %}
                <li><a href="{% url 'channels:channel_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Add Channel
                </a></li>
                {% endif %}
                {% if user|has_perm:"channels.view_channelzone" %}
                <li><a href="{% url 'channels:zone_list' %}" class="slide-item">
                    <i class="fe fe-map"></i> Channel Zones
                </a></li>
                {% endif %}
                {% if user|has_perm:"channels.view_channelcodec" %}
                <li><a href="{% url 'channels:codec_list' %}" class="slide-item">
                    <i class="fe fe-settings"></i> Codecs
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- EPG Section -->
        {% if user|has_perm:"channels.view_epgprogram" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-calendar"></i>
                <span class="side-menu__label">EPG Programs</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'channels:epg_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Programs
                </a></li>
                {% if user|has_perm:"channels.add_epgprogram" %}
                <li><a href="{% url 'channels:epg_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Add Program
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- Jingles Section -->
        {% if user|has_perm:"channels.view_jingle" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-music"></i>
                <span class="side-menu__label">Jingles</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'channels:jingle_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Jingles
                </a></li>
                {% if user|has_perm:"channels.add_jingle" %}
                <li><a href="{% url 'channels:jingle_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Add Jingle
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- Channel Quick Actions -->
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-zap"></i>
                <span class="side-menu__label">Channel Actions</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                {% if user|has_perm:"channels.add_channel" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createChannelModal()">
                    <i class="fe fe-plus-circle"></i> Add Channel
                </a></li>
                {% endif %}
                {% if user|has_perm:"channels.add_channelzone" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createZoneModal()">
                    <i class="fe fe-map-pin"></i> Create Zone
                </a></li>
                {% endif %}
                {% if user|has_perm:"channels.add_epgprogram" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createEPGModal()">
                    <i class="fe fe-calendar-plus"></i> Add Program
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- User Management Section -->
        {% if user|has_user_management_permission %}
        <li><h3>User Management</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'accounts:management_dashboard' %}">
                <i class="side-menu__icon fe fe-users"></i>
                <span class="side-menu__label">Management Dashboard</span>
            </a>
        </li>
        
        <!-- Users Section -->
        {% if user|has_perm:"accounts.view_user" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-user"></i>
                <span class="side-menu__label">Users</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:user_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Users
                </a></li>
                {% if user|has_perm:"accounts.add_user" %}
                <li><a href="{% url 'accounts:user_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Add User
                </a></li>
                {% endif %}
                <li><a href="{% url 'accounts:activity_list' %}" class="slide-item">
                    <i class="fe fe-activity"></i> User Activities
                </a></li>
                <li><a href="{% url 'accounts:session_list' %}" class="slide-item">
                    <i class="fe fe-monitor"></i> User Sessions
                </a></li>
            </ul>
        </li>
        {% endif %}

        <!-- Roles Section -->
        {% if user|has_perm:"accounts.view_role" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-shield"></i>
                <span class="side-menu__label">Roles</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:role_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Roles
                </a></li>
                {% if user|has_perm:"accounts.add_role" %}
                <li><a href="{% url 'accounts:role_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Create Role
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- Departments Section -->
        {% if user|has_perm:"accounts.view_department" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-grid"></i>
                <span class="side-menu__label">Departments</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:department_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Departments
                </a></li>
                {% if user|has_perm:"accounts.add_department" %}
                <li><a href="{% url 'accounts:department_create' %}" class="slide-item">
                    <i class="fe fe-plus"></i> Create Department
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- Permissions Section -->
        {% if user|has_perm:"auth.view_permission" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-lock"></i>
                <span class="side-menu__label">Permissions</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:permission_list' %}" class="slide-item">
                    <i class="fe fe-list"></i> All Permissions
                </a></li>
            </ul>
        </li>
        {% endif %}

        <!-- User Quick Actions -->
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-zap"></i>
                <span class="side-menu__label">Quick Actions</span>
                <i class="angle fa fa-angle-right"></i>
            </a>
            <ul class="slide-menu">
                {% if user|has_perm:"accounts.add_user" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createUserModal()">
                    <i class="fe fe-user-plus"></i> Add User
                </a></li>
                {% endif %}
                {% if user|has_perm:"accounts.add_role" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createRoleModal()">
                    <i class="fe fe-shield-plus"></i> Create Role
                </a></li>
                {% endif %}
                {% if user|has_perm:"accounts.add_department" %}
                <li><a href="javascript:void(0)" class="slide-item" onclick="createDepartmentModal()">
                    <i class="fe fe-grid-plus"></i> Create Department
                </a></li>
                {% endif %}
            </ul>
        </li>
        {% endif %}

        <!-- Profile Section -->
        <li><h3>Profile</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'accounts:profile' %}">
                <i class="side-menu__icon fe fe-user"></i>
                <span class="side-menu__label">My Profile</span>
            </a>
        </li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'accounts:settings' %}">
                <i class="side-menu__icon fe fe-settings"></i>
                <span class="side-menu__label">Settings</span>
            </a>
        </li>
    </ul>
</aside>

<!-- Modal Scripts -->
<script>
// Global functions for modal creation
function createChannelModal() {
    const modal = `
        <div class="modal fade" id="createChannelModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">Create New Channel</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createChannelForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Channel Name *</label>
                                        <input type="text" class="form-control" name="name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Display Name</label>
                                        <input type="text" class="form-control" name="display_name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Channel Number</label>
                                        <input type="text" class="form-control" name="channel_number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Channel Type</label>
                                        <select class="form-select" name="channel_type">
                                            <option value="terrestrial">Terrestrial</option>
                                            <option value="cable">Cable</option>
                                            <option value="satellite">Satellite</option>
                                            <option value="iptv">IPTV</option>
                                            <option value="streaming">Streaming</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Stream URL</label>
                                        <input type="url" class="form-control" name="stream_url">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Language</label>
                                        <input type="text" class="form-control" name="language">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Description</label>
                                        <textarea class="form-control" name="description" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="submitChannelForm()">Create Channel</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createChannelModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createChannelModal'));
    modalElement.show();
}

function createZoneModal() {
    const modal = `
        <div class="modal fade" id="createZoneModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title">Create New Zone</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createZoneForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label">Zone Name *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Zone Code *</label>
                                <input type="text" class="form-control" name="code" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Timezone</label>
                                <select class="form-select" name="timezone">
                                    <option value="UTC">UTC</option>
                                    <option value="America/New_York">America/New_York</option>
                                    <option value="Europe/London">Europe/London</option>
                                    <option value="Asia/Tokyo">Asia/Tokyo</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="3"></textarea>
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" name="is_active" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-info" onclick="submitZoneForm()">Create Zone</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createZoneModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createZoneModal'));
    modalElement.show();
}

function createEPGModal() {
    const modal = `
        <div class="modal fade" id="createEPGModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title">Create New EPG Program</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createEPGForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Program Title *</label>
                                        <input type="text" class="form-control" name="title" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Program Type</label>
                                        <select class="form-select" name="program_type">
                                            <option value="movie">Movie</option>
                                            <option value="series">TV Series</option>
                                            <option value="news">News</option>
                                            <option value="sports">Sports</option>
                                            <option value="documentary">Documentary</option>
                                            <option value="entertainment">Entertainment</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Start Time *</label>
                                        <input type="datetime-local" class="form-control" name="start_time" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">End Time *</label>
                                        <input type="datetime-local" class="form-control" name="end_time" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Duration (minutes)</label>
                                        <input type="number" class="form-control" name="duration" min="1">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Language</label>
                                        <input type="text" class="form-control" name="language">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Description</label>
                                        <textarea class="form-control" name="description" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-success" onclick="submitEPGForm()">Create Program</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createEPGModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createEPGModal'));
    modalElement.show();
}

function createUserModal() {
    const modal = `
        <div class="modal fade" id="createUserModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">Create New User</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createUserForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label">Email *</label>
                                <input type="email" class="form-control" name="email" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Username *</label>
                                <input type="text" class="form-control" name="username" required>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">First Name *</label>
                                        <input type="text" class="form-control" name="first_name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Last Name *</label>
                                        <input type="text" class="form-control" name="last_name" required>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Password *</label>
                                <input type="password" class="form-control" name="password1" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Confirm Password *</label>
                                <input type="password" class="form-control" name="password2" required>
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" name="is_active" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="submitUserForm()">Create User</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createUserModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createUserModal'));
    modalElement.show();
}

function createRoleModal() {
    const modal = `
        <div class="modal fade" id="createRoleModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-warning text-dark">
                        <h5 class="modal-title">Create New Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createRoleForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label">Role Name *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Role Code *</label>
                                <input type="text" class="form-control" name="code" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Role Type</label>
                                <select class="form-select" name="role_type">
                                    <option value="system">System Role</option>
                                    <option value="custom">Custom Role</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Level</label>
                                <input type="number" class="form-control" name="level" min="1" max="10" value="5">
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" name="is_active" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-warning" onclick="submitRoleForm()">Create Role</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createRoleModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createRoleModal'));
    modalElement.show();
}

function createDepartmentModal() {
    const modal = `
        <div class="modal fade" id="createDepartmentModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title">Create New Department</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createDepartmentForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label class="form-label">Department Name *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Department Code *</label>
                                <input type="text" class="form-control" name="code" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="3"></textarea>
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" name="is_active" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-info" onclick="submitDepartmentForm()">Create Department</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('createDepartmentModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modal);
    
    // Show modal
    const modalElement = new bootstrap.Modal(document.getElementById('createDepartmentModal'));
    modalElement.show();
}

// Form submission functions
function submitChannelForm() {
    const form = document.getElementById('createChannelForm');
    const formData = new FormData(form);
    
    fetch('{% url "channels:channel_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Channel created successfully');
            location.reload();
        } else {
            alert('Error creating channel: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating channel');
    });
}

function submitZoneForm() {
    const form = document.getElementById('createZoneForm');
    const formData = new FormData(form);
    
    fetch('{% url "channels:zone_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Zone created successfully');
            location.reload();
        } else {
            alert('Error creating zone: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating zone');
    });
}

function submitEPGForm() {
    const form = document.getElementById('createEPGForm');
    const formData = new FormData(form);
    
    fetch('{% url "channels:epg_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('EPG Program created successfully');
            location.reload();
        } else {
            alert('Error creating EPG program: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating EPG program');
    });
}

function submitUserForm() {
    const form = document.getElementById('createUserForm');
    const formData = new FormData(form);
    
    // Basic validation
    if (formData.get('password1') !== formData.get('password2')) {
        alert('Passwords do not match');
        return;
    }
    
    fetch('{% url "accounts:user_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('User created successfully');
            location.reload();
        } else {
            alert('Error creating user: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating user');
    });
}

function submitRoleForm() {
    const form = document.getElementById('createRoleForm');
    const formData = new FormData(form);
    
    fetch('{% url "accounts:role_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Role created successfully');
            location.reload();
        } else {
            alert('Error creating role: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating role');
    });
}

function submitDepartmentForm() {
    const form = document.getElementById('createDepartmentForm');
    const formData = new FormData(form);
    
    fetch('{% url "accounts:department_create" %}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': formData.get('csrfmiddlewaretoken')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Department created successfully');
            location.reload();
        } else {
            alert('Error creating department: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error creating department');
    });
}
</script>