@extends('layouts.app')

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

@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('clientes.index') }}">Clientes</a></li>
            <li class="breadcrumb-item active" aria-current="page">Adicionar Cliente</li>
        </ol>
    </nav>

    @include('clientes.partials.form', [
        'action' => route('clientes.store'),
        'method' => null,
        'title' => 'Adicionar Cliente',
        'subtitle' => 'Preencha os dados para cadastrar um novo cliente.',
        'cliente' => 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 específicos e otimizados para resolver o problema de alinhamento */
    .select2-container {
        width: 100% !important;
    }
    
    .select2-container--default .select2-selection--single {
        height: 38px !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
        display: flex !important;
        align-items: center !important;
        background-color: #fff !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #495057 !important;
        padding-left: 12px !important;
        padding-right: 30px !important;
        line-height: 36px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .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;
    }
    
    .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;
    }
    
    .select2-results__option {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
        color: #495057 !important;
    }
    
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #007bff !important;
        color: white !important;
    }
</style>
@endpush

@push('scripts-custom')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('js/customs/clientes.js') }}"></script>
<script>
$(document).ready(function() {
    // Inicializar Select2 no select de estado
    $('#estado').select2({
        placeholder: "Selecione um estado",
        allowClear: true,
        width: '100%',
        language: {
            noResults: function() {
                return "Nenhum estado encontrado";
            }
        }
    });

    // Inicializar Select2 no select de tipo
    $('#tipo').select2({
        placeholder: "Selecione o tipo",
        allowClear: false,
        width: '100%',
        language: {
            noResults: function() {
                return "Nenhum tipo encontrado";
            }
        }
    }).on('select2:select', function(e) {
        console.log('Select2 tipo changed:', e.params.data.id);
        // Trigger manual do evento change para o JavaScript customizado
        this.dispatchEvent(new Event('change', { bubbles: true }));
    });
    
    // Força a atualização da máscara após inicialização completa
    setTimeout(function() {
        $('#tipo').trigger('change');
    }, 100);
});
</script>
@endpush