{% extends 'shared/base.html' %}
{% load static %}
{% block content %}
{% load widget_tweaks %}

<!-- Inclua o CSS do Bootstrap 5 se ainda não estiver incluído no seu base.html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="{% static 'assets/css/main.css' %}" rel="stylesheet" />

<!-- Inclua o jQuery e o jQuery Mask Plugin -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
    setTimeout(function () {
        $("#messages").fadeOut("fast");
    }, 5000);

    function voltar() {
        window.history.back();
    }

    // Aplicar máscaras de entrada
    $(document).ready(function () {
        // Aplica as máscaras nos inputs com o atributo data-mask
        $('[data-mask]').each(function () {
            var mask = $(this).attr('data-mask');
            $(this).mask(mask);
        });
    });
</script>
<style>
    /* Seu CSS personalizado */
    h5.card-title {
        font-size: 15px;
    }

    .fw-400 {
        font-weight: bold !important;
    }

    .full-card {
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .card-title {
        font-family: Roboto, sans-serif;
        font-weight: 300;
        line-height: 1.5;
        margin-bottom: 0;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(77, 82, 89, 0.07);
        background-color: #dfe0e4;
    }

    .card-body {
        padding: 1.25rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-select,
    .input-group-text,
    .form-control,
    .select2-container--default .select2-selection--multiple,
    .textarea {
        border-color: #888888;
        border-radius: 2px;
        color: #000;
        padding: 5px 12px;
        font-size: 14px;
        line-height: inherit;
        transition: 0.2s linear;
    }

    .card-body>*:last-child {
        margin-bottom: 0;
    }

    .btn:hover {
        cursor: pointer;
    }

    .form-control:focus,
    .form-select:focus,
    .textarea:focus {
        border-color: #198754;
        color: #4d5259;
        box-shadow: 0 0 0 0.1rem rgba(51, 202, 187, 0.15);
    }

    #perfil {
        width: 250px;
        height: 250px;
        background-color: #eee;
        border-radius: 15px;
        /* Bordas arredondadas */
        background-image: url("{% static 'assets/img/fotoperfil.png' %}");
        /* Imagem temporária */
        background-size: cover;
        background-position: center;
        margin: 0 auto;
        border: solid 2px green;
    }
</style>
<div class="content">
    <!-- Título da página e breadcrumb -->
    <div class="card-body bg-success bg-gradient text-white my-2 rounded-2">
        <div class="row flex-between-center">
            <div class="col-md d-flex align-items-center">
                <h5 class="mb-2 mb-md-0">Editar Funcionário</h5>
            </div>
            <div class="col-auto">
                <button class="btn btn-light me-1 mb-1" type="button" onclick="voltar()">Voltar <span
                        class="fas fa-arrow-left me-1" data-fa-transform="shrink-3"></span></button>
            </div>
        </div>
    </div>
    <div id="messages" class="col-md-12">
        {% for message in messages %}
        <div class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success {% elif message.tags == 'error' %}alert-danger {% endif %}">
            {{ message }}
        </div>
        {% endfor %}
    </div>

    <!-- Formulário de Editar funcionário -->
    <div class="card">
        <div class="content">
            <div class="canvas-wrapper">
                <div class="row g-3 mb-4">
                    
                    <!-- Seção de foto de perfil fora do formulário -->
                    <div class="col-md col-lg order-xl-last text-center">
                        <div class="card full-card">
                            <h5 class="card-title fw-400">Foto de Perfil</h5>
                            <div class="card-body">
                                <div class="row">
                                    <!-- Exibe a imagem atual ou uma imagem padrão -->
                                    <div id="perfil"
                                         style="background-image: url({% if funcionario.foto %}{{ funcionario.foto.url }}{% else %}{% static 'assets/img/fotoperfil.png' %}{% endif %}); width: 250px; height: 250px; background-size: cover; background-position: center; border: solid 2px green; border-radius: 15px;">
                                    </div>
                                    <div class="pt-3">
                                        <!-- Botão para abrir o campo de seleção de imagem -->
                                        <button class="btn btn-success mt-2" onclick="document.getElementById('input-foto-exterior').click()">Escolher Foto</button>
                                        
                                        <!-- Campo de upload de foto visível fora do formulário -->
                                        <input type="file" id="input-foto-exterior" class="form-control" accept="image/*" onchange="updateHiddenFileInput(this)" style="display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Formulário de cadastro de funcionário -->
                    <div class="col-xl-8">
                        <form class="card full-card needs-validation" novalidate action="{% url 'edit_funcionario' funcionario.id %}" method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            <h5 class="card-title fw-400">Informações</h5>
                            <div class="card-body">
                                <div class="row g-3">
                                    <!-- Iteração pelos campos do formulário -->
                                    {% for field in form.visible_fields %}
                                    <div class="{% if field.name in 'bairro cidade' %}col-sm-3{% else %}col-sm-6{% endif %}">
                                        {% if field.name != "foto" %}
                                            <!-- Exibe normalmente os outros campos -->
                                            <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                            {% if field.errors %}
                                                {{ field|add_class:"is-invalid" }}
                                            {% else %}
                                                {{ field }}
                                            {% endif %}
                                            {% for error in field.errors %}
                                            <div class="invalid-feedback">
                                                {{ error }}
                                            </div>
                                            {% endfor %}
                                        {% else %}
                                            <!-- Campo de upload de foto oculto dentro do formulário -->
                                            <input type="file" name="foto" id="input-foto-form" style="display: none;">
                                        {% endif %}
                                    </div>
                                    {% endfor %}
                                    <!-- Botão de envio do formulário -->
                                    <div class="col-sm-4 offset-sm-8">
                                        <button class="w-100 btn btn-sm btn-success btn-lg" type="submit">
                                            <i data-feather="check-circle" class="data-feather mr-1"></i>
                                            Enviar dados
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Atualiza o campo oculto de upload de imagem dentro do formulário com o arquivo selecionado externamente
    function updateHiddenFileInput(input) {
        const file = input.files[0];
        const hiddenInput = document.getElementById('input-foto-form');
        
        if (file) {
            hiddenInput.files = input.files;  // Copia o arquivo para o campo oculto do formulário
            
            const perfil = document.getElementById('perfil');
            const reader = new FileReader();

            reader.onload = function (e) {
                perfil.style.backgroundImage = `url(${e.target.result})`;
            };

            reader.readAsDataURL(file);
        }
    }
</script>


<script>
    // Atualiza a foto de perfil quando o usuário seleciona uma imagem
    document.getElementById('id_foto').addEventListener('change', function (event) {
        const perfil = document.getElementById('perfil');
        const file = event.target.files[0];
        
        if (file) {
            console.log("Nova imagem selecionada:", file.name);
            const reader = new FileReader();

            reader.onload = function (e) {
                perfil.style.backgroundImage = `url(${e.target.result})`;
            };

            reader.readAsDataURL(file);
        } else {
            console.log("Nenhuma imagem selecionada.");
            perfil.style.backgroundImage = `url("{% static 'assets/img/fotoperfil.png' %}")`;
        }
    });
</script>


<!-- Validação do Bootstrap 5 -->
<script>
    (function () {
        "use strict";

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.querySelectorAll(".needs-validation");

        // Loop over them and prevent submission
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener(
                "submit",
                function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }

                    form.classList.add("was-validated");
                },
                false
            );
        });
    })();
</script>
{% endblock %}