@extends('template_pages.session')

@section('page_title', 'Editar Projeto #' . request()->route('id'))
@section('page_icon', 'folder-kanban')

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

@php
    $module = request()->segment(1);
    $projectId = request()->route('id');
@endphp

@section('content_page')
<style>
#project_value-error {
    display: none!important;
}
#project_value, #month_value {
    margin-bottom: 0!important;
}
</style>
<div class="card-body">
    <form id="projectForm" method="POST">
        {{ csrf_field() }}
        <input type="hidden" name="project_id" value="{{ $projectId }}">
        
        <div class="card" id="core">
            <div class="card-header justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-1">
                    <i data-lucide="aperture" class="fs-4"></i>
                    <h5 class="card-title">Core</h5>
                </div>
            </div>
        
            <div class="card-body">
                <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 do Projeto *</label>
                        <input type="text" class="form-control" name="name" placeholder="Nome do Projeto" required id="project_name" value="{{ old('name', $project->name ?? '') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo de projeto *</label>
                        <select class="form-control select2 select_projects" name="project_type" id="tipo_projeto" required>
                            <option value="" {{ !isset($project->project_type) || $project->project_type == '' ? 'selected' : '' }}>Tipo Projeto</option>
                            @if(!empty($projectTypes))
                                @foreach($projectTypes as $type)
                                    <option value="{{ $type }}" {{ old('project_type', $project->project_type ?? '') === $type ? 'selected' : '' }}>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        <div class="invalid-feedback">
                            Selecione o tipo de projeto
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">ID Monday</label>
                        <select class="form-control select2" name="monday_id" id="sincronizar_monday">
                            <option value="" selected>Selecionar Projeto</option>
                            @if(!empty($mondayProjects))
                                @foreach($mondayProjects as $mProject)
                                    <option value="{{ $mProject['id'] }}" {{ (string) old('monday_id', $project->monday_id ?? '') === (string) $mProject['id'] ? 'selected' : '' }}>
                                        {{ $mProject['name'] }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <!-- Contrato -->
                <div class="border-top border-dashed my-3"></div>
                <div class="d-flex align-items-center gap-1">
                    <i data-lucide="file-text" class="fs-4"></i>
                    <h4 class="mb-0">Informações do Contrato</h4>
                </div>

                <input type="hidden" name="project_contract_id" value="{{ $projectContracts->id }}">

                <div class="row mt-3">
                    <div class="col-md-4">
                        <label class="form-label">SLA (minutos)</label>
                        <input type="number" class="form-control" name="sla" placeholder="SLA em minutos" id="sla" value="{{ $projectContracts->sla ?? '' }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Posts por Mês</label>
                        <input type="number" class="form-control" name="post_per_month" placeholder="Quantidade de posts" id="post_per_month" value="{{ $projectContracts->post_per_month ?? '' }}">
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-lg-12">
                        <label class="form-label">Observações do Contrato</label>
                        <textarea class="form-control" rows="3" name="contract_notes" placeholder="Observações adicionais sobre o contrato" id="contract_notes">{{ $projectContracts->notes ?? '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>

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

        <div class="card" id="finance">
            <div class="card-header justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-1">
                    <i data-lucide="badge-dollar-sign" class="fs-4"></i>
                    <h5 class="card-title">Finance</h5>
                </div>
            </div>
        
            <div class="card-body">

                <div class="d-flex align-items-center gap-1">
                    <i data-lucide="hand-coins" class="fs-4"></i>
                    <h4 class="mb-0">Configurações de Cobrança</h4>
                </div>

                <input type="hidden" name="project_finance_id" value="{{ $billingSettings->id }}">

                <div class="row mt-3">
                    <div class="col-md-3">
                        <label class="form-label">Cliente Faturável *</label>
                        <select class="form-control select2" name="finance_client_id" id="tipo_cliente" required>
                            <option value="" {{ !isset($project->finance_client_id) || $project->finance_client_id == '' ? 'selected' : '' }}>Cliente Faturável</option>
                            @foreach($financeClients as $client)
                                <option value="{{ $client->id }}" {{ old('finance_client_id', $project->finance_client_id ?? '') == $client->id ? 'selected' : '' }}>
                                    {{ $client->legal_name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">
                            Selecione o cliente faturável
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Enviar cobranças e NFs por email após emissão</label>
                        <div class="col-12 box_boleto_pdf">
                            <div class="form-check form-switch fs-xxl">
                                <input
                                    type="checkbox"
                                    class="form-check-input"
                                    id="switch1"
                                    name="email_notification"
                                    {{ old('email_notification', $billingSettings->send_mail ?? true) ? 'checked' : '' }}
                                    data-initial-send-mail="{{ ($billingSettings->send_mail ?? false) ? '1' : '0' }}"
                                    data-in-summary="{{ ($isInSummary ?? false) ? '1' : '0' }}"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Configurações do Projeto *</label>
                        <div class="col-12">
                            <div class="btn-group" role="group" aria-label="Radio toggle group">
                                @php
                                    $projectType = old('tipoProjeto', $billingSettings->billing_type ?? 'Avulso');
                                @endphp
                                <input type="radio" class="btn-check" name="tipoProjeto" id="btnradio1" value="Avulso" autocomplete="off" {{ $projectType == 'Avulso' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary" for="btnradio1">Avulso</label>

                                <input type="radio" class="btn-check" name="tipoProjeto" id="btnradio2" value="Recorrente" autocomplete="off" {{ $projectType == 'Recorrente' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary" for="btnradio2">Recorrente</label>

                                <input type="radio" class="btn-check" name="tipoProjeto" id="btnradio3" value="Monday" autocomplete="off" {{ $projectType == 'Monday' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary" for="btnradio3">Vincular Monday</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div id="inputAvulso" class="tipoProjetoInput">
                            <label class="form-label">Valor Total do Projeto *</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input class="form-control value_price money" placeholder="Valor" type="text" name="project_value" id="project_value" value="{{ old('project_value', (isset($billingSettings->value) && $billingSettings->billing_type == 'Avulso') ? number_format($billingSettings->value, 2, ',', '.') : '') }}"/>
                            </div>
                            <div class="invalid-feedback">
                                Informe o valor total do projeto
                            </div>
                        </div>

                        <div id="inputRecorrente" class="tipoProjetoInput" style="display:none;">
                            <label class="form-label">Valor Mensal *</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input class="form-control value_price money" placeholder="Valor" type="text" name="month_value" id="month_value" value="{{ old('month_value', (isset($billingSettings->value) && $billingSettings->billing_type == 'Recorrente') ? number_format($billingSettings->value, 2, ',', '.') : '') }}"/>
                            </div>
                            <div class="invalid-feedback">
                                Informe o valor mensal do projeto
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-lg-12">
                        <label class="form-label">Descrição NF *</label>
                        <textarea class="form-control" rows="3" name="description" id="description" required>{{ old('description', $billingSettings->invoice_description ?? 'Gerenciamento de Projeto Digital') }}</textarea>
                        <small class="text-muted d-block mt-1">Você pode utilizar a tag {mesanocorrente} para inserir o mês e ano corrente na descrição da NF.</small>
                    </div>
                </div> 
            </div>
        </div>

        <!-- Botões -->
        <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 Alterações</button>
            </div>
            <div class="col-12 col-lg btn-list text-lg-end text-left mt-lg-0 mt-2">
                <a id="disable" class="btn btn-danger" href="javascript: void(0);">Desativar Projeto</a>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<!-- Daterangepicker Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/scripts/date_picker_pt_br.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>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/inspinia/plugins/sweetalert2/sweetalert2.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Função para atualizar visual dos cards
    function updateCardSelection() {
        cards.forEach(card => {
            const radio = card.querySelector('input[type="radio"]');
            if (radio.checked) {
                card.classList.add('selected');
            } else {
                card.classList.remove('selected');
            }
        });
    }
    
    // Adicionar evento de clique nos cards
    cards.forEach(card => {
        card.addEventListener('click', function(e) {
            // Evitar duplo clique no radio button
            if (e.target.type !== 'radio') {
                const radio = this.querySelector('input[type="radio"]');
                radio.checked = true;
                updateCardSelection();
            }
        });
    });
    
    // Adicionar evento nos radio buttons
    radios.forEach(radio => {
        radio.addEventListener('change', updateCardSelection);
    });
    
    // Inicializar seleção
    updateCardSelection();
});
$(document).ready(function() {
    $('.select2').select2();

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

    $('#tipo_cliente').select2({
        placeholder: "Selecione o cliente"
    });

    $('#btn_update').on('click', function(e) {
        // Adicionar métodos de validação customizados
        $.validator.addMethod("requiredIfAvulso", function(value, element) {
            var tipoProjeto = $('input[name="tipoProjeto"]:checked').val();
            return tipoProjeto !== 'Avulso' || (value && parseFloat(value) > 0);
        }, "");

        $.validator.addMethod("requiredIfRecorrente", function(value, element) {
            var tipoProjeto = $('input[name="tipoProjeto"]:checked').val();
            return tipoProjeto !== 'Recorrente' || (value && parseFloat(value) > 0);
        }, "");

        $.validator.addMethod("requiredIfMonday", function(value, element) {
            var tipoProjeto = $('input[name="tipoProjeto"]:checked').val();
            return tipoProjeto !== 'Monday' || (value && value.trim() !== '');
        }, "O ID do projeto Monday é obrigatório para este tipo de projeto.");

        // Configuração da validação do formulário
        $("#projectForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                project_type: {
                    required: true
                },
                finance_client_id: {
                    required: true
                },
                description: {
                    required: true,
                    minlength: 10
                },
                tipoProjeto: {
                    required: true
                },
                month_value: {
                    requiredIfRecorrente: true
                },
                monday_id: {
                    requiredIfMonday: true
                }
            },
            messages: {
                name: {
                    required: "O nome do projeto é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres"
                },
                project_type: {
                    required: ""
                },
                finance_client_id: {
                    required: ""
                },
                description: {
                    required: "A descrição é obrigatória",
                    minlength: "A descrição deve ter pelo menos 10 caracteres"
                },
                tipoProjeto: {
                    required: "A configuração do projeto é obrigatória"
                },
                month_value: {
                    required: "",
                }
            },
            errorElement: 'span',
            errorClass: "invalid-feedback",
            errorPlacement: function (error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(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, errorClass, validClass) {
                $(element).removeClass('is-invalid');

                // Tratamento especial para Select2
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
            },            
            submitHandler: function(form) {
                // Verificar se precisa mostrar o pop-up antes de salvar
                const $checkbox = $('#switch1');
                const initialSendMail = String($checkbox.data('initial-send-mail')) === '1';
                const isInSummary = String($checkbox.data('in-summary')) === '1';
                const willEnable = $checkbox.is(':checked');

                if (!initialSendMail && isInSummary && willEnable) {
                    Swal.fire({
                        title: 'Habilitar envio por email?',
                        html: `
                            <div class="text-start">
                                <p class="mb-2">
                                    Ao habilitar o envio de email para este projeto,
                                    <strong>ele será removido automaticamente</strong> do resumo de cobrança.
                                </p>
                                <p class="mb-0">Deseja continuar?</p>
                            </div>
                        `,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Sim, continuar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            submitFormAjax();
                        }
                    });
                } else {
                    submitFormAjax();
                }
            }
        });

        // Revalidar campos quando o tipo de projeto mudar
        $('input[name="tipoProjeto"]').on('change', function() {
            $('#month_value').valid();
            $('#sincronizar_monday').valid();
        });
    });

    // Função para submeter o formulário via AJAX
    function submitFormAjax() {
        const submitBtn = $('#btn_update');
        const originalText = submitBtn.text();
        
        // Desabilitar botão e mostrar loading
        submitBtn.prop('disabled', true).text('Salvando...');
        
        // Obter dados do formulário
        const formData = new FormData($('#projectForm')[0]);
        
        // Determinar o módulo baseado na URL atual
        const currentPath = window.location.pathname;
        const module = currentPath.includes('/core/') ? 'core' : 'finance';
        
        $.ajax({
            url: `{{ route('projects.update', ['id' => $project->id, 'module' => $module]) }}`,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    const projectId = {{ $project->id }};
                    const tipoProjeto = $('input[name="tipoProjeto"]:checked').val();
                    
                    if (tipoProjeto === 'Avulso') {
                        Swal.fire({
                            title: 'Projeto atualizado!',
                            text: 'Deseja criar uma cobrança para este projeto?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Criar Cobrança',
                            cancelButtonText: 'Agora não'
                        }).then((result) => {
                            if (result.isConfirmed && projectId) {
                                const url = '{{ route("finance.charges.add", ["projectId" => "__ID__"]) }}'.replace('__ID__', projectId);
                                window.location.href = url;
                            } else if (response.redirect) {
                                window.location.href = response.redirect;
                            }
                        });
                    } else if (tipoProjeto === 'Recorrente') {
                        Swal.fire({
                            title: 'Projeto atualizado!',
                            text: 'Deseja criar uma recorrência para este projeto?',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Criar Recorrência',
                            cancelButtonText: 'Agora não'
                        }).then((result) => {
                            if (result.isConfirmed && projectId) {
                                const url = '{{ route("finance.recurrence.add", ["projectId" => "__ID__"]) }}'.replace('__ID__', projectId);
                                window.location.href = url;
                            } else if (response.redirect) {
                                window.location.href = response.redirect;
                            }
                        });
                    } else {
                        // Monday: apenas confirmação (mantém o comportamento atual)
                        Swal.fire({
                            title: 'Sucesso!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed && response.redirect) {
                                window.location.href = response.redirect;
                            }
                        });
                    }
                } else {
                    Swal.fire({
                        title: 'Erro!',
                        text: response.message || 'Ocorreu um erro ao salvar o projeto.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Ocorreu um erro ao salvar o projeto.';
                
                if (xhr.status === 422) {
                    // Erros de validação
                    const errors = xhr.responseJSON.errors;
                    let errorList = '<ul>';
                    
                    $.each(errors, function(field, messages) {
                        $.each(messages, function(index, message) {
                            errorList += '<li>' + message + '</li>';
                        });
                    });
                    
                    errorList += '</ul>';
                    
                    Swal.fire({
                        title: 'Erro de Validação!',
                        html: errorList,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    // Outros erros
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    
                    Swal.fire({
                        title: 'Erro!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            complete: function() {
                // Reabilitar botão
                submitBtn.prop('disabled', false).text(originalText);
            }
        });
    }
});

document.addEventListener("DOMContentLoaded", function() {
    const radios = document.querySelectorAll('input[name="tipoProjeto"]');
    const sections = {
        Avulso: document.getElementById("inputAvulso"),
        Recorrente: document.getElementById("inputRecorrente")
    };

    function toggleSections(selected) {
        for (const key in sections) {
            sections[key].style.display = (key === selected) ? "block" : "none";
        }
    }

    radios.forEach(radio => {
        radio.addEventListener("change", function() {
            toggleSections(this.value);
        });
    });

    // Inicializar com o valor que está selecionado no HTML (vindo do banco)
    const selectedRadio = document.querySelector('input[name="tipoProjeto"]:checked');
    if (selectedRadio) {
        toggleSections(selectedRadio.value);
    } else {
        // Fallback para Avulso se nenhum estiver selecionado
        toggleSections("Avulso");
    }
});

// Função para configurar botão de desativar
$("#disable").click(function() {
    Swal.fire({
        title: 'Desativar Projeto Completamente?',
        html: `
            <div class="text-start">
                <p><strong>Esta ação também vai desativar:</strong></p>
                <ul class="list-unstyled">
                    <li>• <strong>Contratos ativos desse projeto</strong></li>
                    <li>• <strong>Configurações financeiras ativas desse projeto</strong></li>
                </ul>
            </div>
        `,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sim, desativar tudo!',
        cancelButtonText: 'Cancelar',
        width: '500px'
    }).then((result) => {
        if (result.isConfirmed) {
            disableProject();
        }
    });
});

// Função para desativar projeto
function disableProject() {
    const projectId = {{ $projectId }};
    const module = '{{ $module }}';
    
    // Mostrar loading
    Swal.fire({
        title: 'Desativando...',
        text: 'Por favor, aguarde enquanto desativamos o projeto e todos os componentes associados.',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.ajax({
        url: '{{ route('projects.disable', ['module' => $module, 'id' => $projectId]) }}',
        type: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Projeto Desativado!',
                    html: `
                        <div class="text-start">
                            <p class="mb-3">${response.message}</p>
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle me-2"></i>
                                Todos os componentes foram desativados com sucesso.
                            </div>
                        </div>
                    `,
                    icon: 'success',
                    confirmButtonText: 'Voltar à Lista',
                    confirmButtonColor: '#28a745'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Trocar redirect por route() para evitar problemas de barra final
                        window.location.href = '{{ route('projects.index', ['module' => $module]) }}';
                    }
                });
            } else {
                Swal.fire({
                    title: 'Erro na Desativação!',
                    text: response.message || 'Erro ao desativar o projeto.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function(xhr) {
            let errorMessage = 'Erro ao desativar o projeto.';
            
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            Swal.fire({
                title: 'Erro!',
                text: errorMessage,
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    });
}
</script>
@endpush