@extends('layouts.app')

@section('title', 'Adicionar Conta a Receber')

@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-receber.index') }}">Contas a Receber</a></li>
            <li class="breadcrumb-item active" aria-current="page">Adicionar Conta a Receber</li>
        </ol>
    </nav>

    @include('contas_a_receber.partials.form', [
        'action' => route('contas-a-receber.store'),
        'method' => null,
        'title' => 'Adicionar Conta a Receber',
        'subtitle' => 'Preencha os dados para cadastrar uma nova conta a receber.',
        'conta' => null,
        '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 */
    .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;
        display: flex !important;
        align-items: center !important;
    }

    /* Melhor aparência no hover */
    .select2-container--default .select2-selection--single:hover {
        border-color: #a9b1b8 !important;
    }

    /* Melhor aparência no foco */
    .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;
    }

    /* Texto dentro da seleção - AJUSTE CRÍTICO para alinhamento*/
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.5 !important;
        padding-left: 12px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 30px !important; /* Espaço para a seta */
        height: auto !important;
        color: #495057 !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        min-height: 36px !important;
    }

    /* Ajuste da seta */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        top: 1px !important;
        right: 5px !important;
    }

    /* 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 */
    }

    /* Opções no dropdown */
    .select2-results__option {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
    }

    /* 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;
    }

    /* Ajuste para campo de busca no dropdown */
    .select2-search--dropdown .select2-search__field {
        padding: 8px !important;
        border-radius: 4px !important;
    }

    /* Mensagem quando não há opções */
    .select2-results__message {
        padding: 12px !important;
        text-align: center !important;
        color: #6c757d !important;
    }

    /* Ajuste para múltiplos Select2 na mesma linha */
    .col-md-6 .select2-container {
        width: 100% !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="{{ asset('js/customs/contasAReceber.js') }}"></script>
<script>
$(document).ready(function() {
    // Inicializar todos os selects com Select2
    $('select.select2-basic, select[name="evento_id"], select[name="empresa_id"], select[name="contas_bancarias_id"], select[name="plano_de_conta_id"]').select2({
        width: '100%',
        placeholder: "Selecione uma opção",
        allowClear: true,
        // Ajuste para garantir que os campos fiquem bem formatados
        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
    function formatSelection(option) {
        if (!option.id) return option.text;
        return $("<span class='select-selection' title='" + option.text + "'>" + option.text + "</span>");
    }

    // Ajustes após inicialização
    setTimeout(function() {
        $('.select2-selection__rendered').each(function() {
            $(this).css('overflow', 'hidden');
        });
    }, 100);
});
</script>
@endpush