@extends('template_pages.session')

@section('page_title', 'Configurações - Destinatários')
@section('page_icon', 'cog')
@section('navbar', 'finance.navbar')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/summernote/summernote-bs5.min.css') }}">
<!-- Select Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/select2/select2.min.css') }}">
@endpush

@section('content_page')
<div class="card-body">
    <div class="d-flex align-items-center gap-1 mb-3">
        <i data-lucide="mail" class="fs-4"></i>
        <h4 class="mb-0">Destinatários Internos de Emails (Finance)</h4>
    </div>

    <div class="row row-sm">
        <div class="col-12">
            <div class="card rounded-3">
                <div class="card-header">
                    <div class="card-title">Editar Destinatário</div>
                </div>
                <div class="card-body">
                    <form id="form_email_recipient" class="needs-validation" method="post" autocomplete="off">
                        {{ csrf_field() }}

                        <div class="row">
                            <div class="col-lg-12">
                                <label class="form-label">Tipo de Notificação</label>
                                <select class="form-select select2" name="notification_type" id="notification_type">
                                    @php
                                        $types = $notificationTypes ?? [];
                                        $additionalContacts = $additionalContacts ?? [];
                                    @endphp
                                    @foreach($types as $val => $label)
                                        <option value="{{ $val }}" @selected(($selectedType ?? '') === $val)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label class="form-label">Nome Principal</label>
                                <input class="form-control" placeholder="Nome Principal" type="text" name="main_name" id="main_name" value="{{ $emailRecipientName ?? '' }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Email Principal <span class="text-red">*</span></label>
                                <input class="form-control" placeholder="Email Principal" type="text" name="main_email" id="main_email" value="{{ $emailRecipient ?? '' }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="mt-3">
                                <label class="form-label d-block">Contatos adicionais</label>
                                <div class="col-lg-12 custom-fields-container mt-2">
                                    <button type="button" class="btn btn-outline-primary btn-sm add-custom-field">
                                        <i class="ti ti-plus"></i> Adicionar contato
                                    </button>
                                    <div class="custom_fields_add mt-2">
                                        @foreach($additionalContacts as $i => $contact)
                                            <div class="custom_contact mb-2" id="custom_contact_{{ $i + 1 }}">
                                                <div class="row cf-group add_contacts" id="custom-field-{{ $i + 1 }}">
                                                    <div class="col-lg-6">
                                                        <input class="form-control contact_name" placeholder="Nome" type="text" name="contact_name_{{ $i + 1 }}" value="{{ $contact['contact_name'] }}">
                                                    </div>
                                                    <div class="col-lg-5">
                                                        <input class="form-control contact_email" placeholder="E-mail" type="email" name="contact_email_{{ $i + 1 }}" value="{{ $contact['contact_email'] }}">
                                                    </div>
                                                    <div class="col-lg-1 d-flex align-items-center">
                                                        <span class="btn btn-danger remove-contact btn-icon" aria-label="Remover" title="Remover">
                                                            <i class="ti ti-minus"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-2">
                            <button type="button" class="btn btn-primary" id="save_recipient">
                                <i class="ti ti-device-floppy me-1"></i> Salvar Destinatário
                            </button>
                        </div>
                    </form>

                    <div class="invalid-feedback d-block mt-3" id="recipientError" style="display:none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<!--Select 2 Demo js-->
