{% extends 'layouts/base.html' %}

{% load static %}

{% block title %}
    {% if object %}Edit Role - {{ object.name }}
    {% else %} Add Role {% endif %}
{% endblock title %}

{% block extra_css %}
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet">
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
       display: none;
   }
   
   /* Modern loading spinner */
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #3498db;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .btn-loading {
       position: relative;
       pointer-events: none;
   }
   
   .btn-loading::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       margin: auto;
       border: 2px solid transparent;
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

   /* Form validation styles */
   .form-control.is-invalid, .form-select.is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .form-control.is-valid, .form-select.is-valid {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .validation-error {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 5px;
      display: block;
   }

   .validation-success {
      color: #155724;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .shake-animation {
      animation: shake 0.5s ease-in-out;
   }

   @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
   }

    /* Role Preview Styles */
    .role-preview {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        margin-top: 20px;
    }
    
    .preview-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .badge {
        margin: 0.25rem;
    }
    
    /* Card styles to match agency form */
    .card {
        margin-bottom: 1.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 1.25rem;
    }
    
    .card-title {
        margin-bottom: 0;
        font-size: 1.125rem;
        font-weight: 600;
        display: flex;
        align-items: center;
    }
    
    .card-title i {
        margin-right: 0.5rem;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    /* Enhanced Permission styles - Working Version */
    .permissions-container {
        max-height: 500px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1rem;
        background: white;
    }

    .permission-group {
        margin-bottom: 2rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden;
    }

    .permission-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 1rem 1.5rem;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }

    .permission-group-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin: 0;
        text-transform: capitalize;
    }

    .select-all-group {
        font-size: 0.875rem;
        color: #007bff;
        text-decoration: none;
        padding: 0.25rem 0.75rem;
        border: 1px solid #007bff;
        border-radius: 15px;
        transition: all 0.2s ease;
        background: white;
        cursor: pointer;
    }

    .select-all-group:hover {
        background: #007bff;
        color: white;
        text-decoration: none;
    }

    .permissions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 0.75rem;
        padding: 1rem;
    }

    .permission-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border: 1px solid #e9ecef;
        border-radius: 0.375rem;
        background: #ffffff;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .permission-item:hover {
        background: #e7f3ff;
        border-color: #007bff;
        transform: translateY(-1px);
    }

    .permission-item.selected {
        background: #d4edda;
        border-color: #28a745;
    }

    .permission-checkbox {
        margin-right: 0.75rem;
        transform: scale(1.1);
        cursor: pointer;
    }

    .permission-label {
        flex: 1;
        margin: 0;
        cursor: pointer;
        font-size: 0.875rem;
    }

    .permission-codename {
        display: block;
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
        font-family: monospace;
    }

    .permission-stats {
        text-align: right;
        padding: 1rem 1.5rem;
    }

    .permission-count {
        font-size: 1.5rem;
        font-weight: 600;
        color: #007bff;
    }

    .permission-count-label {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .search-permissions {
        margin-bottom: 1rem;
    }

    #permission-search {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        padding: 0.75rem;
    }

    /* Icon preview styles */
    .icon-preview {
        width: 60px;
        height: 60px;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        margin-right: 1rem;
    }

    .icon-preview i {
        font-size: 1.5rem;
        color: #6c757d;
    }

    /* Select2 custom styles */
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        padding-left: 12px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }

    /* Action buttons */
    .form-actions {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn-action {
        min-width: 120px;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .permissions-grid {
            grid-template-columns: 1fr;
        }
        
        .permission-group-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .select-all-group {
            margin-top: 0.5rem;
        }
        
        .form-actions {
            flex-direction: column;
            gap: 1rem;
        }
    }


/* Enhanced Permission styles - Hidden Checkboxes & Collapsible Sections */
.permissions-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    background: white;
}

.permission-group {
    margin-bottom: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.permission-group.collapsed .permissions-grid {
    display: none;
}

.permission-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.permission-group-header:hover {
    background: #e9ecef;
}

.permission-group-header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.permission-group-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
    text-transform: capitalize;
}

.permission-count-badge {
    margin-left: 0.75rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: #007bff;
    color: white;
    border-radius: 12px;
}

