@extends('layouts.app')

@section('title', 'Editar Conta a Pagar')

@push('styles-custom')
    <link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 38px;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
            padding-left: 0;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
        .select2-dropdown {
            border-color: #ced4da;
        }
        .select2-search--dropdown .select2-search__field {
            padding: 8px;
            border-radius: 4px;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contas-a-pagar.index') }}">Contas a Pagar</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Conta a Pagar</li>
        </ol>
    </nav>

    @if ($errors->any())
        <div class="alert alert-danger mb-3">
            <h5><i class="fas fa-exclamation-triangle me-2"></i>Atenção!</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @include('contas_a_pagar.partials.form', [
        'action' => route('contas-a-pagar.update', $conta->id),
        'method' => 'PUT',
        'title' => 'Editar Conta a Pagar',
        'subtitle' => 'Atualize os dados da conta a pagar.',
        'conta' => $conta,
        'permiteEdicaoValor' => $permiteEdicaoValor,
        'filters' => $filters ?? [],
    ])
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/inputmask/jquery.inputmask.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Debug do formulário
            $('#form-conta').on('submit', function(e) {
                console.log('Formulário enviado!');
                console.log('Action:', $(this).attr('action'));
                console.log('Method:', $(this).attr('method'));
                console.log('Dados:', $(this).serialize());

                // Verifica se há erros de validação do navegador
                const formElement = document.getElementById('form-conta');
                if(formElement && !formElement.checkValidity()) {
                    console.error('Erros de validação do formulário encontrados.');
                    // Não previne o comportamento padrão para que o navegador mostre os erros
                } else {
                    console.log('Formulário é válido, prosseguindo com o envio');

                    // Backup: forçar o envio do formulário programaticamente
                    // Isso resolve um possível problema com o botão de submit não funcionando
                    // Remova o comentário se o formulário continuar não enviando
                    // setTimeout(function() {
                    //     formElement.submit();
                    // }, 100);
                }
            });

            // Adicionar handler de clique no botão para garantir funcionamento
            $('button[type="submit"]').on('click', function(e) {
                console.log('Botão de submit clicado');
                const form = $('#form-conta');
                console.log('Formulário encontrado:', form.length > 0);
                if (form.length > 0) {
                    console.log('Tentando enviar formulário via botão');
                    form.submit();
                }
            });

            // Inicializar Select2 em todos os selects
            $('.select2-basic').select2({
                width: '100%',
                placeholder: "Selecione uma opção",
                allowClear: true
            });

            // Inicializar Flatpickr para campos de data
            $('.flatpickr-date').flatpickr({
                dateFormat: 'd/m/Y',
                locale: 'pt',
                allowInput: true,
                // Permitir que o flatpickr aceite datas no formato brasileiro
                parseDate: (datestr, format) => {
                    if (!datestr) return null;
                    // Suporte para formato brasileiro d/m/Y
                    const regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
                    if (datestr.match(regex)) {
                        const [, day, month, year] = datestr.match(regex);
                        return new Date(year, month - 1, day);
                    }
                    return null;
                },
                formatDate: (date, format) => {
                    // Formatar para padrão brasileiro
                    const day = date.getDate().toString().padStart(2, '0');
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const year = date.getFullYear();
                    return `${day}/${month}/${year}`;
                }
            });

            // Máscara para valor monetário
            $('.valor-input').inputmask({
                alias: 'numeric',
                groupSeparator: '.',
                radixPoint: ',',
                autoGroup: true,
                digits: 2,
                digitsOptional: false,
                prefix: '',
                placeholder: '0',
                rightAlign: false,
                autoUnmask: true,
                removeMaskOnSubmit: true,
                unmaskAsNumber: true
            });

            // Carregar detalhes do evento quando selecionado
            $('#evento_id').on('change', function() {
                const eventoId = $(this).val();
                if (eventoId) {
                    $.ajax({
                        url: "{{ route('contas-a-pagar.buscar-evento') }}",
                        type: "GET",
                        data: { evento_id: eventoId },
                        success: function(response) {
                            if (response.success) {
                                // Exibir detalhes do evento
                                const evento = response.evento;
                                const dataFormatada = formatarData(evento.data);
                                $('#evento-detalhes').html(`
                                    <div class="alert alert-info mt-2">
                                        <strong>${evento.nome}</strong><br>
                                        Data: ${dataFormatada} às ${evento.hora}<br>
                                        Local: ${evento.local}, ${evento.cidade}/${evento.uf}
                                    </div>
                                `).show();
                            }
                        },
                        error: function() {
                            $('#evento-detalhes').html('').hide();
                        }
                    });
                } else {
                    $('#evento-detalhes').html('').hide();
                }
            });

            // Disparar o evento change se já tiver um evento selecionado
            if ($('#evento_id').val()) {
                $('#evento_id').trigger('change');
            }

            // Função para formatar data YYYY-MM-DD para DD/MM/YYYY
            function formatarData(dataStr) {
                if (!dataStr) return '';

                try {
                    const data = new Date(dataStr);
                    return data.toLocaleDateString('pt-BR');
                } catch (e) {
                    return dataStr;
                }
            }
        });
    </script>
@endpush