@extends('template_pages.session')

@section('page_title', 'Editar Cliente Institucional #' . request()->route('id'))
@section('page_icon', 'handshake')

@php
    $module = request()->segment(1);
@endphp

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

@section('content_page')
<div class="card-body">
    <form id="editClientForm" method="POST">
         {{ csrf_field() }}
        
        <!-- Informações Básicas -->
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="text" class="fs-4"></i>
            <h4 class="mb-0">Informações Básicas</h4>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <label class="form-label">Nome Empresarial *</label>
                <input type="text" class="form-control" name="name" placeholder="Nome Empresarial" 
                       value="{{ old('name', $client->name) }}" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Website</label>
                <input type="text" class="form-control" name="website" placeholder="Website" 
                       value="{{ old('website', $client->website) }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Tipo Empresa *</label>
                <select name="client_type" id="tipo_empresa" class="form-control select2" required>
                    <option value="">Selecione o tipo</option>
                    @if(!empty($clientTypes))
                        @foreach($clientTypes as $type)
                            <option value="{{ $type }}" {{ old('client_type', $client->client_type) === $type ? 'selected' : '' }}>
                                {{ $type }}
                            </option>
                        @endforeach
                    @endif
                </select>
                <div class="invalid-feedback">
                    Selecione o tipo de empresa
                </div>
            </div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <!-- Configurações -->
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="sliders-horizontal" class="fs-4"></i>
            <h4 class="mb-0">Configurações</h4>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <label class="form-label">Sincronizar com Monday</label>
                <select class="form-select select2" name="monday_id">
                    <option value="" {{ empty(old('monday_id', $client->monday_id)) ? 'selected' : '' }}>Selecione</option>
                    @if(!empty($mondayClients))
                        @foreach($mondayClients as $mClient)
                            <option value="{{ $mClient['id'] }}" {{ (string) old('monday_id', $client->monday_id) === (string) $mClient['id'] ? 'selected' : '' }}>
                                {{ $mClient['name'] }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <!-- Informações de Contato -->
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="book-user" class="fs-4"></i>
            <h4 class="mb-0">Informações de Contato</h4>
        </div>

        @php
        if(!empty($client->contacts)) {
            $primaryContact = $client->contacts->where('is_primary', 1)->first();
        } else {
            $primaryContact = null;
        }
        @endphp

        <!-- Campo hidden para ID do contato principal -->
        <input type="hidden" name="contact_id" value="{{ $primaryContact->id ?? '' }}">

        <div class="row mt-3 g-3">
            <div class="col-12 col-md-6 col-lg-3">
                <label class="form-label">Nome para contato *</label>
                <input type="text" class="form-control" name="contact_name" placeholder="Nome" 
                       value="{{ old('contact_name', $primaryContact->name ?? '') }}" required>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <label class="form-label">E-mail Principal *</label>
                <input type="email" class="form-control" name="contact_mail" placeholder="E-mail" 
                       value="{{ old('contact_mail', $primaryContact->email ?? '') }}" required>
            </div>
            <div class="col-12 col-md-6 col-lg-2">
                <label class="form-label">Telefone Principal</label>
                <input type="text" class="form-control phone_input" name="contact_phone" placeholder="(11) 91234-5678" 
                       value="{{ old('contact_phone', $primaryContact->phone ?? '') }}">
                <div class="invalid-feedback">
                    Por favor, informe um telefone válido.
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-2">
                <label class="form-label">Cargo</label>
                <input type="text" class="form-control" name="contact_position" placeholder="Cargo" 
                       value="{{ old('contact_position', $primaryContact->position ?? '') }}">
            </div>
            <div class="col-12 col-lg-2">
                <label class="form-label">Observação</label>
                <input type="text" class="form-control" name="contact_notes" placeholder="Observação" 
                       value="{{ old('contact_notes', $primaryContact->notes ?? '') }}">
            </div>
        </div>

        <!-- Contatos Adicionais -->
        <div class="col-lg-12 custom-fields-container mt-3">
            <span class="btn btn-soft-secondary btn-sm add-custom-field gap-1">
                <i data-lucide="plus"></i> Adicionar contato
            </span>
            
            <!-- Campo hidden para IDs de contatos a serem excluídos -->
            <input type="hidden" name="contacts_to_delete" id="contacts_to_delete" value="">
            
            <div class="custom_fields_add">
                @php
                if(!empty($client->contacts)) {
                    $additionalContacts = $client->contacts->where('is_primary', 0);
                    $contactIndex = 1;
                } else {
                    $additionalContacts = [];
                    $contactIndex = 1;
                }
                @endphp
                
                @foreach($additionalContacts as $contact)
                <div class="custom_contact mb-3 p-3 border rounded bg-light mt-2" id="custom_contact_{{ $contactIndex }}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted fw-bold contact-title">Contato Adicional {{ $contactIndex }}</small>
                        <span class="btn btn-danger btn-sm remove-contact btn-icon">
                            <i class="ti ti-minus"></i>
                        </span>
                    </div>
                    <div class="row g-2 add_contacts" id="custom-field-{{ $contactIndex }}">
                        <!-- Campo hidden para ID do contato -->
                        <input type="hidden" class="contact_id" name="contact_id_{{ $contactIndex }}" value="{{ $contact->id }}">
                        
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label small">Nome *</label>
                            <input class="form-control contact_name" placeholder="Nome do contato" type="text" 
                                   name="contact_name_{{ $contactIndex }}" value="{{ old('contact_name_'.$contactIndex, $contact->name) }}">
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label small">E-mail *</label>
                            <input class="form-control contact_email" placeholder="email@exemplo.com" type="email" 
                                   name="contact_email_{{ $contactIndex }}" value="{{ old('contact_email_'.$contactIndex, $contact->email) }}">
                        </div>
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label small">Telefone</label>
                            <input class="form-control phone_input contact_phone" placeholder="(11) 91234-5678" type="text" 
                                   name="contact_phone_{{ $contactIndex }}" value="{{ old('contact_phone_'.$contactIndex, $contact->phone) }}">
                        </div>
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label small">Cargo</label>
                            <input class="form-control contact_position" placeholder="Cargo" type="text" 
                                   name="contact_position_{{ $contactIndex }}" value="{{ old('contact_position_'.$contactIndex, $contact->position) }}">
                        </div>
                        <div class="col-12 col-lg-2">
                            <label class="form-label small">Observação</label>
                            <input class="form-control contact_notes" placeholder="Observação" type="text" 
                                   name="contact_notes_{{ $contactIndex }}" value="{{ old('contact_notes_'.$contactIndex, $contact->notes) }}">
                        </div>
                    </div>
                </div>
                @php $contactIndex++; @endphp
                @endforeach
            </div>
        </div>

        <!-- Botão -->
        <div class="border-top border-dashed my-3"></div>
        <div class="row mt-2">
            <div class="btn-list col-12 col-lg-auto">
                <button type="submit" class="btn btn-success" id="btn_update">Salvar</button>                
            </div>
            <div class="col-12 col-lg btn-list text-lg-end text-left mt-lg-0 mt-2">
                <a id="toggleStatus" class="btn {{ $client->status ? 'btn-danger' : 'btn-success' }}" href="javascript: void(0);">
                    {{ $client->status ? 'Desativar' : 'Ativar' }}
                </a>
            </div>
        </div>
    </form>
</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>
<!-- MaskMoney -->
<script src="{{ asset('assets/scripts/maskmoney/jquery.maskMoney.min.js') }}"></script>
<!-- Máscaras Js -->
<script src="{{ asset('assets/inspinia/plugins/inputmask/jquery.mask.min.js') }}"></script>
<script src="{{ asset('assets/scripts/masks.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/inspinia/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>

<script>
$('.select2').select2();

$('#tipo_empresa').select2({
    placeholder: "Selecione o tipo de empresa"
});

// Métodos de validação customizados
$.validator.addMethod("phoneValidation", function(value, element) {
    return this.optional(element) || /^\(\d{2}\)\s\d{4,5}-\d{4}$/.test(value);
}, "Por favor, insira um telefone válido no formato (11) 91234-5678");

$().ready(function () {
    let contactCounter = {{ $contactIndex }};
    let contactsToDelete = []; // Array para armazenar IDs dos contatos a serem excluídos

    // Função para adicionar novo contato
    $('.add-custom-field').on('click', function() {
        // Calcular o próximo índice baseado nos contatos existentes
        var existingContacts = $('.custom_fields_add .custom_contact').length;
        var nextIndex = existingContacts + 1;
        
        var newContactHtml = `
            <div class="custom_contact mb-3 p-3 border rounded bg-light mt-2" id="custom_contact_${nextIndex}">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <small class="text-muted fw-bold contact-title">Contato Adicional ${nextIndex}</small>
                    <span class="btn btn-danger btn-sm remove-contact btn-icon">
                        <i class="ti ti-minus"></i>
                    </span>
                </div>
                <div class="row g-2 add_contacts" id="custom-field-${nextIndex}">
                    <!-- Campo hidden para ID do contato (vazio para novos contatos) -->
                    <input type="hidden" class="contact_id" name="contact_id_${nextIndex}" value="">
                    
                    <div class="col-12 col-md-6 col-lg-3">
                        <label class="form-label small">Nome *</label>
                        <input class="form-control contact_name" placeholder="Nome do contato" type="text" 
                               name="contact_name_${nextIndex}">
                    </div>
                    <div class="col-12 col-md-6 col-lg-3">
                        <label class="form-label small">E-mail *</label>
                        <input class="form-control contact_email" placeholder="email@exemplo.com" type="email" 
                               name="contact_email_${nextIndex}">
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label small">Telefone</label>
                        <input class="form-control phone_input contact_phone" placeholder="(11) 91234-5678" type="text" 
                               name="contact_phone_${nextIndex}">
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <label class="form-label small">Cargo</label>
                        <input class="form-control contact_position" placeholder="Cargo" type="text" 
                               name="contact_position_${nextIndex}">
                    </div>
                    <div class="col-12 col-lg-2">
                        <label class="form-label small">Observação</label>
                        <input class="form-control contact_notes" placeholder="Observação" type="text" 
                               name="contact_notes_${nextIndex}">
                    </div>
                </div>
            </div>
        `;
        
        $('.custom_fields_add').append(newContactHtml);
        $('.custom_fields_add').addClass('mt-2');
        
        // Aplicar máscara de telefone no novo campo
        $('.phone_input').mask('(00) 00000-0000');
    });

    // Função para remover contato
    $(document).on('click', '.remove-contact', function() {
        var contactContainer = $(this).closest('.custom_contact');
        var contactId = contactContainer.find('.contact_id').val();
        
        // Se o contato tem ID (existe no banco), adicionar à lista de exclusão
        if (contactId && contactId !== '') {
            contactsToDelete.push(contactId);
            $('#contacts_to_delete').val(contactsToDelete.join(','));
        }
        
        // Remover o container do contato
        contactContainer.remove();
        
        // Reindexar os contatos restantes
        reindexContacts('.custom_fields_add');
        
        // Remover classe mt-2 se não há mais contatos
        if ($('.custom_fields_add .custom_contact').length === 0) {
            $('.custom_fields_add').removeClass('mt-2');
        }
    });

    $('#btn_update').on('click', function(e) {
        var fields = $(this).parents('form');   
        // Configuração da validação do formulário
        $("#editClientForm").validate({
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                client_type: {
                    required: true
                },
                contact_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                contact_mail: {
                    required: true,
                    email: true,
                    maxlength: 255
                },
                contact_phone: {
                    required: false,
                    phoneValidation: true
                }
            },
            messages: {
                name: {
                    required: "O nome empresarial é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres",
                    maxlength: "O nome não pode exceder 255 caracteres"
                },
                client_type: {
                    required: ""
                },
                contact_name: {
                    required: "O nome do contato é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres",
                    maxlength: "O nome não pode exceder 255 caracteres"
                },
                contact_mail: {
                    required: "O e-mail é obrigatório",
                    email: "Por favor, insira um e-mail válido",
                    maxlength: "O e-mail não pode exceder 255 caracteres"
                },
                contact_phone: {
                    phoneValidation: ""
                },
            },
            highlight: function(element){
                // Para campos normais
                $(element).addClass('is-invalid');
                
                // Tratamento especial para Select2
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').addClass('is-invalid');
                }
            },
            unhighlight: function(element){
                // Para campos normais
                $(element).removeClass('is-invalid');
                
                // Tratamento especial para Select2
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
            },
            errorPlacement: function(error, element) {
                // Para Select2, colocar o erro após o container do Select2
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // Validar contatos adicionais dinamicamente
                var isValid = true;
                var errorMessages = [];

                $('.custom_contact').each(function(index) {
                    var contactName = $(this).find('.contact_name').val();
                    var contactEmail = $(this).find('.contact_email').val();
                    var contactPhone = $(this).find('.contact_phone').val();

                    // Se algum campo do contato foi preenchido, validar todos
                    if (contactName || contactEmail || contactPhone) {
                        if (!contactName) {
                            errorMessages.push(`Nome do contato ${index + 2} é obrigatório`);
                            isValid = false;
                        }

                        if (!contactEmail) {
                            errorMessages.push(`E-mail do contato ${index + 2} é obrigatório`);
                            isValid = false;
                        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail)) {
                            errorMessages.push(`E-mail do contato ${index + 2} é inválido`);
                            isValid = false;
                        }

                        if (contactPhone && !/^\(\d{2}\)\s\d{4,5}-\d{4}$/.test(contactPhone)) {
                            errorMessages.push(`Telefone do contato ${index + 2} é inválido`);
                            isValid = false;
                        }
                    }
                });

                if (!isValid) {
                    Swal.fire({
                        title: 'Erro de Validação!',
                        html: errorMessages.join('<br>'),
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                // Se chegou até aqui, o formulário é válido - enviar via AJAX
                submitFormAjax(form);
            }
        });
        $(".custom_contact").each(function(){
            $(this).find('.contact_name').rules("add", { 
                required:true,
                messages:{required:"Por favor, insira um nome"}
            });

            $(this).find('.contact_email').rules("add", { 
                required:true,
                email:true,
                messages:{required:"Por favor, insira um e-mail", email:"Por favor, insira um e-mail válido"}
            });
        });
    });

    // Adicionar classe mt-2 se já existem contatos adicionais
    if ($('.custom_fields_add .custom_contact').length > 0) {
        $('.custom_fields_add').addClass('mt-2');
    }
});

function submitFormAjax(form) {
    var $form = $(form);
    var submitBtn = $form.find('button[type="submit"]');
    var btnText = submitBtn.find('.btn-text');
    var btnLoading = submitBtn.find('.btn-loading');
    
    // Desabilitar botão e mostrar loading
    submitBtn.prop('disabled', true);
    btnText.addClass('d-none');
    btnLoading.removeClass('d-none');
    
    // Preparar dados do formulário
    var formData = new FormData(form);

    var module = '{{ $module }}';
    
    $.ajax({
        url: '{{ route("clients.institutional.update", ["id" => $client->id, "module" => $module]) }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Sucesso!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = response.redirect;
                    }
                });
            } else {
                Swal.fire({
                    title: 'Erro!',
                    text: response.message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function(xhr) {
            var errorMessage = 'Erro interno do servidor';
            
            if (xhr.status === 422) {
                // Erro de validação do servidor
                var errors = xhr.responseJSON.errors;
                var errorList = '';
                
                $.each(errors, function(field, messages) {
                    $.each(messages, function(index, message) {
                        errorList += '• ' + message + '<br>';
                    });
                });
                
                errorMessage = errorList;
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            Swal.fire({
                title: 'Erro!',
                html: errorMessage,
                icon: 'error',
                confirmButtonText: 'OK'
            });
        },
        complete: function() {
            // Reabilitar botão e esconder loading
            submitBtn.prop('disabled', false);
            btnText.removeClass('d-none');
            btnLoading.addClass('d-none');
        }
    });
}

function reindexContacts(container) {
    $(container).find('.custom_contact').each(function(index) {
        var newIndex = index + 1; // índice começa em 1
        
        // Atualizar ID do container
        $(this).attr('id', 'custom_contact_' + newIndex);
        
        // Atualizar ID do grupo de campos
        $(this).find('.add_contacts').attr('id', 'custom-field-' + newIndex);
        
        // Atualizar título do contato
        $(this).find('.contact-title').text('Contato Adicional ' + newIndex);
        
        // Atualizar nomes dos campos (mantendo o valor do contact_id)
        var contactId = $(this).find('.contact_id').val();
        $(this).find('.contact_id').attr('name', 'contact_id_' + newIndex);
        $(this).find('.contact_name').attr('name', 'contact_name_' + newIndex);
        $(this).find('.contact_email').attr('name', 'contact_email_' + newIndex);
        $(this).find('.contact_phone').attr('name', 'contact_phone_' + newIndex);
        $(this).find('.contact_position').attr('name', 'contact_position_' + newIndex);
        $(this).find('.contact_notes').attr('name', 'contact_notes_' + newIndex);
    });
}
$("#toggleStatus").click(function() {
    const button = $(this);
    const clientId = {{ $client->id }};
    const module = '{{ $module }}';
    const isActive = button.hasClass('btn-danger'); // Se tem classe danger, está ativo
    
    const title = isActive ? "Desativar Cliente Institucional?" : "Ativar Cliente Institucional?";
    const text = isActive ? "Tem certeza que deseja desativar este cliente institucional?" : "Tem certeza que deseja ativar este cliente institucional?";
    
    showAlert("confirm", {
        title: title,
        text: text
    }, {
        onConfirm: () => {
            // Fazer requisição AJAX
            $.ajax({
                url: `{{ route('clients.institutional.toggle.status', ['module' => $module, 'id' => $client->id]) }}`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        // Atualizar o botão
                        if (response.status) {
                            // Cliente ativado - botão deve ser "Desativar" (vermelho)
                            button.removeClass('btn-success').addClass('btn-danger');
                            button.text('Desativar');
                            // Atualizar o badge de status
                            $('#status-display').html('<span class="badge text-bg-success fs-xxs">Ativo</span>');
                        } else {
                            // Cliente desativado - botão deve ser "Ativar" (verde)
                            button.removeClass('btn-danger').addClass('btn-success');
                            button.text('Ativar');
                            // Atualizar o badge de status
                            $('#status-display').html('<span class="badge text-bg-danger fs-xxs">Desativado</span>');
                        }
                        
                        showAlert("successToast", { text: response.message });
                    } else {
                        showAlert("errorToast", { text: response.message });
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Erro interno do servidor';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    showAlert("errorToast", { text: errorMessage });
                }
            });
        },
        onCancel: () => {
            showAlert("canceledToast", { text: "Ação cancelada!" });
        }
    });
});
</script>
@endpush