@extends('usuarios.funcionarios.master.layout2')

@section('conteudo')

    <div class="container">
      {{-- <h1>bs-stepper</h1> --}}
      <div class="row">
        <div class="col-md-12 mt-5">
          <h2><i class="fa fa-user-plus"></i> Novo Funcionário Gestdoc</h2>
          <div id="stepper1" class="bs-stepper">
            <div class="bs-stepper-header">
              <div class="step" data-target="#test-l-1">
                <button type="button" class="btn step-trigger">
                  <span class="bs-stepper-circle">1</span>
                  <span class="bs-stepper-label">Dados gerais</span>
                </button>
              </div>
              <div class="line"></div>
              <div class="step" data-target="#test-l-2">
                <button type="button" class="btn step-trigger">
                  <span class="bs-stepper-circle">2</span>
                  <span class="bs-stepper-label">Contactos</span>
                </button>
              </div>
              <div class="line"></div>
              <div class="step" data-target="#test-l-3">
                <button type="button" class="btn step-trigger">
                  <span class="bs-stepper-circle">3</span>
                  <span class="bs-stepper-label">Dados finais</span>
                </button>
              </div>
            </div>
            <form class="row g-3 validate needs-validation" novalidate validate>

                <div class="bs-stepper-content">
                    <div id="test-l-1" class="content">


                        <div class="col-md-6 position-relative">
                          <label for="validationTooltip01" class="form-label">Nome</label>
                          <input type="text" class="form-control txtNome" id="validationTooltip01" placeholder="Nome" required>
                          <div class="valid-tooltip">
                            Boa!
                          </div>
                          <div class="invalid-tooltip">
                            Informe o primeiro nome.
                          </div>
                        </div>
                        <div class="col-md-6 position-relative">
                          <label for="validationTooltip02" class="form-label">Sobrenome</label>
                          <input type="text" class="form-control txtSobrenome" id="validationTooltip02" placeholder="Sobrenome" required>
                          <div class="valid-tooltip">
                            Boa!
                          </div>
                          <div class="invalid-tooltip">
                            Informe o último nome.
                          </div>
                        </div>
                        <div class="col-md-12 position-relative">
                            <br>
                            <br>
                          <label for="validationTooltip03" class="form-label">Email</label>
                          <input type="email" class="form-control txtEmail" placeholder="Email" id="validationTooltip03" required>
                          <div class="invalid-tooltip">
                            Informe um email correcto.
                          </div>
                          <div class="valid-tooltip">
                            Boa!
                          </div>
                        </div>


                    <br><br><br><br><br><br><br><br><br><br>
                    <button class="btn btn-sm btn-info m-3 btnShowMobile" onclick="">Proximo <i class="fa fa-angle-right"></i></button>
                </div>
                <div id="test-l-2" class="content">
                     <nav class="row justify-content-center">
                         <br><br><br>
                        <div class="col-md-6 p-4 position-relative">
                            <label for="validationTooltip02" class="form-label ">Telemóvel</label>
                            <input type="number" class="form-control txtTelefone" id="validationTooltip02" placeholder="Telemóvel" required>
                            <div class="valid-tooltip">
                              Boa!
                            </div>
                            <div class="invalid-tooltip">
                              Informe o Telemóvel.
                            </div>
                          </div>
                     </nav>
                    <br><br><br><br><br><br><br><br><br><br>

                    <button class="btn btn-sm btn-secondary " onclick="stepper1.previous()"><i class="fa fa-angle-left"></i> Anterior</button>
                    <button class="btn btn-sm btn-info btnShowEndData " onclick="">Proximo <i class="fa fa-angle-right"></i></button>
                </div>
                <div id="test-l-3" class="content">
                    <nav class="row justify-content-center">
                        <br><br><br>
                         <div class="col-md-6 p-4 position-relative">
                           <label for="validationTooltip02" class="form-label">Nmec</label>
                           <input type="number" class="form-control nmec" id="validationTooltip02" placeholder="Nmec" required>
                           <div class="valid-tooltip">
                             Boa!
                           </div>
                           <div class="invalid-tooltip">
                             Informe o Telemóvel.
                           </div>
                         </div>
                    </nav>
                    <nav class="row justify-content-center">
                        <br><br><br>
                         <div class="col-md-6 p-4 text-end position-relative">


                           <nav class="d-none ">
                                {{$sectores=\App\Models\Sector::where('id','>',1)->get()}}
                                {{$categorias=\App\Models\Categoria::where('id','>',2)->distinct()->orderby('categoria','ASC')->get()}}
                           </nav>
                           <label for="validationTooltip02" class="form-label">SECTOR</label>  <br>
                           <select id="Sector" class="position-relative w-100 bg-dark" style="width:200px;" >
                             @foreach($sectores as $sector)
                                 <option value="{{$sector->id}}"> {{Str::upper( $sector->sector)}}</option>
                             @endforeach

                          </select>
                         </div>

                         <div class="col-md-6 p-4 position-relative">
                           <label for="validationTooltip02" class="form-label">CATEGORIA</label> <br>
                           <select id="Categoria"  class="position-relative w-100 bg-dark" style="width:200px;" >
                            @foreach($categorias as $categoria)
                                 <option value="{{$categoria->id}}">{{Str::upper( $categoria->categoria)}}</option>
                             @endforeach

                          </select>
                         </div>
                    </nav>
                        <hr>
                      <nav class="row justify-content-center">
                        <br><br><br>
                         <div class="col-md-3 p-4 text-end position-relative">
{{--
                            <div class="input-group rounded mb-3 bg-light border-secondary border h-25 shadow-sm" >
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>
                                <br><br><br>

                            </div>
                            <div class="input-group mb-3">
                                <label class="input-group-text" for="inputGroupFile01">Foto</label>
                                <input type="file" placeholder="Escolha a foto" class="form-control rounded" id="inputGroupFile01">
                            </div> --}}

                        </nav>

                    <button class="btn btn-sm btn-secondary" onclick="stepper1.previous()"><i class="fa fa-angle-left"></i> Anterior</button>
                    <button class="btn btn-sm btn-success btnFinalizar" onclick="stepper1.next()">Finalizar <i class="fa fa-angle-right"></i></button>
                </div>
            </form>
        </div>
          </div>
        </div>

      </div>
    </div>
    <script src="dist/js/bs-stepper.js"></script>
    <script>
      var stepper1Node = document.querySelector('#stepper1')
      var stepper1 = new Stepper(document.querySelector('#stepper1'))

    //   stepper1Node.addEventListener('show.bs-stepper', function (event) {
    //     console.warn('show.bs-stepper', event)
    //   })
    //   stepper1Node.addEventListener('shown.bs-stepper', function (event) {
    //     console.warn('shown.bs-stepper', event)
    //   })

    //   var stepper2 = new Stepper(document.querySelector('#stepper2'), {
    //     linear: false,
    //     animation: true
    //   })
    //   var stepper3 = new Stepper(document.querySelector('#stepper3'), {
    //     animation: true
    //   })
    //   var stepper4 = new Stepper(document.querySelector('#stepper4'))


      $(function(){
            $("form").submit(function(e){
                e.preventDefault();

            });
            $(".btnShowMobile").click(function(){

                if (verifica1()==1){
                    stepper1.next()

                }else{
                    if (verifica1()==0){
                        $.confirm({
                        title: 'Um erro aconteceu!',
                        content: 'Preencha o campo de nome',
                        type: 'red',
                        typeAnimated: true,
                        closeIcon: true,
                        buttons: {
                            tryAgain: {
                                text: 'Tente novamente',
                                btnClass: 'btn-red',
                                action: function(){
                                }
                            },

                        }
                    });
                        $(".txtNome").focus();
                    }
                    else if (verifica1()==-1){
                        $.confirm({
                        title: 'Um erro aconteceu!',
                        content: 'Preencha o campo de sobrenome',
                        type: 'red',
                        typeAnimated: true,
                        closeIcon: true,
                        buttons: {
                            tryAgain: {
                                text: 'Tente novamente',
                                btnClass: 'btn-red',
                                action: function(){
                                }
                            },

                        }
                    });
                        $(".txtSobrenome").focus();

                    }else{
                        $.confirm({
                        title: 'Um erro aconteceu!',
                        content: 'Preencha o campo de email',
                        type: 'red',
                        typeAnimated: true,
                        closeIcon: true,
                        buttons: {
                            tryAgain: {
                                text: 'Tente novamente',
                                btnClass: 'btn-red',
                                action: function(){
                                }
                            },

                        }
                    });
                        $(".txtEmail").focus();

                    }
                }



            });
            $(".btnShowEndData").click(function(){

                if (verifica2()==1){
                    stepper1.next()

                }else{
                    $(".txtTelefone").focus();
                    $.confirm({
                        title: 'Um erro aconteceu!',
                        content: 'Preencha o campo de telefone',
                        type: 'red',
                        typeAnimated: true,
                        closeIcon: true,
                        buttons: {
                            tryAgain: {
                                text: 'Tente novamente',
                                btnClass: 'btn-red',
                                action: function(){
                                }
                            },

                        }
                    });

                }



            });
            $('.btnFinalizar').click(function(){
                var txtNome =$(".txtNome").val();
                var txtSobrenome =$(".txtSobrenome").val();
                var txtEmail =$(".txtEmail").val();
                var txtTelefone =$(".txtTelefone").val();
                var Sector =$("#Sector").val();
                var Categoria =$("#Categoria").val();
                var nmec =$(".nmec").val();


                if (verifica3()==1){

                    $.post( "{{ route('us.admin.funcionario.add') }}", { '_token':'{{ csrf_token() }}' , 'nome':txtNome,'sobrenome':txtSobrenome,'email':txtEmail, 'telemovel':txtTelefone,'sector':Sector, 'categoria':Categoria, 'nmec':nmec})
                    .done(function( data ) {
                         if(data){
                            //  alert("Funcionário cadastrado com sucesso!")
                            window.location.replace("{{ route('us.admin.funcionario.pesquisar') }}");
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            })

                            Toast.fire({
                                icon: 'success',
                                title: 'Funcionário cadastrado com sucesso!'
                            })
                         }
                    }).fail(function(){
                        alert("Infelizmente não conseguimos inserir os dados, verifique se inseriu algum dado redundante na base de dados.")
                    });
                }else{
                    if (verificacao()==0){
                        stepper1.previous()
                        stepper1.previous()
                    }
                    else if (verificacao()==-1){
                        stepper1.previous()
                    }
                }
            })


            function verifica1(){
                var txtNome =$(".txtNome").val();
                var txtSobrenome =$(".txtSobrenome").val();
                var txtEmail =$(".txtEmail").val();

                if(txtNome.length===0)
                    return 0;
                else if (txtSobrenome.length===0 )
                    return -1
                else if (txtEmail.length===0)
                    return -2
                else
                    return 1;
            }

            function verifica2(){
                var txtTelefone =$(".txtTelefone").val();

                // if(txtTelefone===0)
                //     return 0;
                // else
                    return 1;
            }
            function verifica3(){
                // var txtNome =$(".txtNome").val();
                // var txtSobrenome =$(".txtSobrenome").val();
                // var txtEmail =$(".txtEmail").val();

                // if(txtNome.length===0)
                //     return 0;
                // else if (txtSobrenome.length===0 )
                //     return -1
                // else if (txtEmail.length===0)
                //     return -2
                // else
                    return 1;
            }


               // Initialize select2
               $("#Sector").select2({
                     placeholder: 'Selecione um sector'
               });
               $("#Categoria").select2({
                   placeholder: 'Selecione uma categoria'
               });

               // Read selected option
               $('#but_read').click(function(){
                 var username = $('#SelExample option:selected').text();
                 var userid = $('#SelExample').val();

                //  $('#result').text("id : " + userid + ", name : " + username);
               });
      })
    </script>

@endsection