.collapse-icon {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    color: #6c757d;
}

.permission-group.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.permission-group-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.select-all-group {
    font-size: 0.875rem;
    color: #007bff;
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border: 1px solid #007bff;
    border-radius: 15px;
    transition: all 0.2s ease;
    background: white;
    cursor: pointer;
}

.select-all-group:hover {
    background: #007bff;
    color: white;
    text-decoration: none;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.permission-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.permission-item:hover {
    background: #e7f3ff;
    border-color: #007bff;
    transform: translateY(-1px);
}

.permission-item.selected {
    background: #d4edda;
    border-color: #28a745;
}

.permission-item.selected::before {
    content: '✓';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #28a745;
    font-weight: bold;
    font-size: 1rem;
}

/* Hide the actual checkbox */
.permission-checkbox {
    display: none !important;
}

.permission-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: 0.875rem;
}

.permission-name {
    display: block;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.permission-codename {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-family: monospace;
}

.permission-stats {
    text-align: right;
    padding: 1rem 1.5rem;
}

.permission-count {
    font-size: 1.5rem;
    font-weight: 600;
    color: #007bff;
}

.permission-count-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.search-permissions {
    margin-bottom: 1rem;
}

#permission-search {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    padding: 0.75rem;
}

/* Collapse/Expand all button */
.permissions-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.collapse-all-btn {
    font-size: 0.875rem;
    color: #6c757d;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid #ced4da;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.collapse-all-btn:hover {
    background: #f8f9fa;
    text-decoration: none;
    color: #495057;
}

