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

{% block title %}Gerenciamento em Lote de Permissões{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="fas fa-magic text-primary"></i>
                    Gerenciamento em Lote de Permissões
                </h1>
                <div>
                    <a href="{% url 'permissions:dashboard' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Voltar ao Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form method="post">
        {% csrf_token %}
        
        <!-- Passo 1: Selecionar Tipo de Objeto -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-layer-group"></i>
                            Passo 1: Selecionar Tipo de Objeto
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="objectType" class="font-weight-bold">Tipo de Objeto</label>
                            <select class="form-control form-control-lg" id="objectType" name="object_type" required>
                                <option value="">Selecione o tipo de objeto...</option>
                                <option value="workspace">Workspace</option>
                                <option value="portfolio">Portfolio</option>
                                <option value="project">Projeto</option>
                                <option value="board">Quadro</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Passo 2: Selecionar Objetos -->
        <div class="row mb-4" id="objectsSection" style="display: none;">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-list"></i>
                            Passo 2: Selecionar Objetos
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAll">
                                    <label class="form-check-label font-weight-bold" for="selectAll">
                                        Selecionar Todos
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <span class="badge badge-primary" id="selectedCount">0 selecionados</span>
                            </div>
                        </div>
                        <div id="objectsList" class="row">
                            <!-- Objetos serão carregados dinamicamente -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Passo 3: Configurar Permissões -->
        <div class="row mb-4" id="permissionSection" style="display: none;">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-shield-alt"></i>
                            Passo 3: Configurar Permissões
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="accessType" class="font-weight-bold">Tipo de Acesso</label>
                                    <select class="form-control" id="accessType" name="access_type" required>
                                        <option value="allow">Permitir</option>
                                        <option value="deny">Negar</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label class="font-weight-bold">Selecionar Colaboradores</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="selectAllCollaborators">
                                                <label class="form-check-label font-weight-bold" for="selectAllCollaborators">
                                                    Selecionar Todos os Colaboradores
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <span class="badge badge-info" id="selectedCollaboratorsCount">0 selecionados</span>
                                        </div>
                                    </div>
                                    <div class="mt-2" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                                        {% for collaborator in collaborators %}
                                            <div class="form-check">
                                                <input class="form-check-input collaborator-checkbox" type="checkbox" 
                                                       name="collaborator_ids" value="{{ collaborator.id }}" 
                                                       id="collab_{{ collaborator.id }}">
                                                <label class="form-check-label" for="collab_{{ collaborator.id }}">
                                                    {{ collaborator.nome }} <small class="text-muted">({{ collaborator.area.nome }})</small>
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <hr class="my-4">
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="font-weight-bold">Selecionar Áreas</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="selectAllAreas">
                                                <label class="form-check-label font-weight-bold" for="selectAllAreas">
                                                    Selecionar Todas as Áreas
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <span class="badge badge-warning" id="selectedAreasCount">0 selecionadas</span>
                                        </div>
                                    </div>
                                    <div class="mt-2" style="max-height: 150px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                                        {% for area in areas %}
                                            <div class="form-check">
                                                <input class="form-check-input area-checkbox" type="checkbox" 
                                                       name="area_ids" value="{{ area.id }}" 
                                                       id="area_{{ area.id }}">
                                                <label class="form-check-label" for="area_{{ area.id }}">
                                                    {{ area.nome }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Passo 4: Confirmar e Aplicar -->
        <div class="row mb-4" id="submitSection" style="display: none;">
            <div class="col-12">
                <div class="card shadow border-primary">
                    <div class="card-header py-3 bg-primary text-white">
                        <h6 class="m-0 font-weight-bold">
                            <i class="fas fa-check-circle"></i>
                            Passo 4: Confirmar e Aplicar
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <h6 class="font-weight-bold">Resumo da Operação:</h6>
                            <div id="operationSummary">
                                <!-- Resumo será preenchido dinamicamente -->
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-magic"></i>
                                Aplicar Permissões em Lote
                            </button>
                            <p class="text-muted mt-2">
                                <i class="fas fa-exclamation-triangle"></i>
                                Esta ação aplicará as permissões selecionadas a todos os objetos e colaboradores/áreas marcados.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Dados dos objetos
const objectsData = {
    workspace: [
        {% for workspace in workspaces %}
                            {id: {{ workspace.id }}, name: "{{ workspace.nome|escapejs }}", department: "{{ workspace.departamento.nome|escapejs }}"},
        {% endfor %}
    ],
    portfolio: [
        {% for portfolio in portfolios %}
            {id: {{ portfolio.id }}, name: "{{ portfolio.nome|escapejs }}", workspace: "{{ portfolio.workspace.nome|escapejs }}"},
        {% endfor %}
    ],
    project: [
        {% for project in projects %}
            {id: {{ project.id }}, name: "{{ project.nome|escapejs }}", portfolio: "{{ project.portfolio.nome|escapejs }}"},
        {% endfor %}
    ],
    board: [
        {% for board in boards %}
            {id: {{ board.id }}, name: "{{ board.nome|escapejs }}", project: "{{ board.project.nome|escapejs }}"},
        {% endfor %}
    ]
};

$(document).ready(function() {
    // Passo 1: Controle de exibição baseado no tipo de objeto
    $('#objectType').change(function() {
        const objectType = $(this).val();
        
        if (objectType) {
            loadObjects(objectType);
            $('#objectsSection').show();
        } else {
            $('#objectsSection').hide();
            $('#permissionSection').hide();
            $('#submitSection').hide();
        }
    });

    // Atualizar resumo quando campos mudarem
    $('#accessType').change(function() {
        checkFormCompletion();
    });

    // Selecionar todos os objetos
    $('#selectAll').change(function() {
        const isChecked = $(this).is(':checked');
        $('.object-checkbox').prop('checked', isChecked);
        updateSelectedCount();
    });

    // Controle de seleção individual de objetos
    $(document).on('change', '.object-checkbox', function() {
        updateSelectedCount();
        
        // Atualiza o checkbox "selecionar todos"
        const totalCheckboxes = $('.object-checkbox').length;
        const checkedCheckboxes = $('.object-checkbox:checked').length;
        
        if (checkedCheckboxes === 0) {
            $('#selectAll').prop('indeterminate', false).prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#selectAll').prop('indeterminate', false).prop('checked', true);
        } else {
            $('#selectAll').prop('indeterminate', true);
        }
    });

    // Selecionar todos os colaboradores
    $('#selectAllCollaborators').change(function() {
        const isChecked = $(this).is(':checked');
        $('.collaborator-checkbox').prop('checked', isChecked);
        updateSelectedCollaboratorsCount();
    });

    // Controle de seleção individual de colaboradores
    $(document).on('change', '.collaborator-checkbox', function() {
        updateSelectedCollaboratorsCount();
        
        // Atualiza o checkbox "selecionar todos"
        const totalCheckboxes = $('.collaborator-checkbox').length;
        const checkedCheckboxes = $('.collaborator-checkbox:checked').length;
        
        if (checkedCheckboxes === 0) {
            $('#selectAllCollaborators').prop('indeterminate', false).prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#selectAllCollaborators').prop('indeterminate', false).prop('checked', true);
        } else {
            $('#selectAllCollaborators').prop('indeterminate', true);
        }
    });

    // Selecionar todas as áreas
    $('#selectAllAreas').change(function() {
        const isChecked = $(this).is(':checked');
        $('.area-checkbox').prop('checked', isChecked);
        updateSelectedAreasCount();
    });

    // Controle de seleção individual de áreas
    $(document).on('change', '.area-checkbox', function() {
        updateSelectedAreasCount();
        
        // Atualiza o checkbox "selecionar todos"
        const totalCheckboxes = $('.area-checkbox').length;
        const checkedCheckboxes = $('.area-checkbox:checked').length;
        
        if (checkedCheckboxes === 0) {
            $('#selectAllAreas').prop('indeterminate', false).prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#selectAllAreas').prop('indeterminate', false).prop('checked', true);
        } else {
            $('#selectAllAreas').prop('indeterminate', true);
        }
    });
});

function loadObjects(objectType) {
    const objects = objectsData[objectType] || [];
    const objectsList = $('#objectsList');
    objectsList.empty();
    
    objects.forEach(function(obj) {
        let displayName = obj.name;
        let subtitle = '';
        
        if (objectType === 'workspace') {
            subtitle = obj.client;
        } else if (objectType === 'portfolio') {
            subtitle = obj.workspace;
        } else if (objectType === 'project') {
            subtitle = obj.portfolio;
        } else if (objectType === 'board') {
            subtitle = obj.project;
        }
        
        const objectHtml = `
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card border">
                    <div class="card-body">
                        <div class="form-check">
                            <input class="form-check-input object-checkbox" type="checkbox" 
                                   name="object_ids" value="${obj.id}" id="obj_${obj.id}">
                            <label class="form-check-label" for="obj_${obj.id}">
                                <strong>${displayName}</strong>
                                <br>
                                <small class="text-muted">${subtitle}</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        objectsList.append(objectHtml);
    });
    
    updateSelectedCount();
}

function updateSelectedCount() {
    const count = $('.object-checkbox:checked').length;
    $('#selectedCount').text(`${count} selecionados`);
    
    if (count > 0) {
        $('#permissionSection').show();
        checkFormCompletion();
    } else {
        $('#permissionSection').hide();
        $('#submitSection').hide();
    }
}

function updateSelectedCollaboratorsCount() {
    const count = $('.collaborator-checkbox:checked').length;
    $('#selectedCollaboratorsCount').text(`${count} selecionados`);
    checkFormCompletion();
}

function updateSelectedAreasCount() {
    const count = $('.area-checkbox:checked').length;
    $('#selectedAreasCount').text(`${count} selecionadas`);
    checkFormCompletion();
}

function checkFormCompletion() {
    const accessType = $('#accessType').val();
    const selectedObjectsCount = $('.object-checkbox:checked').length;
    const selectedCollaboratorsCount = $('.collaborator-checkbox:checked').length;
    const selectedAreasCount = $('.area-checkbox:checked').length;
    
    const isValid = selectedObjectsCount > 0 && accessType && (selectedCollaboratorsCount > 0 || selectedAreasCount > 0);
    
    if (isValid) {
        $('#submitSection').show();
        updateOperationSummary();
    } else {
        $('#submitSection').hide();
    }
}

function updateOperationSummary() {
    const objectType = $('#objectType option:selected').text();
    const accessType = $('#accessType option:selected').text();
    const selectedObjectsCount = $('.object-checkbox:checked').length;
    const selectedCollaboratorsCount = $('.collaborator-checkbox:checked').length;
    const selectedAreasCount = $('.area-checkbox:checked').length;
    
    let collaboratorsList = '';
    $('.collaborator-checkbox:checked').each(function() {
        const label = $(this).next('label').text().trim();
        collaboratorsList += `<li>${label}</li>`;
    });
    
    let areasList = '';
    $('.area-checkbox:checked').each(function() {
        const label = $(this).next('label').text().trim();
        areasList += `<li>${label}</li>`;
    });
    
    const summaryHtml = `
        <div class="row">
            <div class="col-md-6">
                <strong>Tipo de Objeto:</strong> ${objectType}<br>
                <strong>Objetos Selecionados:</strong> ${selectedObjectsCount}<br>
                <strong>Tipo de Acesso:</strong> ${accessType}
            </div>
            <div class="col-md-6">
                <strong>Colaboradores (${selectedCollaboratorsCount}):</strong>
                ${collaboratorsList ? `<ul class="mb-2">${collaboratorsList}</ul>` : '<span class="text-muted">Nenhum</span>'}
                <strong>Áreas (${selectedAreasCount}):</strong>
                ${areasList ? `<ul class="mb-0">${areasList}</ul>` : '<span class="text-muted">Nenhuma</span>'}
            </div>
        </div>
    `;
    
    $('#operationSummary').html(summaryHtml);
}
</script>
{% endblock %}