@extends('layouts.app')

@section('title', 'Editar 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', $filters ?? []) }}">Clientes</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Editar Cliente</li>
        </ol>
    </nav>

    @include('clientes.partials.form', [
        'action' => route('clientes.update', $cliente->id),
        'method' => 'PUT',
        'title' => 'Editar Cliente',
        'subtitle' => 'Atualize os dados do cliente.',
        'cliente' => $cliente,
        '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 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('vendors/select2/js/select2.full.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 (se não estiver desabilitado)
    if (!$('#tipo').prop('disabled')) {
        $('#tipo').select2({
            placeholder: "Selecione o tipo",
            allowClear: false,
            width: '100%',
            language: {
                noResults: function() {
                    return "Nenhum tipo encontrado";
                }
            }
        });
    }
});
</script>
@endpush