@extends('template_pages.session')

@section('page_title', 'Novo Projeto')
@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);
@endphp

@section('content_page')
<div class="card-body">
    <form id="projectForm" method="POST">
        {{ csrf_field() }}
        <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>
                    </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="" selected>Tipo Projeto</option>
                            @if(!empty($projectTypes))
                                @foreach($projectTypes as $type)
                                    <option value="{{ $type }}" {{ old('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="">ID Monday</option>
                            @if(!empty($mondayProjects))
                                @foreach($mondayProjects as $project)
                                    <option value="{{ $project['id'] }}">{{ $project['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>

                <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">
                    </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">
                    </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"></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>

                <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="" selected="">Cliente Faturável</option>
                            @foreach($financeClients as $client)
                                <option value="{{ $client->id }}">{{ $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" checked>
                            </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">
                                <input type="radio" class="btn-check" name="tipoProjeto" id="btnradio1" value="Avulso" autocomplete="off" 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">
                                <label class="btn btn-outline-primary" for="btnradio2">Recorrente</label>

                                <input type="radio" class="btn-check" name="tipoProjeto" id="btnradio3" value="Monday" autocomplete="off">
                                <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"/>
                            </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"/>
                            </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>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ã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_add">Salvar</button>
            </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>

<script>
$(document).ready(function() {
    $('.select2').select2();

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

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

    $('#sincronizar_monday').select2({
        placeholder: "Selecionar Projeto"
    });
    $('#sinc_monday').select2({
        placeholder: "Sincronizar Monday"
    });

    $('#btn_add').on('click', function(e) {
        // Adicionar métodos de validação customizados
        $.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) {
                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 = $('#submitBtn');
        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.store', ['module' => $module]) }}`,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    const projectId = response.project_id;
                    const tipoProjeto = $('input[name="tipoProjeto"]:checked').val();

                    if (tipoProjeto === 'Avulso') {
                        Swal.fire({
                            title: 'Projeto criado!',
                            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 criado!',
                            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
                        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);
        });
    });

    toggleSections("Avulso");
});
</script>
@endpush