@extends('layouts.app')

@section('title', 'Nova Solicitação')

@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('solicitacoes.index') }}">Solicitações</a></li>
            <li class="breadcrumb-item active" aria-current="page">Nova Solicitação</li>
        </ol>
    </nav>

    @include('solicitacoes.partials.form', [
        'action' => route('solicitacoes.store'),
        'method' => null,
        'title' => 'Nova Solicitação',
        'subtitle' => 'Preencha os dados para criar uma nova solicitação.',
        'solicitacao' => null,
        'usuarios' => $usuarios,
    ])
</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;
    }
</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>
$(document).ready(function() {
    // Inicializar Select2 no campo de responsável
    $('#atender_a_id').select2({
        placeholder: "Selecione um usuário",
        allowClear: false,
        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>");
    }
    
    // Trigger um evento change para atualizar a UI dos selects
    setTimeout(function() {
        $('.select2-hidden-accessible').trigger('change');
    }, 100);

    // Máscara de valor monetário
    $('#valor').mask('#.##0,00', {
        reverse: true,
        translation: {
            '#': {pattern: /[0-9]/}
        }
    });
});
</script>
@endpush