@extends('layouts.app')

@section('title', 'Adicionar Conta Bancária')

@push('styles-custom')
<link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/select2/css/select2-bootstrap4.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contas-bancarias.index') }}">Contas Bancárias</a></li>
            <li class="breadcrumb-item active" aria-current="page">Adicionar Conta Bancária</li>
        </ol>
    </nav>

    @include('contas_bancarias.partials.form', [
        'action' => route('contas-bancarias.store'),
        'method' => null,
        'title' => 'Adicionar Conta Bancária',
        'conta' => null,
    ])
</div>
@endsection

@push('styles-custom')
<link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/select2/css/select2-bootstrap4.min.css') }}" rel="stylesheet" />
<style>
    /* Ajustes simples para o Select2 */
    .select2-container {
        width: 100% !important;
    }
    
    /* Ajuste para o texto dentro do select */
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
@endpush

@push('styles-custom')
<link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/select2/css/select2-bootstrap4.min.css') }}" rel="stylesheet" />
<style>
    /* Melhorias visuais para o Select2 */
    .select2-container {
        width: 100% !important;
    }
    
    /* Ajuste da altura e aparência do campo select2 */
    .select2-container .select2-selection--single,
    .select2-container--bootstrap4 .select2-selection {
        height: calc(1.5em + 0.75rem + 2px) !important; /* Mesma altura dos inputs padrão */
        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;
    }
    
    /* Melhor alinhamento vertical */
    .select2-container--bootstrap4 .select2-selection--single {
        padding: 0.375rem 0.75rem !important;
    }
    
    /* Estiliza o texto dentro do select */
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        color: #495057 !important;
        line-height: 1.5 !important;
        padding-left: 0 !important;
        padding-right: 20px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Ajusta a seta dropdown */
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + 0.75rem) !important;
        position: absolute !important;
        top: 1px !important;
        right: 2px !important;
        width: 25px !important;
    }
</style>
@endpush

@push('scripts-custom')
<script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
<script>
$(document).ready(function() {
    // Inicializa Select2 diretamente no #empresa_id
    $('#empresa_id').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Selecione uma empresa'
    });
});
</script>
@endpush