<script src="{{ asset('assets/inspinia/js/pages/form-select2.js') }}"></script>
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<script>
$(document).ready(function() {

    // Inicializa Select2
    $('.select2').select2();
    $('#notification_type').select2({ placeholder: "Selecione o tipo de notificação" });

    // Adiciona um novo campo de contato
    function addContactRow(name = '', email = '') {
        var idx = $('.custom_fields_add .custom_contact').length + 1;
        var $row = $('<div/>', { class: 'custom_contact mb-2', id: 'custom_contact_' + idx });
        var $inner = $('<div/>', { class: 'row cf-group add_contacts', id: 'custom-field-' + idx });
        $inner.append(
            $('<div/>', { class: 'col-lg-6' }).append(
                $('<input/>', { class: 'form-control contact_name', type: 'text', placeholder: 'Nome', name: 'contact_name_' + idx, value: name })
            )
        );
        $inner.append(
            $('<div/>', { class: 'col-lg-5' }).append(
                $('<input/>', { class: 'form-control contact_email', type: 'email', placeholder: 'E-mail', name: 'contact_email_' + idx, value: email })
            )
        );
        $inner.append(
            $('<div/>', { class: 'col-lg-1 d-flex align-items-center' }).append(
                $('<span/>', { class: 'btn btn-danger remove-contact btn-icon', 'aria-label': 'Remover', title: 'Remover' }).append(
                    $('<i/>', { class: 'ti ti-minus' })
                )
            )
        );
        $row.append($inner);
        $('.custom_fields_add').append($row);
    }

    // Botão para adicionar contato
    $('.add-custom-field').on('click', function() {
        addContactRow();
    });

    // Remover contato
    $(document).on('click', '.remove-contact', function() {
        $(this).closest('.custom_contact').remove();
    });

    // Validação
    var validatorRecipient = $("#form_email_recipient").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        highlight: function(element){ $(element).addClass('is-invalid'); },
        unhighlight: function(element){ $(element).removeClass('is-invalid'); },
        rules: {
            main_email: { required: true, email: true, maxlength: 255 }
        },
        messages: {
            main_email: {
                required: "E-mail principal é obrigatório",
                email: "Insira um e-mail válido",
                maxlength: "Máximo de 255 caracteres"
            }
        }
    });

    // Renderizar contatos adicionais recebidos do servidor
    function renderAdditionalContacts(contacts) {
        $('.custom_fields_add').empty();
        if (Array.isArray(contacts)) {
            contacts.forEach(function(c) {
                addContactRow(c.name || '', c.email || '');
            });
        }
    }

    // Salvar destinatários
    $('#save_recipient').on('click', function() {
        if (!$("#form_email_recipient").valid()) { return; }

        var $btn = $(this);
        var btnText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-grow spinner-grow-sm me-2"></span> Salvando...');

        var contacts = [];
        $('.custom_fields_add .custom_contact').each(function() {
            var name  = $(this).find('.contact_name').val().trim();
            var email = $(this).find('.contact_email').val().trim();
            if (email) {
                contacts.push({ name: name, email: email });
            }
        });

        $.ajax({
            url: '{{ route('finance.settings.update.email_to') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                notification_type: $('#notification_type').val(),
                main_name: $('#main_name').val(),
                main_email: $('#main_email').val(),
                copies: contacts
            },
            success: function(resp) {
                if (resp && resp.success) {
                    showAlert("successToast", { text: resp.message || "Destinatários atualizados com sucesso!" });
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao atualizar destinatários." });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Ocorreu um erro ao salvar.';
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    let errorList = '<ul>';
                    $.each(errors, function(field, messages) {
                        $.each(messages, function(_, message) { errorList += '<li>' + message + '</li>'; });
                    });
                    errorList += '</ul>';
                    showAlert("error", { title: "Erro de Validação!", html: errorList });
                } else {
                    if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; }
                    showAlert("error", { title: "Erro!", text: errorMessage });
                }
            },
            complete: function() { $btn.prop('disabled', false).html(btnText); }
        });
    });

    // Carregar destinatários ao alterar o tipo
    $('#notification_type').on('change', function() {
        var type = $(this).val();
        $.ajax({
            url: '{{ route('finance.settings.get.email_to') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                notification_type: type
            },
            success: function(resp) {
                if (resp && resp.success && resp.data) {
                    $('#main_name').val(resp.data.main_name || '');
                    $('#main_email').val(resp.data.main_email || '');
                    renderAdditionalContacts(resp.data.copies || []);
                } else {
                    $('#main_name').val('');
                    $('#main_email').val('');
                    renderAdditionalContacts([]);
                }
            },
            error: function() {
                $('#main_name').val('');
                $('#main_email').val('');
                renderAdditionalContacts([]);
            }
        });
    });

    // Dispara uma primeira carga
    $('#notification_type').trigger('change');
});
</script>
@endpush