/* Animation for smooth expand/collapse */
.permissions-grid {
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.permission-group.collapsed .permissions-grid {
    max-height: 0;
    padding: 0 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .permission-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .permission-group-actions {
        align-self: stretch;
        justify-content: flex-end;
    }
}
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% if object.pk %}Edit Role{% else %}Add Role{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'accounts:role_list' %}">Roles</a></li>
            {% if object.pk %}
                <li class="breadcrumb-item"><a href="{% url 'accounts:role_detail' object.id %}">{{ object.name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            {% else %}
                <li class="breadcrumb-item active" aria-current="page">Add</li>
            {% endif %}
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %} 
<form method="post" id="role-form" enctype="multipart/form-data" novalidate>
    {% csrf_token %}
    
    <!-- Basic Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fe fe-info text-primary"></i>
                Role Information
            </h3>
        </div>  
        <div class="card-body">
            <div class="row">
                <!-- Icon Preview -->
                <div class="col-md-2">
                    <label class="form-label">Role Icon</label>
                    <div class="icon-preview" id="icon-preview">
                        <i class="fe fe-{% if object.icon %}{{ object.icon }}{% else %}shield{% endif %}" id="icon-display"></i>
                    </div>
                </div>
                
                <!-- Role Details -->
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-6"> 
                            <div class="mb-3">
                                <label for="id_name" class="form-label required-field">Role Name</label>
                                <input class="form-control" placeholder="Enter role name" id="id_name" name="name" 
                                    value="{% if form_data.name %}{{ form_data.name }}{% elif object %}{{ object.name }}{% endif %}" required>
                                <div class="validation-error invalid-feedback"></div> 
                                <div class="help-text">Clear, descriptive name for this role</div>
                            </div> 
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_code" class="form-label">Role Code</label>
                                <input class="form-control" placeholder="role_code" id="id_code" name="code" 
                                    value="{% if form_data.code %}{{ form_data.code }}{% elif object %}{{ object.code }}{% endif %}">
                                <div class="validation-error invalid-feedback"></div>
                                <div class="help-text">Unique identifier (auto-generated if empty)</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_icon" class="form-label">Icon</label>
                                <select class="form-select select2-show-search" id="id_icon" name="icon" data-placeholder="Choose an icon">
                                    <option value="">Select icon...</option>
                                    <option value="shield" {% if object.icon == 'shield' or form_data.icon == 'shield' %}selected{% endif %}>Shield</option>
                                    <option value="users" {% if object.icon == 'users' or form_data.icon == 'users' %}selected{% endif %}>Users</option>
                                    <option value="key" {% if object.icon == 'key' or form_data.icon == 'key' %}selected{% endif %}>Key</option>
                                    <option value="lock" {% if object.icon == 'lock' or form_data.icon == 'lock' %}selected{% endif %}>Lock</option>
                                    <option value="star" {% if object.icon == 'star' or form_data.icon == 'star' %}selected{% endif %}>Star</option>
                                    <option value="crown" {% if object.icon == 'crown' or form_data.icon == 'crown' %}selected{% endif %}>Crown</option>
                                    <option value="award" {% if object.icon == 'award' or form_data.icon == 'award' %}selected{% endif %}>Award</option>
                                    <option value="user-check" {% if object.icon == 'user-check' or form_data.icon == 'user-check' %}selected{% endif %}>User Check</option>
                                </select>
                                <div class="help-text">Choose an icon to represent this role</div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="id_priority" class="form-label">Level</label>
                                <select class="form-select select2-show-search" id="id_priority" name="priority" data-placeholder="Select level">
                                    {% for value, label in priority_choices %}
                                        <option value="{{ value }}" 
                                            {% if object.level == value|add:0 or form_data.level == value %}selected{% endif %}>
                                            {{ label }}
                                        </option>
                                    {% endfor %}
                                </select>
                                <div class="help-text">Role hierarchy level (1=highest, 5=lowest)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="mb-3">
                <label for="id_description" class="form-label">Description</label>
                <textarea class="form-control" id="id_description" name="description" rows="3" 
                            placeholder="Describe the purpose and responsibilities of this role...">{% if form_data.description %}{{ form_data.description }}{% elif object %}{{ object.description }}{% endif %}</textarea>
                <div class="help-text">Provide a clear description of this role's purpose and responsibilities</div>
            </div>
        </div>
    </div>
    
    <!-- Role Configuration Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fe fe-settings text-info"></i>
                Role Configuration
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="id_parent_role" class="form-label">Parent Role</label>
                        <select class="form-select select2-show-search" id="id_parent_role" name="parent_role" 
                                data-placeholder="Select parent role">
                            <option value="">No parent role</option>
                            {% for role in existing_roles %}
                                <option value="{{ role.id }}" 
                                    {% if object.parent_role_id == role.id or form_data.parent_role_id == role.id|stringformat:"s" %}selected{% endif %}>
                                    {{ role.name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="help-text">Optional: Set role hierarchy</div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="id_role_type" class="form-label">Role Type</label>
                        <select class="form-select select2-show-search" id="id_role_type" name="role_type" data-placeholder="Select type">
                            {% for value, label in role_type_choices %}
                                <option value="{{ value }}" 
                                    {% if object.role_type == value or form_data.role_type == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="help-text">Type of role for categorization</div>
                    </div>
                </div>
                 
            </div>
            
            <!-- Role Flags -->
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label">Role Settings</label>
                    <div class="d-flex flex-wrap gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="id_is_default" name="is_default" 
                                {% if object.is_default or form_data.is_default %}checked{% endif %}>
                            <label class="form-check-label" for="id_is_default">Default role</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="id_is_active" name="is_active" 
                                   {% if object.is_active or form_data.is_active or not object.pk %}checked{% endif %}>
                            <label class="form-check-label" for="id_is_active">Active</label>
                        </div>
                         
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="id_is_system_role" name="is_system_role" 
                                   {% if object.is_system_role or form_data.is_system_role %}checked{% endif %}>
                            <label class="form-check-label" for="id_is_system_role">System role</label>
                        </div>
                    </div>
                    <div class="help-text">Configure role behavior and availability</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Permissions Card - Enhanced and Working --> 
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fe fe-key text-success"></i>
                Permissions
            <div class="permission-stats">
                <div class="permission-count" id="selected-count">0</div>
                <div class="permission-count-label">permissions selected</div>
            </div>
            </h3>

        </div>      
        <div class="card-body">
            <div class="search-permissions">
                <input type="text" class="form-control" id="permission-search" placeholder="Search permissions...">
            </div>

            <div class="permissions-header-actions">
                <button type="button" class="collapse-all-btn" id="collapse-all">
                    <i class="fe fe-minus-square me-1"></i>
                    Collapse All
                </button>
                <button type="button" class="collapse-all-btn" id="expand-all">
                    <i class="fe fe-plus-square me-1"></i>
                    Expand All
                </button>
            </div>

            <div class="permissions-container" id="permissions-container">
                {% for app_name, app_permissions in permission_groups.items %}
                <div class="permission-group" data-app="{{ app_name }}">
                    <div class="permission-group-header" onclick="toggleGroup('{{ app_name }}')">
                        <div class="permission-group-header-left">
                            <h6 class="permission-group-title">{{ app_name|title }}</h6>
                            <span class="permission-count-badge" data-app="{{ app_name }}">
                                <span class="selected-count">0</span>/<span class="total-count">{{ app_permissions|length }}</span>
                            </span>
                            <i class="fe fe-chevron-down collapse-icon"></i>
                        </div>
                        <div class="permission-group-actions" onclick="event.stopPropagation();">
                            <button type="button" class="select-all-group" data-app="{{ app_name }}">Select All</button>
                        </div>
                    </div>
                    
                    <div class="permissions-grid">
                        {% for permission in app_permissions %}
                        <div class="permission-item" data-permission="{{ permission.name|lower }}" onclick="togglePermission('perm_{{ permission.pk }}')">
                            <input type="checkbox" class="form-check-input permission-checkbox" 
                                    id="perm_{{ permission.pk }}" name="permissions" value="{{ permission.pk }}"
                                    {% if permission.pk|stringformat:"s" in form_data.permissions or permission in object.permissions.all %}checked{% endif %}>
                            <label class="permission-label" for="perm_{{ permission.pk }}">
                                <span class="permission-name">{{ permission.name }}</span>
                                <span class="permission-codename">{{ permission.content_type.app_label }}.{{ permission.codename }}</span>
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Role Preview Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fe fe-eye text-warning"></i>
                Role Preview
            </h3>
        </div>
        <div class="card-body">
            <div class="role-preview" id="role-preview">
                <div class="preview-icon" id="preview-icon-container">
                    <i class="fe fe-shield" id="preview-icon-display"></i>
                </div>
                <h5 class="text-dark mb-2" id="preview-name">Role Name</h5>
                <p class="text-muted mb-2" id="preview-code">role_code</p>
                <div class="d-flex justify-content-center flex-wrap mb-3">
                    <span class="badge bg-secondary" id="preview-priority">Priority: 50</span>
                    <span class="badge bg-info" id="preview-permissions">0 permissions</span>
                    <span class="badge bg-success" id="preview-status">Active</span>
                </div>
                <p class="text-muted mb-0" id="preview-description">Role description will appear here...</p>
            </div>
        </div>
    </div>

    <!-- Form Actions --> 
    <div class="form-actions">
        <a href="{% url 'accounts:role_list' %}" class="btn btn-outline-secondary btn-action">
            <i class="fe fe-arrow-left me-2"></i>Cancel
        </a>
        
        <div class="d-flex gap-2">
            {% if object %}
            <button type="button" class="btn btn-info btn-action" id="preview-changes">
                <i class="fe fe-eye me-2"></i>Preview Changes
            </button>
            {% endif %}
            
            <button type="submit" class="btn btn-primary btn-action" id="submit-btn">
                <i class="fe fe-{% if object %}save{% else %}plus{% endif %} me-2"></i>
                {% if object %}Update Role{% else %}Create Role{% endif %}
            </button>
        </div>
    </div>
</form> 
{% endblock content %}

{% block modals %}
<!-- Preview Changes Modal -->
{% if object %}
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Preview Changes</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="preview-content">
                    <!-- Preview content will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="apply-changes">Apply Changes</button>
            </div>
        </div>
    </div>
</div>
{% endif %} 
{% endblock modals %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/sweetalert2/sweetalert2.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';
    
    // Initialize Select2 dropdowns
    $('.select2-show-search').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true
    });
    
    const form = document.getElementById('role-form');
    const permissionSearch = document.getElementById('permission-search');
    const permissionsContainer = document.getElementById('permissions-container');
    const selectedCount = document.getElementById('selected-count');
    const nameInput = document.getElementById('id_name');
    const codeInput = document.getElementById('id_code');
    
    // Initialize permission count and preview 
    updatePermissionCount();
    updateAllGroupCounts();
    updatePreview();
    
    // Icon change handler
    const iconSelect = document.getElementById('id_icon');
    iconSelect.addEventListener('change', function() {
        const selectedIcon = this.value || 'shield';
        updateIconDisplay(selectedIcon);
        updatePreview();
    });
    
    // Real-time preview update handlers
    nameInput.addEventListener('input', updatePreview);
    codeInput.addEventListener('input', updatePreview);
    document.getElementById('id_description').addEventListener('input', updatePreview);
    document.getElementById('id_priority').addEventListener('change', updatePreview);
    document.getElementById('id_is_active').addEventListener('change', updatePreview);
    
    // Permission search functionality - Working
    if (permissionSearch) {
        permissionSearch.addEventListener('input', function() {
            const query = this.value.toLowerCase().trim();
            filterPermissions(query);
        });
    }
    
    // Select all functionality for permission groups - Updated
    document.querySelectorAll('.select-all-group').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation(); // Prevent group toggle
            
            const app = this.dataset.app;
            const group = document.querySelector(`[data-app="${app}"]`);
            const checkboxes = group.querySelectorAll('.permission-checkbox');
            
            // Check if all visible checkboxes are checked
            const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
                const item = cb.closest('.permission-item');
                return item && item.style.display !== 'none';
            });
            
            const allChecked = visibleCheckboxes.length > 0 && visibleCheckboxes.every(cb => cb.checked);
            
            // Toggle all visible checkboxes
            visibleCheckboxes.forEach(checkbox => {
                checkbox.checked = !allChecked;
                updatePermissionItemStyle(checkbox);
            });
            
            // Update button text
            this.textContent = allChecked ? 'Select All' : 'Deselect All';
            
            updatePermissionCount();
            updateGroupCounts(visibleCheckboxes[0]);
            updatePreview();
        });
    });
    
    // Initialize individual permission checkboxes
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        // Initial styling
        updatePermissionItemStyle(checkbox);
    });
    
    // Permission item click handler - Working
    window.togglePermission = function(checkboxId) {
        const checkbox = document.getElementById(checkboxId);
        if (checkbox) {
            checkbox.checked = !checkbox.checked;
            updatePermissionItemStyle(checkbox);
            updatePermissionCount();
            updateGroupCounts(checkbox);
            updateGroupSelectAllButton(checkbox);
            updatePreview();
        }
    };

        // Group toggle function
    window.toggleGroup = function(appName) {
        const group = document.querySelector(`[data-app="${appName}"]`);
        if (group) {
            group.classList.toggle('collapsed');
        }
    };

    // Collapse/Expand all functionality
    document.getElementById('collapse-all').addEventListener('click', function() {
        document.querySelectorAll('.permission-group').forEach(group => {
            group.classList.add('collapsed');
        });
        
        this.innerHTML = '<i class="fe fe-minus-square me-1"></i>Collapsed';
        document.getElementById('expand-all').innerHTML = '<i class="fe fe-plus-square me-1"></i>Expand All';
    });
    
    document.getElementById('expand-all').addEventListener('click', function() {
        document.querySelectorAll('.permission-group').forEach(group => {
            group.classList.remove('collapsed');
        });
        
        this.innerHTML = '<i class="fe fe-plus-square me-1"></i>Expanded';
        document.getElementById('collapse-all').innerHTML = '<i class="fe fe-minus-square me-1"></i>Collapse All';
    });

    // Auto-generate code from name
    nameInput.addEventListener('input', function() {
        if (!codeInput.value || codeInput.dataset.autoGenerated === 'true') {
            const generatedCode = generateCodeFromName(this.value);
            codeInput.value = generatedCode;
            codeInput.dataset.autoGenerated = 'true';
        }
        validateRoleName(this.value);
    });
    
    // Mark code as manually entered if user types in it
    codeInput.addEventListener('input', function() {
        if (this.value !== generateCodeFromName(nameInput.value)) {
            this.dataset.autoGenerated = 'false';
        }
        validateRoleCode(this.value);
    });
    
    
    // Helper Functions
    function filterPermissions(query) {
        const permissionItems = document.querySelectorAll('.permission-item');
        const permissionGroups = document.querySelectorAll('.permission-group');
        
        permissionItems.forEach(item => {
            const permissionName = item.dataset.permission || '';
            const nameElement = item.querySelector('.permission-name');
            const codeElement = item.querySelector('.permission-codename');
            
            const name = nameElement ? nameElement.textContent.toLowerCase() : '';
            const codename = codeElement ? codeElement.textContent.toLowerCase() : '';
            
            const isVisible = !query || 
                           permissionName.includes(query) || 
                           name.includes(query) || 
                           codename.includes(query);
            
            item.style.display = isVisible ? 'flex' : 'none';
        });
        
        // Hide/show groups based on visible permissions and update counts
        permissionGroups.forEach(group => {
            const visibleItems = group.querySelectorAll('.permission-item:not([style*="none"])');
            group.style.display = visibleItems.length > 0 ? 'block' : 'none';
            
            // Update select all button text for visible permissions
            if (visibleItems.length > 0) {
                const firstCheckbox = visibleItems[0].querySelector('.permission-checkbox');
                updateGroupSelectAllButton(firstCheckbox);
                updateGroupCounts(firstCheckbox);
            }
        });
    }
    
    function updatePermissionItemStyle(checkbox) {
        const item = checkbox.closest('.permission-item');
        if (checkbox.checked) {
            item.classList.add('selected');
        } else {
            item.classList.remove('selected');
        }
    }
    
    function updatePermissionCount() {
        const checkedBoxes = document.querySelectorAll('.permission-checkbox:checked');
        document.getElementById('selected-count').textContent = checkedBoxes.length;
    }
    
    function updateGroupCounts(checkbox) {
        const group = checkbox.closest('.permission-group');
        if (!group) return;
        
        const app = group.dataset.app;
        const badge = group.querySelector(`[data-app="${app}"] .selected-count`);
        const totalBadge = group.querySelector(`[data-app="${app}"] .total-count`);
        
        if (badge && totalBadge) {
            const groupCheckboxes = group.querySelectorAll('.permission-checkbox');
            const visibleCheckboxes = Array.from(groupCheckboxes).filter(cb => {
                const item = cb.closest('.permission-item');
                return item && item.style.display !== 'none';
            });
            
            const selectedCount = visibleCheckboxes.filter(cb => cb.checked).length;
            badge.textContent = selectedCount;
            totalBadge.textContent = visibleCheckboxes.length;
        }
    }
    
    function updateAllGroupCounts() {
        document.querySelectorAll('.permission-group').forEach(group => {
            const firstCheckbox = group.querySelector('.permission-checkbox');
            if (firstCheckbox) {
                updateGroupCounts(firstCheckbox);
            }
        });
    }
    
    function updateGroupSelectAllButton(checkbox) {
        const group = checkbox.closest('.permission-group');
        if (!group) return;
        
        const selectAllButton = group.querySelector('.select-all-group');
        const groupCheckboxes = group.querySelectorAll('.permission-checkbox');
        
        // Only consider visible checkboxes
        const visibleCheckboxes = Array.from(groupCheckboxes).filter(cb => {
            const item = cb.closest('.permission-item');
            return item && item.style.display !== 'none';
        });
        
        const allChecked = visibleCheckboxes.length > 0 && visibleCheckboxes.every(cb => cb.checked);
        selectAllButton.textContent = allChecked ? 'Deselect All' : 'Select All';
    }
    
    function updatePreview() {
        const name = nameInput.value || 'Role Name';
        const code = codeInput.value || 'role_code';
        const description = document.getElementById('id_description').value || 'Role description will appear here...';
        const level = document.getElementById('id_priority').value || '1';  // Changed from priority to level
        const isActive = document.getElementById('id_is_active').checked;
        const checkedPermissions = document.querySelectorAll('.permission-checkbox:checked').length;
        
        document.getElementById('preview-name').textContent = name;
        document.getElementById('preview-code').textContent = code;
        document.getElementById('preview-description').textContent = description;
        document.getElementById('preview-priority').textContent = `Level: ${level}`;  // Updated text
        document.getElementById('preview-permissions').textContent = `${checkedPermissions} permissions`;
        
        const statusBadge = document.getElementById('preview-status');
        statusBadge.textContent = isActive ? 'Active' : 'Inactive';
        statusBadge.className = `badge ${isActive ? 'bg-success' : 'bg-warning'}`;
        
        // Update icon in preview
        const selectedIcon = document.getElementById('id_icon').value || 'shield';
        document.getElementById('preview-icon-display').className = `fe fe-${selectedIcon}`;
    }

    // Update form validation
    function validateForm() {
        let isValid = true;
        
        // Clear previous errors
        document.querySelectorAll('.validation-error').forEach(error => error.remove());
        document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
        
        // Validate required fields
        const name = nameInput.value.trim();
        if (!name) {
            showValidation(nameInput, false, 'Role name is required');
            isValid = false;
        }
        
        const code = codeInput.value.trim();
        if (!code) {
            showValidation(codeInput, false, 'Role code is required');
            isValid = false;
        } else if (!/^[a-z_]+$/.test(code)) {
            showValidation(codeInput, false, 'Role code must be lowercase with underscores only');
            isValid = false;
        }
        
        // Validate level (instead of priority)
        const level = document.getElementById('id_priority').value;
        if (level && (isNaN(level) || level < 1 || level > 5)) {
            showValidation(document.getElementById('id_priority'), false, 'Level must be between 1 and 5');
            isValid = false;
        }
        
        // Remove validation for fields that don't exist in your model
        // (max_users, expires_at validation removed)
        
        // Check permissions
        const checkedPermissions = document.querySelectorAll('.permission-checkbox:checked');
        if (checkedPermissions.length === 0) {
            Swal.fire({
                title: 'No Permissions Selected',
                text: 'Please select at least one permission for this role.',
                icon: 'warning',
                confirmButtonText: 'OK'
            });
            isValid = false;
        }
        
        return isValid;
    }
    
    function updateIconDisplay(icon) {
        document.getElementById('icon-display').className = `fe fe-${icon}`;
    }
    
    function generateCodeFromName(name) {
        return name.toLowerCase()
                   .replace(/[^\w\s]/g, '')
                   .replace(/\s+/g, '_')
                   .substring(0, 50);
    }
    
    // Real-time name validation
    let nameTimeout;
    function validateRoleName(name) {
        clearTimeout(nameTimeout);
        
        if (name.length < 2) {
            showValidation(nameInput, false, 'Role name must be at least 2 characters long');
            return;
        }
        
        nameTimeout = setTimeout(() => {
            const roleId = {{ object.pk|default:0 }};
            
            fetch('/accounts/api/validate-role-name/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    role_id: roleId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.valid) {
                    showValidation(nameInput, true, 'Role name is available');
                } else {
                    showValidation(nameInput, false, data.message || 'Role name is not available');
                }
            })
            .catch(error => {
                console.error('Error validating role name:', error);
                clearValidation(nameInput);
            });
        }, 500);
    }
    
    // Real-time code validation
    let codeTimeout;
    function validateRoleCode(code) {
        clearTimeout(codeTimeout);
        
        if (!code) {
            clearValidation(codeInput);
            return;
        }
        
        if (!/^[a-zA-Z0-9_]+$/.test(code)) {
            showValidation(codeInput, false, 'Role code can only contain letters, numbers, and underscores');
            return;
        }
        
        codeTimeout = setTimeout(() => {
            const roleId = {{ object.pk|default:0 }};
            
            fetch('/accounts/api/validate-role-code/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    code: code,
                    role_id: roleId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.valid) {
                    showValidation(codeInput, true, 'Role code is available');
                } else {
                    showValidation(codeInput, false, data.message || 'Role code is not available');
                }
            })
            .catch(error => {
                console.error('Error validating role code:', error);
                clearValidation(codeInput);
            });
        }, 500);
    }
    
    function showValidation(input, isValid, message) {
        const existingError = input.parentNode.querySelector('.validation-error');
        if (existingError) {
            existingError.remove();
        }
        
        input.classList.remove('is-valid', 'is-invalid');
        input.classList.add(isValid ? 'is-valid' : 'is-invalid');
        
        const feedback = document.createElement('div');
        feedback.className = `validation-error ${isValid ? 'validation-success' : ''}`;
        feedback.textContent = message;
        input.parentNode.appendChild(feedback);
    }
    
    function clearValidation(input) {
        const existingError = input.parentNode.querySelector('.validation-error');
        if (existingError) {
            existingError.remove();
        }
        input.classList.remove('is-valid', 'is-invalid');
    }
    
    // Form validation and submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (validateForm()) {
            // Show loading state
            const submitBtn = document.getElementById('submit-btn');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.classList.add('btn-loading');
            submitBtn.innerHTML = '<span class="loading-spinner me-2"></span>Saving...';
            
            // Re-enable button after timeout
            setTimeout(() => {
                submitBtn.disabled = false;
                submitBtn.classList.remove('btn-loading');
                submitBtn.innerHTML = originalText;
            }, 5000);
            
            this.submit();
        }
    });
  
    // Preview changes functionality
    const previewBtn = document.getElementById('preview-changes');
    if (previewBtn) {
        previewBtn.addEventListener('click', function() {
            const formData = new FormData(form);
            const previewContent = document.getElementById('preview-content');
            
            // Show loading
            previewContent.innerHTML = '<div class="text-center py-4"><div class="loading-spinner me-2"></div> Loading preview...</div>';
            
            fetch(`/accounts/roles/{% if object %}{{ object.pk }}{% else %}0{% endif %}/preview/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    previewContent.innerHTML = data.preview_html;
                } else {
                    previewContent.innerHTML = '<div class="alert alert-danger">Error loading preview: ' + (data.error || 'Unknown error') + '</div>';
                }
            })
            .catch(error => {
                console.error('Error loading preview:', error);
                previewContent.innerHTML = '<div class="alert alert-danger">Error loading preview</div>';
            });
            
            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('previewModal'));
            modal.show();
        });
    }
    
    // Apply changes from preview
    const applyBtn = document.getElementById('apply-changes');
    if (applyBtn) {
        applyBtn.addEventListener('click', function() {
            form.submit();
        });
    }
    
    // Helper function to get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Auto-save draft functionality (optional)
    let draftTimeout;
    function saveDraft() {
        clearTimeout(draftTimeout);
        draftTimeout = setTimeout(() => {
            const formData = new FormData(form);
            formData.append('save_draft', 'true');
            
            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.draft_saved) {
                    const draftIndicator = document.getElementById('draft-indicator') || document.createElement('small');
                    draftIndicator.id = 'draft-indicator';
                    draftIndicator.className = 'text-muted';
                    draftIndicator.textContent = 'Draft saved automatically';
                    
                    if (!document.getElementById('draft-indicator')) {
                        form.insertBefore(draftIndicator, form.firstChild);
                    }
                    
                    setTimeout(() => {
                        if (draftIndicator) {
                            draftIndicator.remove();
                        }
                    }, 3000);
                }
            })
            .catch(error => {
                console.error('Error saving draft:', error);
            });
        }, 2000);
    }
    
    // Bind draft saving to form changes (optional)
    const formInputs = form.querySelectorAll('input, select, textarea');
    formInputs.forEach(input => {
        input.addEventListener('input', saveDraft);
        input.addEventListener('change', saveDraft);
    });
    
    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+S or Cmd+S to save
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            form.dispatchEvent(new Event('submit'));
        }
        
        // Ctrl+Shift+P to preview (if editing)
        if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P' && previewBtn) {
            e.preventDefault();
            previewBtn.click();
        }
    });
    
    // Clear search on Escape
    permissionSearch.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            this.value = '';
            this.dispatchEvent(new Event('input'));
        }
    });
    
    // Initialize all group select-all buttons with correct text
    document.querySelectorAll('.permission-group').forEach(group => {
        const checkboxes = group.querySelectorAll('.permission-checkbox');
        const selectAllButton = group.querySelector('.select-all-group');
        const visibleCheckboxes = Array.from(checkboxes).filter(cb => {
            const item = cb.closest('.permission-item');
            return item && item.style.display !== 'none';
        });
        
        const allChecked = visibleCheckboxes.every(cb => cb.checked);
        selectAllButton.textContent = allChecked ? 'Deselect All' : 'Select All';
    });
    
});
</script>
{% endblock extra_js %}