@extends('layouts.app')

@section('title', 'Novo Saldo Inicial')

@push('styles-custom')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@section('content')
<div class="content saldos-content">
    <div class="mb-9">
        <div class="row g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Novo Saldo Inicial</h2>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12 col-xl-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Dados do Saldo Inicial</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('saldos-iniciais.store') }}" method="POST" id="form-saldo-inicial">
                            @csrf
                            
                            <div class="row g-3">
                                <!-- Empresa -->
                                <div class="col-md-6">
                                    <label for="empresa_id" class="form-label">Empresa <span class="text-danger">*</span></label>
                                    <select class="form-select select2" id="empresa_id" name="empresa_id" required>
                                        <option value="">Selecione uma empresa</option>
                                        @foreach($empresas as $empresa)
                                        <option value="{{ $empresa->id }}" {{ old('empresa_id') == $empresa->id ? 'selected' : '' }}>
                                            {{ $empresa->razao_social }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @error('empresa_id')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Data -->
                                <div class="col-md-6">
                                    <label for="data" class="form-label">Data <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="data" name="data" 
                                        value="{{ old('data') }}" placeholder="dd/mm/aaaa" required>
                                    @error('data')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Conta Bancária -->
                                <div class="col-md-6">
                                    <label for="conta_bancaria_id" class="form-label">Conta Bancária <span class="text-danger">*</span></label>
                                    <select class="form-select select2" id="conta_bancaria_id" name="conta_bancaria_id" required disabled>
                                        <option value="">Selecione primeiro uma empresa</option>
                                    </select>
                                    @error('conta_bancaria_id')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                    <div id="alerta-saldo-existente" class="alert alert-warning mt-2" style="display: none;">
                                        <span class="fas fa-exclamation-triangle me-1"></span>
                                        Esta conta bancária já possui um saldo inicial lançado.
                                    </div>
                                </div>

                                <!-- Tipo -->
                                <div class="col-md-6">
                                    <label for="tipo" class="form-label">Tipo <span class="text-danger">*</span></label>
                                    <select class="form-select" id="tipo" name="tipo" required>
                                        <option value="">Selecione o tipo</option>
                                        <option value="positivo" {{ old('tipo') == 'positivo' ? 'selected' : '' }}>Positivo (Entrada)</option>
                                        <option value="negativo" {{ old('tipo') == 'negativo' ? 'selected' : '' }}>Negativo (Saída)</option>
                                    </select>
                                    @error('tipo')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Valor -->
                                <div class="col-md-6">
                                    <label for="valor" class="form-label">Valor <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">R$</span>
                                        <input type="text" class="form-control mask-money" id="valor" name="valor" 
                                            value="{{ old('valor') }}" placeholder="0,00" required>
                                    </div>
                                    @error('valor')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Informações da Empresa -->
                            <div id="info-empresa" style="display: none;">
                                <hr class="my-4">
                                <h6 class="mb-3">Informações da Empresa</h6>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Fornecedor Vinculado</label>
                                        <div class="bg-body-secondary p-2 rounded">
                                            <span id="fornecedor-info" class="text-body">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Cliente Vinculado</label>
                                        <div class="bg-body-secondary p-2 rounded">
                                            <span id="cliente-info" class="text-body">-</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Alerta sobre o que vai acontecer -->
                            <div id="alerta-criacao" class="alert alert-info mt-4" style="display: none;">
                                <h6 class="alert-heading">
                                    <span class="fas fa-info-circle me-1"></span>O que vai acontecer?
                                </h6>
                                <p class="mb-0" id="texto-alerta-criacao"></p>
                            </div>

                            <!-- Botões -->
                            <div class="d-flex justify-content-end gap-2 mt-4">
                                <button type="submit" class="btn btn-primary" id="btn-salvar">
                                    <span class="fas fa-save me-1"></span>Criar Saldo Inicial
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Card de Informações -->
            <div class="col-12 col-xl-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <span class="fas fa-info-circle me-1"></span>Informações Importantes
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <h6 class="alert-heading">
                                <span class="fas fa-lightbulb me-1"></span>Como funciona?
                            </h6>
                            <p class="mb-2"><strong>Saldo Positivo:</strong> Será criada uma Conta a Receber automaticamente e já marcada como recebida.</p>
                            <p class="mb-2"><strong>Saldo Negativo:</strong> Será criada uma Conta a Pagar automaticamente e já marcada como paga.</p>
                            <hr>
                            <p class="mb-2 text-body-tertiary">
                                <span class="fas fa-exclamation-triangle me-1"></span>
                                Cada conta bancária pode ter apenas um saldo inicial.
                            </p>
                            <p class="mb-0 text-body-tertiary">
                                <span class="fas fa-eye me-1"></span>
                                Após criar, você será redirecionado para visualizar a conta gerada.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>

<script>
$(document).ready(function() {
    // Inicializar Select2
    $('.select2').select2({
        placeholder: 'Selecione uma opção',
        allowClear: true
    });

    // Inicializar Flatpickr para data
    flatpickr("#data", {
        dateFormat: "d/m/Y",
        locale: "pt",
        allowInput: true,
        onReady: function(selectedDates, dateStr, instance) {
            // Adiciona máscara e validação no input
            const input = instance.input;
            
            // Máscara para formato dd/mm/aaaa
            $(input).mask('00/00/0000', {
                placeholder: 'dd/mm/aaaa'
            });
            
            // Previne digitação de letras
            $(input).on('keypress', function(e) {
                // Permite apenas números, barra, backspace, delete, tab, escape, enter
                const allowedKeys = [8, 9, 27, 13, 46, 47]; // backspace, tab, escape, enter, delete, /
                const key = e.which;
                
                if (allowedKeys.indexOf(key) !== -1 || 
                    (key >= 48 && key <= 57) || // números 0-9
                    key === 47) { // barra /
                    return true;
                }
                
                e.preventDefault();
                return false;
            });
            
            // Previne colar texto inválido
            $(input).on('paste', function(e) {
                setTimeout(function() {
                    const value = input.value;
                    const dateRegex = /^\d{2}\/\d{2}\/\d{4}$/;
                    if (!dateRegex.test(value)) {
                        input.value = '';
                    }
                }, 1);
            });
        }
    });

    // Máscara para valor monetário
    $('.mask-money').mask('000.000.000.000.000,00', {
        reverse: true
    });

    // Quando empresa for selecionada
    $('#empresa_id').on('change', function() {
        const empresaId = $(this).val();
        
        if (empresaId) {
            // Buscar contas bancárias
            buscarContasBancarias(empresaId);
            // Buscar dados da empresa
            buscarDadosEmpresa(empresaId);
        } else {
            // Limpar campos dependentes
            $('#conta_bancaria_id').html('<option value="">Selecione primeiro uma empresa</option>').prop('disabled', true);
            $('#info-empresa').hide();
            $('#alerta-saldo-existente').hide();
            $('#alerta-criacao').hide();
        }
    });

    // Quando conta bancária for selecionada
    $('#conta_bancaria_id').on('change', function() {
        const contaBancariaId = $(this).val();
        
        if (contaBancariaId) {
            verificarSaldoInicial(contaBancariaId);
        } else {
            $('#alerta-saldo-existente').hide();
        }
        atualizarAlertaCriacao();
    });

    // Quando tipo for selecionado
    $('#tipo').on('change', function() {
        atualizarAlertaCriacao();
    });

    // Quando valor for alterado
    $('#valor').on('input', function() {
        atualizarAlertaCriacao();
    });

    function atualizarAlertaCriacao() {
        const tipo = $('#tipo').val();
        const valor = $('#valor').val();
        const contaBancaria = $('#conta_bancaria_id option:selected').text();
        
        if (tipo && valor && contaBancaria !== 'Selecione primeiro uma empresa' && contaBancaria !== 'Selecione uma conta bancária') {
            let texto = '';
            
            if (tipo === 'positivo') {
                texto = `Uma <strong>Conta a Receber</strong> de <strong>R$ ${valor}</strong> será criada automaticamente e já será marcada como <strong>recebida</strong>. Você será redirecionado para a listagem de Contas a Receber.`;
            } else {
                texto = `Uma <strong>Conta a Pagar</strong> de <strong>R$ ${valor}</strong> será criada automaticamente e já será marcada como <strong>paga</strong>. Você será redirecionado para a listagem de Contas a Pagar.`;
            }
            
            $('#texto-alerta-criacao').html(texto);
            $('#alerta-criacao').show();
        } else {
            $('#alerta-criacao').hide();
        }
    }

    function buscarContasBancarias(empresaId) {
        $.ajax({
            url: '{{ route("saldos-iniciais.contas-bancarias") }}',
            method: 'GET',
            data: { empresa_id: empresaId },
            success: function(response) {
                if (response.success) {
                    let options = '<option value="">Selecione uma conta bancária</option>';
                    
                    response.contas_bancarias.forEach(function(conta) {
                        options += `<option value="${conta.id}">${conta.banco} - ${conta.agencia}/${conta.conta_corrente}</option>`;
                    });
                    
                    $('#conta_bancaria_id').html(options).prop('disabled', false);
                } else {
                    $('#conta_bancaria_id').html('<option value="">Nenhuma conta encontrada</option>').prop('disabled', true);
                }
            },
            error: function() {
                $('#conta_bancaria_id').html('<option value="">Erro ao carregar contas</option>').prop('disabled', true);
            }
        });
    }

    function buscarDadosEmpresa(empresaId) {
        $.ajax({
            url: '{{ route("saldos-iniciais.dados-empresa") }}',
            method: 'GET',
            data: { empresa_id: empresaId },
            success: function(response) {
                if (response.success) {
                    const empresa = response.empresa;
                    
                    $('#fornecedor-info').text(empresa.fornecedor ? empresa.fornecedor.razao_social : 'Não vinculado');
                    $('#cliente-info').text(empresa.cliente ? empresa.cliente.razao_social : 'Não vinculado');
                    
                    $('#info-empresa').show();
                }
            },
            error: function() {
                console.log('Erro ao buscar dados da empresa');
            }
        });
    }

    function verificarSaldoInicial(contaBancariaId) {
        $.ajax({
            url: '{{ route("saldos-iniciais.verificar") }}',
            method: 'GET',
            data: { conta_bancaria_id: contaBancariaId },
            success: function(response) {
                if (response.success && response.tem_saldo_inicial) {
                    $('#alerta-saldo-existente').show();
                    $('#btn-salvar').prop('disabled', true);
                } else {
                    $('#alerta-saldo-existente').hide();
                    $('#btn-salvar').prop('disabled', false);
                }
            },
            error: function() {
                console.log('Erro ao verificar saldo inicial');
            }
        });
    }

    // Validação do formulário
    $('#form-saldo-inicial').on('submit', function(e) {
        const valor = $('#valor').val();
        
        if (!valor || valor === '0,00') {
            e.preventDefault();
            alert('Por favor, informe um valor válido.');
            return false;
        }

        if ($('#alerta-saldo-existente').is(':visible')) {
            e.preventDefault();
            alert('Esta conta bancária já possui um saldo inicial. Selecione outra conta.');
            return false;
        }
    });
});
</script>
@endpush