@extends('layouts.app')

@section('title', 'Editar Empresa')
@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('empresas.index') }}">Empresas</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Empresa</li>
        </ol>
    </nav>

    @include('empresas.partials.form', [
        'action' => route('empresas.update', $empresa->id),
        'method' => 'PUT',
        'title' => 'Editar Empresa',
        'subtitle' => 'Atualize os dados da empresa.',
        'empresa' => $empresa,
        'filters' => $filters ?? [],
    ])
</div>
@endsection

@push('styles-custom')
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
<style>
    /* Estilos aprimorados para o Select2 */
    .select2-container {
        width: 100% !important;
    }
    
    /* Container principal melhorado - AJUSTE DE COR */
    .select2-container--default .select2-selection--single {
        height: 38px !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
        background-color: #fff !important; /* Mesma cor de fundo dos inputs padrão */
    }
    
    /* CORREÇÃO DO ALINHAMENTO - Ajustes importantes */
    .select2-container--default .select2-selection--single {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Texto dentro da seleção - Melhor alinhamento vertical E COR */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #495057 !important; /* Garantindo a mesma cor de texto dos inputs padrão */
        padding-left: 12px !important;
        padding-right: 30px !important;
        line-height: 36px !important; /* Este valor é crítico para o alinhamento vertical */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background-color: transparent !important; /* Garantir que o background seja transparente */
    }
    
    /* Melhor aparência no hover - COR CONSISTENTE */
    .select2-container--default .select2-selection--single:hover {
        border-color: #a9b1b8 !important;
        background-color: #fff !important; /* Manter cor de fundo consistente no hover */
    }
    
    /* Melhor aparência no foco - COR CONSISTENTE */
    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #80bdff !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        background-color: #fff !important; /* Manter cor de fundo consistente no foco */
    }
    
    /* Ajuste da seta */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        width: 30px !important;
        right: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: transparent !important; /* Garantir que a área da seta seja transparente */
    }
    
    /* Ajuste da seta (b) */
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #888 transparent transparent transparent !important; /* Cor da seta consistente */
    }
    
    /* Estilo do dropdown */
    .select2-dropdown {
        border-color: #80bdff !important;
        border-radius: 0 0 0.25rem 0.25rem !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
        z-index: 1060 !important; /* Aparecer acima de outros elementos */
        background-color: #fff !important; /* Cor de fundo do dropdown */
    }
    
    /* Opções no dropdown */
    .select2-results__option {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
        color: #495057 !important; /* Cor do texto nas opções */
        background-color: #fff !important; /* Cor de fundo das opções */
    }
    
    /* Opção em hover */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff !important;
        color: white !important;
    }
    
    /* Ajuste para o placeholder */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #6c757d !important; /* Mesma cor do placeholder dos inputs padrão */
    }
    
    /* Ajuste para campo de busca no dropdown */
    .select2-search--dropdown .select2-search__field {
        padding: 8px !important;
        border-radius: 4px !important;
        border: 1px solid #ced4da !important; /* Mesma cor de borda dos inputs padrão */
        color: #495057 !important; /* Mesma cor de texto dos inputs padrão */
    }
    
    /* Ajustes para a exibição do texto selecionado */
    .select2-selection__clear {
        margin-right: 10px !important;
        color: #6c757d !important; /* Cor do X para limpar seleção */
    }
    
    .select-selection {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #495057 !important; /* Mesma cor de texto dos inputs padrão */
    }
    
    /* Para campos desabilitados */
    select:disabled {
        background-color: #e9ecef !important; /* Mesma cor de fundo dos inputs desabilitados */
        opacity: 1;
    }
    
    .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: #e9ecef !important; /* Mesma cor de fundo dos inputs desabilitados */
        opacity: 1;
    }
</style>
@endpush

