@php
    $titulo = 'BDT - saida';
@endphp
@include('components.head')
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> --}}
<style>
#kmToast {
    position: absolute;
    z-index: 1050; /* Garante que fique acima de outros elementos */
    left: 0; /* Centraliza o toast abaixo do input */
    width: 50%; /* Define largura como 50% do input */
    background-color: #faf254; /* Cor de fundo (cinza claro) */
    border: 1px solid #adb5bd; /* Borda cinza */
    border-radius: 5px; /* Deixa as bordas arredondadas */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Adiciona sombra para destaque */
    color: #212529; /* Texto escuro */
    font-size: 0.875rem; /* Tamanho da fonte menor */
}
#kmToast .toast-body {
    padding: 0.5rem 1rem; /* Ajusta o espaçamento interno */
}

</style>
 
<div class="container">
    @if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
 
    <form action="{{ route('bdt.saida.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <label for="">Seleção de Carro</label>
        <select class="custom-select" id="car_id" name="car_id" onchange="atualizarCor()">
            
            <option selected>SELECIONE SEU CARRO</option>
            
            @foreach ($carrosAtivos as $carro) 
                     <option value="{{ $carro->car_id}}"  data-modelo="{{ $carro->car_modelo }}" 
                        data-placa="{{ $carro->car_placa }}" data-cor="{{ $carro->car_avaria }}"  >{{ $carro->car_modelo }} - {{ $carro->car_placa }}

                     </option>
             @endforeach
        </select>
        
        <input hidden type="text" name="modelo_placa" class="form-control" readonly placeholder="Modelo e Placa do Carro">

      
        {{-- <script>
           
            const baseRoute = `{{ route('bdt.kilometragem', ['car_id' => '__CAR_ID__']) }}`;

            document.getElementById('car_id').addEventListener('change', function() {
                const carId = this.value; // Obtém o ID do carro selecionado
                if (carId !== "SELECIONE SEU CARRO") {
                    const routeWithCarId = baseRoute.replace('__CAR_ID__', encodeURIComponent(carId));

                    fetch(routeWithCarId)
                        .then(response => response.json())
                        .then(data => {
                            // const kmInput = document.querySelector('input[name="bdt_km_saida"]');
                            // if (data.km) {
                            //     kmInput.value = data.km;
                            // } else {
                            //     kmInput.value = ''; // Se não encontrar KM
                            // }
                            const kmInput = document.querySelector('input[name="bdt_km_saida"]');
                            const kmBanco = data.km || 0; // Quilometragem do banco ou 0 se não houver
                            kmInput.value = kmBanco;

                            // Adiciona um evento para validar a entrada
                            kmInput.addEventListener('input', function() {
                                if (parseInt(kmInput.value, 10) < kmBanco) {
                                    alert('O valor de quilometragem não pode ser menor que o atual: ' + kmBanco);
                                    kmInput.value = kmBanco; // Restaura o valor para o do banco
                                }
                            });
                        })
                        .catch(error => console.error('Erro ao buscar KM:', error));
                }
            });

        </script> --}}
          
       
        <div class="row">
            <div class="col-lg-6 mt-3">
                {{-- <div class="form-group">
                    <label for="bdt_destino">Cidade:</label>
                    <input class="form-control" id="bdt_destino" name="bdt_destino" type="text" required>
                </div> --}}
                <div class="form-group">
                <label for="bdt_cidade">Cidade:</label>
                <input class="form-control" id="bdt_cidade" name="bdt_cidade" type="text">
                @error('bdt_cidade')
                    <small class="text-danger">{{ $message }}</small>
                @enderror
                </div>
            </div>
            <div class="col-lg-6 mt-3">

                {{-- <div class="form-group">
                    <label for="bdt_destino">Empresa:</label>
                    <input class="form-control" id="bdt_destino" name="bdt_destino" type="text" required>
                </div> --}}
                <div class="form-group">
                    <label for="bdt_empresa">Empresa:</label>
                    <input class="form-control" id="bdt_empresa" name="bdt_empresa" type="text">
                    @error('bdt_empresa')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

            </div>
                
        </div>
       
       
        
        {{-- <div class="form-group">
            <label for="bdt_km_saida">KM de saída:</label>
            <input class="form-control" id="bdt_km_saida" name="bdt_km_saida" type="number" required  min="0">
        </div>
        <div class="toast-container position-fixed top-0 end-0 p-3">
            <div id="kmToast" class="toast align-items-center text-white bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        O valor inserido está abaixo do valor máximo registrado. Verifique antes de prosseguir.
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        </div> --}}
        <div class="form-group">
            <label for="bdt_km_saida">KM de saída:</label>
            <input class="form-control" id="bdt_km_saida" name="bdt_km_saida" type="number" required min="0">
            <!-- Toast para exibir mensagens -->
            <div class="toast mt-2 position-relative" id="kmToast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">Atenção</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    O valor inserido está abaixo do valor anterior registrado no sistema. Verifique.<br> Valor antigo: KM <span id="kmAntigoTexto">0</span>
  
                </div>
            </div>
        </div>
        
        <script>
            const baseRoute = `{{ route('bdt.kilometragem', ['car_id' => '__CAR_ID__']) }}`;

