@php
$titulo = "Cadastro de viagem";
@endphp
@include('components.head')
    @if (session('msg_error') && session('msg_error') != '0' )
        <div class="alert alert-danger">{{ session('msg_error')}}</div>
        {{ session('msg_error')  }}
    @endif
    @if ($errors->has('des_imagem_arquivo'))
    <div class="alert alert-danger">
        {{ $errors->first('des_imagem_arquivo') }}
    </div>
    @endif
<div class="container">
    <h3>Cadastro de viagem </h3>
    
    <div class="mb-1"><a style="margin-left: 85%;" id="mostrarItens"><strong class="btn btn-primary">Adicionar pessoa</strong></a></div>
    <div class="mb-1"><a style="margin-left: 85%; display:none;" id="mostrarItens2"><strong class="btn btn-primary">Adicionar pessoa</strong></a></div>
    <div class="mb-1"><a style="margin-left: 85%; display:none;" id="mostrarItens3"><strong class="btn btn-primary">Adicionar pessoa</strong></a></div>

    <form id="viagemForm" action="{{ route('viagens.adiciona_viagem_post') }}" method="post">
        @csrf
        <div class="row">
            <div class="col-md-3">
                <select class="custom-select d-inline mr-2" id="col_id" name="col_id" required>
                    <option selected value="">SELECIONE O VIAJANTE</option>
                    @if (count($usuarios) == 0) 
                        <option>Sem usuarios cadastrados.</option>
                    @else 
                        @foreach ($usuarios as $usuario) 
                           
                            <option value="{{ $usuario['col_id'] }}">{{ $usuario['usu_nome'] }} {{ $usuario['usu_sobrenome'] }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-md-3">
                <div id="itensContainer" style="display: none;">
                    <select class="custom-select d-inline" name="col_id2">
                        <option selected value="">SELECIONE O VIAJANTE</option>
                        @if (count($usuarios) == 0) 
                            <option>Sem usuarios cadastrados.</option>
                        @else
                            @foreach ($usuarios as $usuario) 
                                <option value="{{ $usuario['col_id'] }}">{{ $usuario['usu_nome'] }} {{ $usuario['usu_sobrenome'] }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div id="itensContainer2" style="display: none;">
                    <select class="custom-select d-inline" name="col_id3">
                        <option selected value="">SELECIONE O VIAJANTE</option>
                        @if (count($usuarios) == 0) 
                            <option>Sem usuarios cadastrados.</option>
                        @else 
                            @foreach ($usuarios as $usuario) 
                                <option value="{{$usuario['col_id']}}">{{ $usuario['usu_nome'] }} {{$usuario['usu_sobrenome']}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div id="itensContainer3" style="display: none;">
                    <select class="custom-select d-inline" name="col_id4">
                        <option selected value="">SELECIONE O VIAJANTE</option>
                        @if (count($usuarios) == 0) 
                            <option>Sem usuarios cadastrados.</option>
                        @else
                            @foreach ($usuarios as $usuario)
                                <option value="{{ $usuario->col_id }}">{{ $usuario['usu_nome'] }} {{ $usuario['usu_sobrenome']}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-6 d-inline">
                <label for="via_centrocusto">Centro de custo:</label>
                <select class="custom-select" id="via_centrocusto" name="via_centrocusto" onchange="checkCustomCentroCusto(this)" required>
                    <option value="">Selecione o centro de custo</option>
                    <option value="Recursos Humanos">Recursos Humanos</option>
                    <option value="Financeiro">Financeiro</option>
                    <option value="Faturamento">Faturamento</option>
                    <option value="Treinamentos">Treinamentos</option>
                    <option value="Treinamentos - BPC">Treinamentos - BPC</option>
                    <option value="Comercial">Comercial</option>
                    <option value="Comercial / Contratos">Comercial / Contratos</option>
                    <option value="Higiene Ocupacional">Higiene Ocupacional</option>
                    <option value="Ergonomia">Ergonomia</option>
                    <option value="Medicina Ocupacional">Medicina Ocupacional</option>
                    <option value="Segurança do trabalho">Segurança do trabalho</option>
                    <option value="Engenharia">Engenharia</option>
                    <option value="Serviços Gerais">Serviços Gerais</option>
                    <option value="Manunteção Predial">Manunteção Predial</option>
                    <option value="Facilities">Facilities</option>
                    <option value="Marketing">Marketing</option>
                    <option value="Marketing / Campanha">Marketing / Campanha</option>
                    <option value="TI">TI</option>
                    <option value="Diretoria">Diretoria</option>
                    <option value="custom">Outro (especifique)</option>
                </select>
                <script>
                    function validarCentroCusto() {
                        const selectElement = document.getElementById('via_centrocusto');
                        if (selectElement.value === 'NULL') {
                            alert('Por favor, selecione um centro de custo válido.');
                            return false;  
                        }
                        return true;  
                    }
                    </script>
                <input class="form-control" type="text" id="customCentroCusto" name="custom_via_centrocusto" placeholder="Digite o centro de custo" style="display:none;" onblur="addCustomCentroCusto(this)" />
            </div>

            <div class="form-group col-6 d-inline">
                <label for="via_cartao">Número do cartão:</label>
                <select class="custom-select" id="via_cartao" name="via_cartao" onchange="checkCustomCartao(this)" required>
                    <option value="">Selecione o cartão</option>
                    @foreach ($cartoes as $cartao) : ?>
                        <option value="{{ $cartao->car_id }}"> {{$cartao->car_numero}} - {{ $cartao->car_dono}} </option>
                    @endforeach
                    {{-- <option value="custom">Outro (especifique)</option> --}}
                </select>
                
                <input class="form-control" type="text" id="customCartao" name="custom_via_cartao" placeholder="Digite o cartão" style="display:none;" onblur="addCustomCartao(this)" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-4 d-inline">
                <label for="via_recebimentocartao">Data de início da viagem:</label>
                <input class="form-control" name="via_recebimentocartao" type="date" required>
            </div>

            <div class="form-group col-4 d-inline">
                <label for="via_cidade">Cidade de destino:</label>
                <input class="form-control" name="via_cidade" type="text" required>
            </div>

            <div class="form-group col-4 d-inline">
                <label for="via_empresa">Empresa de destino:</label>
                <input class="form-control" name="via_empresa" type="text" required>
            </div>
        </div>
        <hr style="color: #333; background-color: #333; height: 2px; border: none;">

        <!--BOTÕES-->
        <div class="col-12 text-center">
            <a href='{{ $voltar }}' class="btn btn-danger md-sm-4 mr-5">Cancelar</a>
            <button type="submit" id="btnEnviar" class="btn btn-success md-sm-4 ml-5">Incluir viagem</button>
        </div>
    </form>
</div>
<div class="modal fade" id="modalAguarde" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content align-items-center text-center p-4">
      <strong>Processando a viagem...</strong>
      <strong class="text-danger">Não atualize ou recarregue a página para que não perca seus dados</strong>
      <div class="spinner-border text-primary mt-3" role="status"></div>
    </div>
  </div>
</div>

<script>
    document.getElementById('viagemForm').addEventListener('submit', function(e) {
    $('#modalAguarde').modal('show'); // requer jQuery + Bootstrap
    this.querySelector('button[type="submit"]').disabled = true;
});
 
</script>

<script>
    // function validarCartao() {
    //     const selectElement = document.getElementById('via_cartao');
    //     if (selectElement.value === 'NULL') {
    //         alert('Por favor, selecione um centro de custo válido.');
    //         return false;  
    //     }
    //     return true;  
    // }
    
    $(document).ready(function() {
        $("#mostrarItens").click(function() {
            $("#itensContainer").slideToggle();
            $("#mostrarItens2").slideToggle();
            $("#mostrarItens").slideToggle();
        });
    });

    $(document).ready(function() {
        $("#mostrarItens2").click(function() {
            $("#itensContainer2").slideToggle();
            $("#mostrarItens3").slideToggle();
            $("#mostrarItens2").slideToggle();
        });
    });

    $(document).ready(function() {
        $("#mostrarItens3").click(function() {
            $("#itensContainer3").slideToggle();
            $("#mostrarItens3").slideToggle();
        });
    });

    function checkCustomCentroCusto(select) {
        var customOption = select.options[select.selectedIndex].value;
        if (customOption === 'custom') {
            select.style.display = 'none';
            document.getElementById('customCentroCusto').style.display = '';
            document.getElementById('customCentroCusto').focus();
        }
    }

    function addCustomCentroCusto(input) {
        var newValue = input.value.trim();
        if (newValue) {
            var select = document.getElementById('via_centrocusto');
            var newOption = new Option(newValue, newValue);
            select.options.add(newOption, select.options.length - 1);
            select.value = newValue;
            input.style.display = 'none';
            select.style.display = '';
        }
    }

    function checkCustomCartao(select) {
        var customOption = select.options[select.selectedIndex].value;
        if (customOption === 'custom') {
            select.style.display = 'none';
            document.getElementById('customCartao').style.display = '';
            document.getElementById('customCartao').focus(); 
        }
    }

    function addCustomCartao(input) {
        var newValue = input.value.trim();
        if (newValue) {
            var select = document.getElementById('via_cartao');
            var newOption = new Option(newValue, newValue);
            select.options.add(newOption, select.options.length - 1);
            select.value = newValue;
            input.style.display = 'none';
            select.style.display = '';
        }
    }
</script>

@include('components.footer')