@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="alert alert-danger text-center remove-after-3s" style="display: none;" role="alert">
                </div>
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-12 div-button">Enviar E-mail</div>
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <form action="{{ route('enviar.email') }}" id="emailForm" method="POST">
                                @csrf
                                <div class="col-sm-12 display">
                                    <div class="form-group">
                                        <div class="row pading-botton">
                                            <div class="col-md-2">
                                                <label for="emails">Selecione os e-mails:</label>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="selectAll">
                                                    <label class="form-check-label" for="deselectAll">
                                                        Selecionar todos
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="deselectAll">
                                                    <label class="form-check-label" for="selectAll">
                                                        Desmarcar todos
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row" id="emails">
                                            @foreach ($emails as $index => $email)
                                                <div class="col-md-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            value="{{ $email['email'] }}" name="emails[]"
                                                            id="checkbox{{ $index }}"
                                                            data-setor="{{ $email['setor'] }}">
                                                        <label class="form-check-label" for="checkbox{{ $index }}">
                                                            {{ $email['email'] }}
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="titulo">Assunto:</label>
                                        <input type="text" name="titulo" id="titulo" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="select-group">
                                        <label for="setor" class="col-md-2 col-form-label text-md-right">Setor:</label>

                                        <div class="col-md-10">
                                            <select name="setor" id="setores_form" class="form-control" name="setor">
                                                <option value="0" selected>Selecione um setor</option>
                                                @foreach ($unidades as $unidade)
                                                    @if($unidade['descricao'])
                                                        <option value="{{ $unidade['id'] }}">{{ $unidade['descricao'] }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="select-group">
                                        <label for="titulo">Formulário:</label>
                                        <select name="mensagem[]questionario_id" id="formulario" class="form-control"
                                            required>
                                            <option value="">Escolha um formulário</option>
                                            @foreach ($questionarios as $question)
                                                <option value="{{ $question->id }}">{{ $question->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" id="questionario_nome" name="mensagem[]questionario_name"
                                    value="">

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="mensagem">Mensagem:</label>
                                        <textarea name="mensagem[]mensagem" id="mensagem" class="form-control" rows="5">{{ $texto }}</textarea>
                                    </div>
                                </div>
                        </div>
                        <p class="text-center margi">
                            <input class="btn btn-success" type="submit" value="Enviar E-mail">
                        </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectSetores = document.getElementById('setores_form');

            selectSetores.addEventListener('change', function() {
                const setorSelecionado = this.value;
                const checkboxes = document.querySelectorAll('#emails .form-check-input');

                checkboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });

                if (setorSelecionado !== '0') {
                    checkboxes.forEach(checkbox => {
                        // Verificar se o setor do checkbox começa com o setor selecionado
                        if (checkbox.dataset.setor.startsWith(setorSelecionado)) {
                            checkbox.checked = true;
                        }
                    });
                }
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectElement = document.getElementById('formulario');

            function updateHiddenInput() {
                const selectedOption = selectElement.options[selectElement.selectedIndex];
                if (selectedOption) {
                    const questionarioNome = selectedOption.text;
                    const hiddenInput = document.getElementById('questionario_nome');
                    if (hiddenInput) {
                        hiddenInput.value = questionarioNome;
                    } else {
                        console.error('Elemento input oculto "questionario_nome" não encontrado!');
                    }
                } else {
                    console.error('Nenhuma opção selecionada!');
                }
            }
            if (selectElement) {
                updateHiddenInput();
                selectElement.addEventListener('change', updateHiddenInput);
            } else {
                console.error('Elemento select "formulario" não encontrado!');
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#emailForm").submit(function(event) {
                // Verifique se pelo menos uma checkbox dentro da div com id "emails" está marcada
                if ($("#emails input[type='checkbox']:checked").length === 0) {
                    // Evite o envio do formulário
                    event.preventDefault();

                    // Exiba a mensagem de erro na div com class "alert-danger"
                    $(".alert-danger").html("Por favor, marque pelo menos um e-mail.").show();

                    // Esconda a mensagem de erro após 5 segundos
                    setTimeout(function() {
                        $(".alert-danger").hide();
                    }, 5000);
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#selectAll").click(function() {
                // Marque todos os checkboxes dentro do contêiner com id "emails"
                $("#emails input[type='checkbox']").prop("checked", true);

                // Desmarque o checkbox "Desmarcar todos"
                $("#deselectAll").prop("checked", false);
            });

            $("#deselectAll").click(function() {
                // Desmarque todos os checkboxes dentro do contêiner com id "emails"
                $("#emails input[type='checkbox']").prop("checked", false);

                // Desmarque o checkbox "Selecionar todos"
                $("#selectAll").prop("checked", false);
            });

            // Lógica para desmarcar um checkbox se o outro for marcado
            $("#selectAll, #deselectAll").click(function() {
                if ($("#selectAll").prop("checked")) {
                    $("#deselectAll").prop("checked", false);
                }
                if ($("#deselectAll").prop("checked")) {
                    $("#selectAll").prop("checked", false);
                }
            });
        });
    </script>
    <script src="{{ asset('tinymce/js/tinymce.min.js') }}" referrerpolicy="origin"></script>

    <script src="{{ asset('js/email.js') }}"></script>

    <style>
        .tox-statusbar__branding {
            display: none;
        }

        .row.pading-botton {
            padding-bottom: 2%;
        }

        .col-sm-12.display {
            overflow-y: scroll;
            overflow-x: hidden;
            height: 25vh;
        }
    </style>
@endsection