@extends('layouts.app')

@section('title', 'Adicionar Fornecedor')

@section('content')
<div class="content pt-3">
    <x-alert />
    
    <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('fornecedores.index') }}">Fornecedores</a></li>
            <li class="breadcrumb-item active" aria-current="page">Adicionar Fornecedor</li>
        </ol>
    </nav>

    @include('fornecedores.partials.form', [
        'action' => route('fornecedores.store'),
        'method' => null,
        'title' => 'Adicionar Fornecedor',
        'subtitle' => 'Preencha os dados para cadastrar um novo fornecedor.',
        'fornecedor' => null,
    ])
</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;
    }

    /* Select2 Compacto - Planos de Contas - MENOR QUE ANTES */
    .select2-container--default .select2-selection--multiple {
        min-height: 30px !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        background-color: #fff !important;
        padding: 1px 4px !important;
    }

    /* Foco */
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #80bdff !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    }

    /* Tags selecionadas - ainda menores */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff !important;
        border: 1px solid #007bff !important;
        color: white !important;
        border-radius: 3px !important;
        padding: 0px 4px !important;
        margin: 1px 1px !important;
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        height: 18px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Botão remover - menor */
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: rgba(255, 255, 255, 0.8) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
        margin-right: 3px !important;
        padding-right: 3px !important;
        font-size: 10px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: white !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    /* Campo de busca interno */
    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        border: none !important;
        outline: none !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        height: 20px !important;
        min-width: 100px !important;
    }

    /* Dropdown - mais compacto */
    .select2-dropdown {
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
        z-index: 1060 !important;
    }

    /* Campo de busca no dropdown */
    .select2-dropdown .select2-search {
        padding: 6px !important;
    }

    .select2-dropdown .select2-search .select2-search__field {
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        padding: 4px 8px !important;
        font-size: 0.8125rem !important;
    }

    /* Opções do dropdown */
    .select2-results__option {
        padding: 6px 10px !important;
        font-size: 0.8125rem !important;
        line-height: 1.3 !important;
    }

    /* Hover */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff !important;
        color: white !important;
    }

    /* Placeholder */
    .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
        color: #6c757d !important;
        font-size: 0.75rem !important;
        margin: 2px 4px !important;
    }

    /* Badge nos resultados - menor */
    .select2-results .badge-phoenix-primary,
    .select2-results .bg-primary {
        font-size: 0.6rem !important;
        padding: 1px 3px !important;
    }
</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="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="{{ asset('js/customs/fornecedores.js') }}"></script>
<script>
$(document).ready(function() {
    // Inicializar Select2 no campo de estado
    $('#estado').select2({
        placeholder: "Selecione uma opção",
        allowClear: true,
        width: '100%',
        templateResult: formatResult,
        templateSelection: formatSelection
    });
    
    // 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 para planos de contas - IGUAL AO SELECT DE ESTADOS
    $('.select2-planos-contas').select2({
        placeholder: "Busque por código ou descrição...",
        allowClear: true,
        width: '100%',
        minimumInputLength: 0,
        ajax: {
            url: '{{ route("fornecedores.search-planos-contas") }}',
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    q: params.term || '',
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.results || [],
                    pagination: {
                        more: (data.pagination && data.pagination.more) || false
                    }
                };
            },
            cache: true
        },
        templateResult: formatPlanoResult,
        templateSelection: formatPlanoSelection,
        escapeMarkup: function (markup) { return markup; }
    });
    
    function formatPlanoResult(plano) {
        if (plano.loading) {
            return $('<div class="d-flex align-items-center"><div class="spinner-border spinner-border-sm me-2" role="status"></div>Carregando...</div>');
        }
        
        if (!plano.id) return plano.text;
        
        var $result = $(
            '<div class="d-flex align-items-center py-1">' +
                '<div class="flex-grow-1">' +
                    '<div class="fw-semibold text-body-emphasis">' +
                        '<span class="badge badge-phoenix badge-phoenix-primary me-2">#' + (plano.codigo || '') + '</span>' +
                        (plano.descricao || plano.text) +
                    '</div>' +
                '</div>' +
            '</div>'
        );
        
        return $result;
    }
    
    function formatPlanoSelection(plano) {
        if (!plano.id) return plano.text;
        
        if (plano.codigo && plano.descricao) {
            return '#' + plano.codigo + ' - ' + plano.descricao;
        }
        return plano.text;
    }

    // Trigger um evento change para atualizar a UI dos selects
    setTimeout(function() {
        $('.select2-hidden-accessible').trigger('change');
    }, 100);
});
</script>
@endpush