@extends('template_pages.session')

@section('page_title', 'Adicionar Recorrência')
@section('page_icon', 'calendar-check')
@section('navbar', 'finance.navbar')

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

@section('content_page')
<style>
#value {
    margin-bottom: 0!important;
}
</style>
<div class="card-body">
    <form id="recurrenceForm">
        {{ csrf_field() }}
        <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-3">
                <label class="form-label">Projeto *</label>
                @if(isset($selectedProject))
                    <input type="hidden" name="project_id" id="project_id" value="{{ $selectedProject->id }}">
                    <input class="form-control" type="text" id="project_name" value="{{ $selectedProject->name }}" disabled readonly>
                @else
                    <select id="project_id" name="project_id" class="form-control select2">
                        <option value="">Selecione o projeto</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" data-preferential-due-day="{{ $project->financeClient->preferential_due_date ?? '' }}">{{ $project->name }}</option>
                        @endforeach
                    </select>
                @endif
            </div>
            <div class="col-md-3">
                <label class="form-label">Dia de Cobrança *</label>
                <select id="issue_day" name="issue_day" class="form-control select2">
                    <option value="">Selecionar Dia</option>
                    @php $today = now()->day; @endphp
                    @for($i = 1; $i <= 31; $i++)
                        <option value="{{ $i }}" {{ (old('issue_day', $today) == $i) ? 'selected' : '' }}>
                            {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Dia de Vencimento *</label>
                <select id="due_date" name="due_date" class="form-control select2">
                    <option value="">Selecionar Dia</option>
                    @php $preferentialDueDate = optional($selectedProject)->preferential_due_date; @endphp
                    @for($i = 1; $i <= 31; $i++)
                        <option value="{{ $i }}" {{ (old('due_date', $preferentialDueDate) == $i) ? 'selected' : '' }}>
                            {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Valor *</label>
                <div class="input-group">
                    <span class="input-group-text">R$</span>
                    @if(isset($selectedProject))
                    <input class="form-control" placeholder="Valor" type="text" name="value" id="value" value="{{ old('value', $selectedProject->value) }}" readonly />
                    @else
                    <input class="form-control value_price money" placeholder="Valor" type="text" name="value" id="value" value="{{ old('value') }}"/>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="row mt-3">
            <div class="col-lg-3">
                <label class="form-label">Adicionar quantidade de ciclo(s)</label>
                <div class="col-12 box_boleto_pdf">
                    <div class="form-check form-switch fs-xxl">
                        <input type="checkbox" class="form-check-input" name="custom-switch-checkbox" id="customSwitch">
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div id="inputCycle" class="d-none">
                    <label class="form-label">Quantidade de ciclo(s) <span class="text-red">*</span></label>
                    <input class="form-control" type="number" name="cycle" id="cycle" min="1">
                </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>
<!--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>
$(document).ready(function() {
    $('.select2').select2();

    @if(!isset($selectedProject))
    $('#project_id').select2({
        placeholder: "Selecione o projeto"
    });
    @endif
    $('#issue_day').select2({
        placeholder: "Selecione o dia"
    });
    $('#due_date').select2({
        placeholder: "Selecione o dia"
    });

    $('#customSwitch').change(function() {
        if ($(this).is(':checked')) {
            $('#inputCycle').removeClass('d-none');
        } else {
            $('#inputCycle').addClass('d-none');
            $('#cycle').val('');
        }
    });

    function fillProjectDefaultValue(projectId) {
        if (!projectId) {
            $('#value').val('').trigger('input');
            return;
        }
        var $project = $('#project_id');
        if (!$project.is('select')) {
            var serverValue = '{{ optional($selectedProject)->value }}';
            if (serverValue) {
                var formatted = serverValue.toString().replace(/^R\$\s?/, '');
                $('#value').val(formatted).trigger('input');
                return;
            }
        }
        var urlTemplate = '{{ route("projects.details.ajax", ["module" => "finance", "id" => "__ID__"]) }}';
        var url = urlTemplate.replace('__ID__', projectId);

        $.ajax({
            url: url,
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success && response.data && response.data.value) {
                    var formatted = response.data.value.toString().replace(/^R\$\s?/, '');
                    $('#value').val(formatted).trigger('input');
                }
            },
            error: function() {
                $('#value').val('').trigger('input');
            }
        });
    }

    function fillDueDateFromProject(projectId) {
        var $project = $('#project_id');
        var dueDay = null;

        if ($project.is('select')) {
            dueDay = $project.find('option[value="' + projectId + '"]').data('preferential-due-day');
        }

        if (!dueDay) {
            var preferentialDueFromServer = {{ optional($selectedProject)->preferential_due_date ?? 'null' }};
            if (preferentialDueFromServer) {
                dueDay = preferentialDueFromServer;
            }
        }

        if (dueDay && parseInt(dueDay) >= 1 && parseInt(dueDay) <= 31) {
            $('#due_date').val(String(dueDay)).trigger('change');
        } else {
            $('#due_date').val('').trigger('change');
        }
    }

    $('#project_id').on('change', function() {
        var projectId = $(this).val();
        fillProjectDefaultValue(projectId);
        fillDueDateFromProject(projectId);
    });

    // Seleção inicial vinda do servidor (preselect com ID)
    var selectedProjectIdFromServer = {{ isset($selectedProjectId) ? $selectedProjectId : 'null' }};
    if (selectedProjectIdFromServer) {
        $('#project_id').val(String(selectedProjectIdFromServer)).trigger('change');
        fillProjectDefaultValue(String(selectedProjectIdFromServer));
        fillDueDateFromProject(String(selectedProjectIdFromServer));
    }

    // Caso haja valor previamente selecionado (ex.: retorno de validação), aplicar vencimento
    var initialProjectId = $('#project_id').val();
    if (initialProjectId) {
        fillDueDateFromProject(initialProjectId);
    }

    // Métodos de validação customizados
    $.validator.addMethod("requiredIfCycleEnabled", function(value, element) {
        var cycleEnabled = $('#customSwitch').is(':checked');
        return !cycleEnabled || (value && value.trim() !== '' && parseInt(value) > 0);
    }, "A quantidade de ciclos é obrigatória quando habilitada.");

    $('#btn_add').on('click', function(e) {
        // Configuração da validação do formulário
        $("#recurrenceForm").validate({
            rules: {
                project_id: {
                    required: true
                },
                issue_day: {
                    required: true
                },
                due_date: {
                    required: true
                },
                value: {
                    required: true
                },
                cycle: {
                    requiredIfCycleEnabled: true,
                    min: 1
                }
            },
            messages: {
                project_id: {
                    required: "Selecione um projeto"
                },
                issue_day: {
                    required: "Selecione o dia de cobrança"
                },
                due_date: {
                    required: "Selecione o dia de vencimento"
                },
                value: {
                    required: "Informe o valor da recorrência"
                },
                cycle: {
                    min: "A quantidade de ciclos deve ser maior que zero"
                }
            },
            errorElement: 'span',
            errorClass: "invalid-feedback",
            errorPlacement: function (error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else if (element.hasClass('value_price')) {
                    error.insertAfter(element.closest('.input-group'));
                } 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) {
                var formData = new FormData(form);
                
                // Mostrar loading usando o padrão do sistema
                showAlert("loading", { text: "Salvando recorrência..." });
                
                $.ajax({
                    url: '{{ route("finance.recurrence.store") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            // Mostrar mensagem de sucesso usando SweetAlert2
                            showAlert("success", {
                                title: "Sucesso!",
                                text: response.message || "Recorrência criada com sucesso!"
                            }).then(() => {
                                // Redirecionar se especificado
                                if (response.redirect) {
                                    window.location.href = response.redirect;
                                } else {
                                    form.reset();
                                    $('.select2').val(null).trigger('change');
                                    $('#inputCycle').addClass('d-none');
                                }
                            });
                        } else {
                            showAlert("error", {
                                title: "Erro!",
                                text: response.message || "Erro ao criar recorrência"
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            // Erros de validação
                            var errors = xhr.responseJSON.errors;
                            var validator = $("#recurrenceForm").validate();
                            validator.showErrors(errors);
                            
                            showAlert("error", {
                                title: "Erro de Validação",
                                text: "Por favor, corrija os campos destacados"
                            });
                        } else {
                            // Outros erros
                            var message = xhr.responseJSON?.message || 'Erro interno do servidor';
                            showAlert("error", {
                                title: "Erro!",
                                text: message
                            });
                        }
                    }
                });
            }
        });
    });
});
</script>
@endpush