@push('scripts-custom')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('js/customs/empresas.js') }}"></script>
<script>
$(document).ready(function() {
    console.log('Inicializando Select2 (edição)...');
    
    // Função para formatar as opções no dropdown
    function formatResult(option) {
        if (!option.id) return option.text;
        return $("<span class='select-option'>" + option.text + "</span>");
    }
    
    // Função para formatar a opção selecionada - com title para mostrar texto completo em hover
    function formatSelection(option) {
        if (!option.id) return option.text;
        return $("<span class='select-selection' title='" + option.text + "'>" + option.text + "</span>");
    }
    
    // Inicializar Select2 nos campos específicos de seleção (excluindo o tipo_display na edição)
    $('#fornecedor_id, #cliente_id, #estado').select2({
        placeholder: "Selecione uma opção",
        allowClear: true,
        width: '100%',
        templateResult: formatResult,
        templateSelection: formatSelection
    });
    
    // Inicializar Select2 apenas para o campo 'tipo' em modo de criação (não para tipo_display)
    if ($('#tipo').attr('name') === 'tipo' && !$('#tipo').prop('disabled')) {
        console.log('Inicializando Select2 no campo tipo (edição)...');
        $('#tipo').select2({
            placeholder: "Selecione um tipo",
            allowClear: true,
            width: '100%',
            minimumResultsForSearch: Infinity // Desabilita a caixa de pesquisa para este campo
        });
        
        // Após inicializar o Select2, forçar aplicação das máscaras
        setTimeout(function() {
            console.log('Forçando aplicação de máscaras após Select2 (edição)...');
            if (window.atualizarMascaraDocumento) {
                window.atualizarMascaraDocumento();
            }
        }, 500);
    }
    
    // Trigger um evento change para atualizar a UI dos selects
    setTimeout(function() {
        $('.select2-hidden-accessible').trigger('change');
    }, 100);
});
</script>

<script>
$(document).ready(function() {
    // Função para criar overlay instantâneo
    function forceFullOverlay(message = 'Carregando...') {
        // Remover qualquer overlay existente
        $('#emergency-overlay').remove();
        
        // Criar overlay emergencial
        const overlay = $(`
            <div id="emergency-overlay" style="
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                background: #ffffff !important;
                z-index: 99999999 !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                flex-direction: column !important;
                font-family: inherit !important;
            ">
                <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;">
                    <span class="visually-hidden">Carregando...</span>
                </div>
                <h5 class="text-primary">${message}</h5>
            </div>
        `);
        
        // Forçar adição ao body
        $('body').css('overflow', 'hidden').append(overlay);
        
        return overlay;
    }
    
    // Submit com overlay IMEDIATO
    $('#empresaForm').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        
        // Overlay IMEDIATO - antes de qualquer coisa
        const overlay = forceFullOverlay('Salvando alterações...');
        
        // Pequeno delay para garantir que o overlay apareça
        setTimeout(() => {
            const formData = new FormData(this);
            
            $.post({
                url: $(this).attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
            .done(function(response) {
                if (response.success && response.redirect) {
                    overlay.find('h5').text('Redirecionando...');
                    setTimeout(() => window.location.replace(response.redirect), 200);
                } else {
                    overlay.remove();
                    $('body').css('overflow', 'auto');
                    alert('Erro: ' + (response.message || 'Erro desconhecido'));
                }
            })
            .fail(function(xhr) {
                overlay.remove();
                $('body').css('overflow', 'auto');
                alert('Erro no servidor');
            });
        }, 50);
    });
    
    // Cancelar com overlay
    $('.btn-phoenix-secondary, .btn-secondary').on('click', function(e) {
        e.preventDefault();
        
        const overlay = forceFullOverlay('Cancelando...');
        
        // URL de retorno
        const currentUrl = new URL(window.location);
        const params = new URLSearchParams();
        ['search_field', 'q', 'search_field2', 'q2'].forEach(param => {
            const value = currentUrl.searchParams.get(param);
            if (value) params.set(param, value);
        });
        
        let returnUrl = '{{ route("empresas.index") }}';
        if (params.toString()) returnUrl += '?' + params.toString();
        
        setTimeout(() => window.location.replace(returnUrl), 300);
    });
});
</script>
@endpush