@extends('template_pages.session')

@section('page_title', 'Adicionar - Agência e Conta Bancária / Pix')
@section('page_icon', 'landmark')
@section('navbar', 'finance.navbar')

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

@section('content_page')
<div class="card-body">
    <form id="bankAccountForm">
        @csrf
        <div class="mb-4">
            <label class="form-label">Tipo de Cadastro *</label>
            <div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="preferred_payment" id="preferred_ted" value="ted" checked>
                    <label class="form-check-label" for="preferred_ted">TED</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="preferred_payment" id="preferred_pix" value="pix">
                    <label class="form-check-label" for="preferred_pix">PIX por chave</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="preferred_payment" id="preferred_pix_bank" value="pix_bank">
                    <label class="form-check-label" for="preferred_pix_bank">PIX por dados bancários</label>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="user" class="fs-4"></i>
            <h4 class="mb-0">Dados do Beneficiário</h4>
        </div>
        <div class="row mt-3">
            <div class="col-md-3 mt-3 mt-md-0">
                <label class="form-label">Apelido da Conta *</label>
                <input type="text" class="form-control" name="account_name" required placeholder="Apelido da conta">
            </div>
            <div class="col-md-3 mt-3 mt-md-0 ted-field">
                <label class="form-label">Nome *</label>
                <input type="text" class="form-control" name="name" placeholder="Nome do Beneficiário">
            </div>
            <div class="col-md-3">
                <label class="form-label">Registro *</label>
                <select class="form-select select2" name="register_type">
                    <option value="">Selecione</option>
                    <option value="custo_despesa">Custo/Despesa</option>
                    <option value="mesma_titularidade">Mesma Titularidade</option>
                </select>
            </div>
            <div class="col-md-3 mt-3 mt-md-0 ted-field">
                <label class="form-label">CPF/CNPJ *</label>
                <input type="text" class="form-control cpf_cnpj" name="cpf_cnpj" placeholder="CPF ou CNPJ">
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-3">
                <label class="form-label">Tipo de Pagamento *</label>
                <select class="form-select select2" name="payment_type">
                    <option value="">Selecione</option>
                    <option value="Custo">Custo</option>
                    <option value="Despesa">Despesa</option>
                    <option value="Movimentação entre Contas">Movimentação entre Contas</option>
                </select>
            </div>
            <div class="col-md-3 mt-3 mt-md-0">
                <label class="form-label">Categoria *</label>
                <input type="text" class="form-control" name="category" placeholder="Categoria">
            </div>
            <div class="col-md-3 mt-3 mt-md-0">
                <label class="form-label">Descrição *</label>
                <input type="text" class="form-control" name="description" placeholder="Descrição">
            </div>
            <div class="col-md-3 mt-3 mt-md-0">
                <label class="form-label">Valor</label>
                 <div class="input-group">
                    <span class="input-group-text">R$</span>
                    <input class="form-control money" type="text" name="value" placeholder="0,00">
                </div>
            </div>
        </div>

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

            <div class="d-flex align-items-center gap-1 mb-3">
                <i data-lucide="landmark" class="fs-4"></i>
                <h4 class="mb-0">Dados Bancários</h4>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Número do Banco</label>
                    <div class="input-group">
                        <input type="text" class="form-control cep" name="bank_code" id="bank_code" placeholder="123">
                        <button class="btn btn-dark btn-icon rounded-end" type="button" id="search_bank_code"><i data-lucide="search"></i></button>
                    </div>
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">Banco</label>
                    <input type="text" class="form-control" id="bank_name" name="bank_name" placeholder="Nome do Banco">
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">ISPB</label>
                    <input type="text" class="form-control" id="ispb" name="ispb" placeholder="ISPB">
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">Agência</label>
                    <input type="text" class="form-control" name="branch" placeholder="Agência">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-3">
                    <label class="form-label">Conta</label>
                    <input type="text" class="form-control" name="account" placeholder="Conta">
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">Dígito da Conta</label>
                    <input type="text" class="form-control" name="account_digit" placeholder="Dígito da Conta" maxlength="1">
                    <small class="text-muted">Caso o dígito seja X, substitua por 0.</small>
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">Tipo de Conta</label>
                    <select class="form-select select2" name="account_type">
                        <option value="">Selecione</option>
                        <option value="checking_account">Conta Corrente</option>
                        <option value="salary_account">Conta Salário</option>
                        <option value="savings_account">Poupança</option>
                        <option value="payment_account">Conta de Pagamento</option>
                    </select>
                </div>
            </div>
        </div>

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

            <div class="d-flex align-items-center gap-1 mb-3">
                <i data-lucide="key-round" class="fs-4"></i>
                <h4 class="mb-0">Dados do PIX</h4>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Tipo de PIX</label>
                    <select class="form-select select2" name="pix_type">
                        <option value="">Selecione</option>
                        <option value="cpf">CPF</option>
                        <option value="cnpj">CNPJ</option>
                        <option value="email">E-mail</option>
                        <option value="phone">Telefone</option>
                        <option value="evp">Chave Aleatória</option>
                    </select>
                </div>
                <div class="col-md-3 mt-3 mt-md-0">
                    <label class="form-label">Chave PIX</label>
                    <input type="text" class="form-control" id="pix_key" name="pix_key" placeholder="Chave PIX">
                </div>
            </div>
        </div>

        <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_save">Salvar</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<!-- Select2 js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.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() {

        // Busca o banco ao clicar no botão
        $('#search_bank_code').on('click', function() {
            buscarBanco();
        });

        async function buscarBanco() {
            let codeInput = document.getElementById('bank_code');
            let code = codeInput ? codeInput.value : '';
            
            if (!code) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atenção',
                    text: 'Por favor, digite um código bancário.'
                });
                return;
            }

            code = code.trim();

            try {
                // Faz a chamada para a API interna (Iugu)
                const response = await fetch('{{ route("finance.settings.bank_account.search_bank") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                    },
                    body: JSON.stringify({ search: code })
                });
                
                if (!response.ok) {
                    let errorMsg = 'Erro na busca';
                    try {
                        const errorData = await response.json();
                        errorMsg = errorData.error || errorData.message || 'Banco não encontrado';
                    } catch (e) {
                        errorMsg = `Erro HTTP: ${response.status}`;
                    }
                    throw new Error(errorMsg);
                }

                const data = await response.json();

                // Preenche os campos com o retorno da API
                if(document.getElementById('bank_name')) {
                    let el = document.getElementById('bank_name');
                    el.value = data.name || '';
                    $(el).removeClass('is-invalid');
                    if ($(el).closest('form').data('validator')) {
                        $(el).valid();
                    }
                }

                if(document.getElementById('ispb')) {
                    let el = document.getElementById('ispb');
                    el.value = data.ispb || '';
                    $(el).removeClass('is-invalid');
                    if ($(el).closest('form').data('validator')) {
                        $(el).valid();
                    }
                }

            } catch (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro na busca',
                    text: error.message
                });
                console.error(error);
            }
        }

        // CPF/CNPJ Mask (CNPJ alfanumérico: letra ou mais de 11 caracteres = CNPJ)
        var CpfCnpjMaskBehavior = function (val) {
            var clean = val.replace(/[^A-Za-z0-9]/g, '');
            return (/[A-Za-z]/.test(clean) || clean.length > 11)
                ? 'SS.SSS.SSS/SSSS-00'
                : '000.000.000-009';
        },
        cpfCnpjpOptions = {
            translation: { 'S': { pattern: /[A-Za-z0-9]/ } },
            onKeyPress: function(val, e, field, options) {
                field.val(val.toUpperCase());
                field.mask(CpfCnpjMaskBehavior.apply({}, arguments), options);
            }
        };
        $('.cpf_cnpj').mask(CpfCnpjMaskBehavior, cpfCnpjpOptions);

        $('.cpf_cnpj').on('paste', function(e) {
            var pastedValue = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
            var cleanValue = pastedValue.replace(/[^A-Za-z0-9]/g, '');
            if (/[A-Za-z]/.test(cleanValue) || cleanValue.length > 11) {
                $(this).mask('SS.SSS.SSS/SSSS-00', cpfCnpjpOptions);
            }
        });

        $('.select2').select2({
            width: '100%'
        }).on('change', function() {
            $(this).valid();
        });

        // Helpers usados nas regras de validação condicional
        function isTed() { return $('input[name="preferred_payment"]:checked').val() === 'ted'; }
        function isPixKey() { return $('input[name="preferred_payment"]:checked').val() === 'pix'; }
        function isPixBank() { return $('input[name="preferred_payment"]:checked').val() === 'pix_bank'; }
        function needsBank() { return isTed() || isPixBank(); }

        // Alterna os campos exibidos conforme o tipo de cadastro
        // (TED e PIX por dados bancários usam os mesmos campos; PIX por chave usa a chave)
        function togglePaymentMode() {
            if (isPixKey()) {
                $('.ted-field, .ted-block').hide();
                $('.pix-block').show();
            } else {
                $('.ted-field, .ted-block').show();
                $('.pix-block').hide();
            }
        }

        $('input[name="preferred_payment"]').on('change', togglePaymentMode);
        togglePaymentMode();

        // "Movimentação entre Contas" só é válido para registro Mesma Titularidade
        var $movOption = $('select[name="payment_type"] option[value="Movimentação entre Contas"]').detach();

        function syncMovimentacaoOption() {
            var isMesma = $('select[name="register_type"]').val() === 'mesma_titularidade';
            var $paymentType = $('select[name="payment_type"]');
            var hasOpt = $paymentType.find('option[value="Movimentação entre Contas"]').length > 0;

            if (isMesma && !hasOpt) {
                $paymentType.append($movOption.clone());
            } else if (!isMesma && hasOpt) {
                if ($paymentType.val() === 'Movimentação entre Contas') {
                    $paymentType.val('');
                }
                $paymentType.find('option[value="Movimentação entre Contas"]').remove();
            }
            $paymentType.trigger('change.select2');
        }

        $('select[name="register_type"]').on('change', syncMovimentacaoOption);
        syncMovimentacaoOption();

        // Tratamento do dígito da conta
        $('input[name="account_digit"]').on('input', function() {
            let val = $(this).val();
            
            // Se o usuário digitou X ou x, troca por 0
            if (val.toUpperCase() === 'X') {
                val = '0';
            }
            
            // Remove tudo que não for dígito
            val = val.replace(/\D/g, '');
            
            $(this).val(val);
        });

        $('[name="pix_type"]').on('change', function() {
            let type = $(this).val();
            let $pixKey = $('#pix_key');

            // Remove máscara e limpa o valor ao mudar o tipo
            $pixKey.unmask().val('');

            switch (type) {
                case 'cpf':
                    $pixKey.mask('000.000.000-00');
                    $pixKey.attr('placeholder', '000.000.000-00');
                    break;
                case 'cnpj':
                    $pixKey.mask('SS.SSS.SSS/SSSS-00', {
                        translation: { 'S': { pattern: /[A-Za-z0-9]/ } },
                        onKeyPress: function (val, e, field, options) { field.val(val.toUpperCase()); }
                    });
                    $pixKey.attr('placeholder', 'SS.SSS.SSS/SSSS-00');
                    break;
                case 'phone':
                    var SPMaskBehavior = function (val) {
                        return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
                    },
                    spOptions = {
                        onKeyPress: function(val, e, field, options) {
                            field.mask(SPMaskBehavior.apply({}, arguments), options);
                        }
                    };
                    $pixKey.mask(SPMaskBehavior, spOptions);
                    $pixKey.attr('placeholder', '(00) 00000-0000');
                    break;
                case 'email':
                    $pixKey.attr('placeholder', 'exemplo@email.com');
                    break;
                default:
                    // evp e outros
                    $pixKey.attr('placeholder', 'Chave PIX');
                    break;
            }
        });

        // Configuração da validação do formulário
        $("#bankAccountForm").validate({
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {
                register_type: { required: true },
                name: { required: needsBank, minlength: 2 },
                account_name: { required: true },
                cpf_cnpj: { required: needsBank },
                payment_type: { required: true },
                category: { required: true },
                description: { required: true, minlength: 2 },

                // TED / PIX por dados bancários
                bank_name: { required: needsBank },
                ispb: { required: needsBank },
                branch: { required: needsBank },
                account: { required: needsBank },
                account_digit: { required: needsBank },
                account_type: { required: needsBank },

                // PIX por chave
                pix_type: { required: isPixKey },
                pix_key: { required: isPixKey },
            },
            messages: {
                register_type: { required: "Selecione o tipo de registro" },
                name: { required: "O nome é obrigatório" },
                account_name: { required: "Informe o nome da conta" },
                cpf_cnpj: { required: "O CPF/CNPJ é obrigatório" },
                payment_type: { required: "Selecione o tipo de pagamento" },
                category: { required: "A categoria é obrigatória" },
                description: { required: "A descrição é obrigatória" },
                
                bank_code: { required: "Informe o banco ou selecione um tipo de PIX" },
                bank_name: { required: "O nome do banco é obrigatório" },
                ispb: { required: "O ISPB é obrigatório" },
                branch: { required: "A agência é obrigatória" },
                account: { required: "A conta é obrigatória" },
                account_digit: { required: "O dígito é obrigatório" },
                account_type: { required: "Selecione o tipo de conta" },

                pix_type: { required: "Selecione o tipo de PIX ou informe o banco" },
                pix_key: { required: "A chave PIX é obrigatória" }
            },
            highlight: function(element){
                $(element).addClass('is-invalid');
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').addClass('is-invalid');
                }
            },
            unhighlight: function(element){
                $(element).removeClass('is-invalid');
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
            },
            errorPlacement: function(error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                var formData = $(form).serialize();
                
                $.ajax({
                    url: "{{ route('finance.settings.bank_account.store') }}",
                    type: "POST",
                    data: formData,
                    beforeSend: function() {
                        $('#btn_save').attr('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Salvando...');
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Sucesso!',
                                text: response.message,
                                showConfirmButton: true
                            }).then((result) => {
                                if (response.redirect_url) {
                                    window.location.href = response.redirect_url;
                                } else {
                                    window.location.href = "{{ route('finance.settings.bank_account') }}";
                                }
                            });
                        } else {
                             Swal.fire({
                                icon: 'error',
                                title: 'Erro!',
                                text: response.message || 'Ocorreu um erro ao salvar.'
                            });
                        }
                    },
                    error: function(xhr) {
                         var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Ocorreu um erro na requisição.';
                         var errors = xhr.responseJSON && xhr.responseJSON.errors ? xhr.responseJSON.errors : null;
                         
                         if(errors){
                             errorMessage += "<br>";
                             $.each(errors, function(key, value){
                                 errorMessage += value[0] + "<br>";
                             });
                         }

                        Swal.fire({
                            icon: 'error',
                            title: 'Erro!',
                            html: errorMessage
                        });
                    },
                    complete: function() {
                        $('#btn_save').attr('disabled', false).html('Salvar');
                    }
                });
            }
        });
    });
</script>
@endpush