document.getElementById('car_id').addEventListener('change', function () {
    const carId = this.value; // Obtém o ID do carro selecionado
    if (carId !== "SELECIONE SEU CARRO") {
        const routeWithCarId = baseRoute.replace('__CAR_ID__', encodeURIComponent(carId));

        fetch(routeWithCarId)
            .then(response => response.json())
            .then(data => {
                const kmInput = document.querySelector('input[name="bdt_km_saida"]');
                const kmAntigoTexto = document.getElementById('kmAntigoTexto');
                
                const kmBanco = data.km || 0; // Quilometragem do banco ou 0 se não houver
                kmInput.value = kmBanco;
               
                kmInput.value = kmBanco;
                kmAntigoTexto.textContent = kmBanco;


                // const toastBody = document.querySelector('#kmToast .toast-body');
                // toastBody.textContent = `O valor inserido está abaixo do valor máximo registrado no sistema. Verifique. Valor antigo: ${kmBanco}`;

                // Adiciona um evento para validar a entrada
                kmInput.addEventListener('input', function () {
                    if (parseInt(kmInput.value, 10) < kmBanco) {
                        // Exibe o toast
                        // const toastElement = document.getElementById('kmToast');
                        // const toast = new bootstrap.Toast(toastElement);
                        // toast.show();
                        const toastElement = document.getElementById('kmToast');
    const toast = new bootstrap.Toast(toastElement, {
        autohide: false // O toast só será fechado manualmente
    });
    toast.show();
                    }
                });
            })
            .catch(error => console.error('Erro ao buscar KM:', error));
    }
});


        </script>
{{-- <script>
    const baseRoute = `{{ route('bdt.kilometragem', ['car_id' => '__CAR_ID__']) }}`;

    document.getElementById('car_id').addEventListener('change', function() {
        const carId = this.value; // Obtém o ID do carro selecionado
        if (carId !== "SELECIONE SEU CARRO") {
            const routeWithCarId = baseRoute.replace('__CAR_ID__', encodeURIComponent(carId));

            fetch(routeWithCarId)
                .then(response => response.json())
                .then(data => {
                    const kmInput = document.querySelector('input[name="bdt_km_saida"]');
                    const kmBanco = data.km || 0; // Quilometragem do banco ou 0 se não houver
                    kmInput.value = kmBanco;

                    // Atualiza o atributo data-km-maximo com o valor mais alto
                    kmInput.dataset.kmMaximo = kmBanco;

                    // Adiciona evento para verificar valor inserido
                    kmInput.addEventListener('blur', function() {
                        const kmDigitado = parseInt(kmInput.value, 10);
                        const kmMaximo = parseInt(kmInput.dataset.kmMaximo || 0, 10);

                        if (kmDigitado < kmMaximo) {
                            alert('O valor inserido está abaixo do valor máximo registrado: ' + kmMaximo + '. Verifique antes de prosseguir.');
                        }
                    });
                })
                .catch(error => console.error('Erro ao buscar KM:', error));
        }
    });
</script> --}}

        <button type="submit" class="btn btn-success mt-3 mb-5">Incluir BDT</button>
    </form>
</div>
@include('components.footer')
 
<script>
    document.getElementById('car_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    
    // Capturar modelo e placa do carro
    const modelo = selectedOption.getAttribute('data-modelo');
    const placa = selectedOption.getAttribute('data-placa');
    
    // Concatenar os valores (Exemplo: "Modelo - Placa")
    const modeloPlaca = `${modelo} - ${placa}`;

    // Salvar o valor concatenado em um campo oculto ou visível
    const inputModeloPlaca = document.querySelector('input[name="modelo_placa"]');
    if (inputModeloPlaca) {
        inputModeloPlaca.value = modeloPlaca; // Atualiza o valor do campo
    }
});

    function atualizarCor() {
        var select = document.getElementById("car_modelo");
        var corCarro = document.getElementById("car_placa");
        var corSelecionada = select.options[select.selectedIndex].getAttribute("data-cor");
        corCarro.textContent = "Lista de avarias: " + corSelecionada;
    }

    // function mostrarCampos() {
    //     var opcao = document.getElementById('bdt_avaria_saida');
    //     var camposExtras = document.getElementById('camposExtras');
    //     camposExtras.style.display = opcao.value === 'SIM' ? 'block' : 'none';
    // }
 
    

 
   
</script>