{% 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 %}
        
        <!-- Seleção de 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>
                            Selecionar Tipo de Objeto
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="objectType">Tipo de Objeto</label>
                            <select class="form-control" 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>

        <!-- Seleção de 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>
                            Selecionar Objetos
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>Selecionar Objetos</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                        <label class="form-check-label" for="selectAll">
                                            <strong>Selecionar Todos</strong>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6 text-right">
                                    <span class="text-muted" id="selectedCount">0 selecionados</span>
                                </div>
                            </div>
                            <hr>
                            <div id="objectsList" class="row">
                                <!-- Objetos serão carregados dinamicamente -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configuração de Permissão -->
        <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>
                            Configurar Permissão
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="scopeType">Tipo de Escopo</label>
                                    <select class="form-control" id="scopeType" name="scope_type" required>
                                        <option value="">Selecione...</option>
                                        <option value="collaborator">Colaborador</option>
                                        <option value="area">Área</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="accessType">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-4">
                                <div class="form-group" id="collaboratorGroup" style="display: none;">
                                    <label for="collaboratorId">Colaborador</label>
                                    <select class="form-control" id="collaboratorId" name="collaborator_id">
                                        <option value="">Selecione um colaborador...</option>
                                        {% for collaborator in collaborators %}
                                            <option value="{{ collaborator.id }}">{{ collaborator.nome }} ({{ collaborator.area.nome }})</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group" id="areaGroup" style="display: none;">
                                    <label for="areaId">Área</label>
                                    <select class="form-control" id="areaId" name="area_id">
                                        <option value="">Selecione uma área...</option>
                                        {% for area in areas %}
                                            <option value="{{ area.id }}">{{ area.nome }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botão de Submissão -->
        <div class="row mb-4" id="submitSection" style="display: none;">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body text-center">
                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle"></i>
                            <strong>Resumo da Operação:</strong>
                            <div id="operationSummary" class="mt-2">
                                <!-- Resumo será preenchido dinamicamente -->
                            </div>
                        </div>
                        <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 marcados.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal de Confirmação -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Aplicação em Lote</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <strong>Resumo da Operação:</strong>
                </div>
                <div id="confirmationDetails">
                    <!-- Detalhes serão preenchidos dinamicamente -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirmSubmit">Confirmar</button>
            </div>
        </div>
    </div>
</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() {
    // 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();
        }
    });

    // Controle de exibição dos campos baseado no tipo de escopo
    $('#scopeType').change(function() {
        const scopeType = $(this).val();
        
        if (scopeType === 'collaborator') {
            $('#collaboratorGroup').show();
            $('#areaGroup').hide();
            $('#collaboratorId').prop('required', true);
            $('#areaId').prop('required', false);
        } else if (scopeType === 'area') {
            $('#collaboratorGroup').hide();
            $('#areaGroup').show();
            $('#collaboratorId').prop('required', false);
            $('#areaId').prop('required', true);
        } else {
            $('#collaboratorGroup').hide();
            $('#areaGroup').hide();
            $('#collaboratorId').prop('required', false);
            $('#areaId').prop('required', false);
        }
        
        checkFormCompletion();
    });

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

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

    // Controle de seleção individual
    $(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);
        }
    });

    // Submissão do formulário
    $('form').submit(function(e) {
        e.preventDefault();
        
        const selectedObjects = $('.object-checkbox:checked');
        if (selectedObjects.length === 0) {
            showAlert('warning', 'Selecione pelo menos um objeto.');
            return false;
        }
        
        if (!$('#scopeType').val()) {
            showAlert('warning', 'Selecione o tipo de escopo.');
            return false;
        }
        
        if ($('#scopeType').val() === 'collaborator' && !$('#collaboratorId').val()) {
            showAlert('warning', 'Selecione um colaborador.');
            return false;
        }
        
        if ($('#scopeType').val() === 'area' && !$('#areaId').val()) {
            showAlert('warning', 'Selecione uma área.');
            return false;
        }
        
        showConfirmationModal();
    });

    // Confirmação da submissão
    $('#confirmSubmit').click(function() {
        $('form').off('submit').submit();
    });
});

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">
                    <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 checkFormCompletion() {
    const scopeType = $('#scopeType').val();
    const accessType = $('#accessType').val();
    const selectedCount = $('.object-checkbox:checked').length;
    
    let isValid = selectedCount > 0 && scopeType && accessType;
    
    if (scopeType === 'collaborator') {
        isValid = isValid && $('#collaboratorId').val();
    } else if (scopeType === 'area') {
        isValid = isValid && $('#areaId').val();
    }
    
    if (isValid) {
        $('#submitSection').show();
        updateOperationSummary();
    } else {
        $('#submitSection').hide();
    }
}

function updateOperationSummary() {
    const objectType = $('#objectType option:selected').text();
    const scopeType = $('#scopeType option:selected').text();
    const accessType = $('#accessType option:selected').text();
    const selectedCount = $('.object-checkbox:checked').length;
    
    let scopeName = '';
    if ($('#scopeType').val() === 'collaborator') {
        scopeName = $('#collaboratorId option:selected').text();
    } else if ($('#scopeType').val() === 'area') {
        scopeName = $('#areaId option:selected').text();
    }
    
    const summaryHtml = `
        <div class="row text-left">
            <div class="col-md-6">
                <strong>Tipo de Objeto:</strong> ${objectType}<br>
                <strong>Objetos Selecionados:</strong> ${selectedCount}
            </div>
            <div class="col-md-6">
                <strong>Tipo de Escopo:</strong> ${scopeType}<br>
                <strong>Escopo:</strong> ${scopeName}<br>
                <strong>Tipo de Acesso:</strong> ${accessType}
            </div>
        </div>
    `;
    
    $('#operationSummary').html(summaryHtml);
}

function showConfirmationModal() {
    const objectType = $('#objectType option:selected').text();
    const scopeType = $('#scopeType option:selected').text();
    const accessType = $('#accessType option:selected').text();
    const selectedCount = $('.object-checkbox:checked').length;
    
    let scopeName = '';
    if ($('#scopeType').val() === 'collaborator') {
        scopeName = $('#collaboratorId option:selected').text();
    } else if ($('#scopeType').val() === 'area') {
        scopeName = $('#areaId option:selected').text();
    }
    
    const detailsHtml = `
        <div class="row">
            <div class="col-md-6">
                <p><strong>Tipo de Objeto:</strong> ${objectType}</p>
                <p><strong>Objetos Selecionados:</strong> ${selectedCount}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Tipo de Escopo:</strong> ${scopeType}</p>
                <p><strong>Escopo:</strong> ${scopeName}</p>
                <p><strong>Tipo de Acesso:</strong> ${accessType}</p>
            </div>
        </div>
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Atenção:</strong> Esta operação aplicará a permissão selecionada a ${selectedCount} objeto(s).
        </div>
    `;
    
    $('#confirmationDetails').html(detailsHtml);
    $('#confirmModal').modal('show');
}

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    
    $('.container-fluid').prepend(alertHtml);
    
    setTimeout(function() {
        $('.alert').alert('close');
    }, 5000);
}
</script>
{% endblock %}