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

@section('conteudo')

      
      
      <div class="d-none">
      {{$clientes=\App\Models\Cliente::all()}}
          
      </div>
      
          
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="{{asset('img/logo.png')}}" alt="" width="72" height="57">
      <h2>CADASTRO DE CLIENTES</h2>
      <p class="lead">Insira os dados do cliente para completar seu cadastro.</p>
    </div>

    <div class="row g-5">
      <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-primary">Clientes</span>
          <!--<span class="badge bg-primary rounded-pill">3</span>-->
        </h4>
        <ul class="list-group mb-3">
          <li class="list-group-item d-flex justify-content-between lh-sm">
            <div>
              <h6 class="my-0">Numero de clientes Gestdoc</h6>
              <small class="text-muted">{{$clientes->count()}}</small>
            </div>
            <!--<span class="text-muted">$12</span>-->
          </li>
           
        </ul>

        
      </div>
      <div class="col-md-7 col-lg-8">
        <h4 class="mb-3">DADOS DO CLIENTE</h4>
        <form id="cliForm" >
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="firstName" class="form-label">Nome completo</label>
              <input type="text" class="form-control" id="nome" placeholder="Nome do cliente" value="" required>
              <div class="invalid-feedback">
                Insira um nome válido.
              </div>
            </div>
            <div class="col-sm-6">
              <label for="firstName" class="form-label">Nome abreviado</label>
              <input type="text" class="form-control" id="nome2" placeholder="Nome do cliente abreviado" value="" required>
              <div class="invalid-feedback">
                Insira um nome válido.
              </div>
            </div>
             <div class="col-sm-6">
              <label for="email" class="form-label">Número do cliente </label>
              <input type="number" min="10000" max="20000" class="form-control" id="numero" required placeholder="Numero do cliente">
            </div>
            <div class="col-sm-6">
              <label for="lastName" class="form-label">Telefone</label>
              <input type="number" min="900000000" max="999999999" class="form-control" id="telefone" placeholder="Telefone" value="" required>
              <div class="invalid-feedback">
                Insirta um telemóvel válido.
              </div>
            </div>

            <div class="col-12">
              <label for="username" class="form-label">Email</label>
              <div class="input-group has-validation">
                <span class="input-group-text">@</span>
                <input type="email" class="form-control" id="email" placeholder="Email" required>
              <div class="invalid-feedback">
                  Insira um email válido.
                </div>
              </div>
            </div>

             

             
          <br>
            <br> <br>
          <button class="w-25 btn btn-primary btn-sm" type="submit">Cadastrar</button>
          </div>

        </form>
      </div>
    </div>
  </main>
 
</div>
 
      
      
      
      
      
      
      
      
      
      
    <script>
     

      $(function(){
          
             $("#cliForm").submit(function(e){
                 e.preventDefault();
                 

   

                let nome=$("#nome").val();
                let nome2=$("#nome2").val();
                let telefone=$("#telefone").val();
                let numero=$("#numero").val();
                let email=$("#email").val();
               
                $.post( "{{ route('us.admin.cliente.add') }}", { '_token':'{{ csrf_token() }}' ,
                'nome':nome,'nome2':nome2,'numero':numero,'email':email, 'telemovel':telefone})
                .done(function( data ) {
                    
                     if(data==1){
                        // $.alert("Cliente cadastrado com sucesso!")
                        window.location.replace("{{ route('us.admin.cliente.listar') }}");
                        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: 'Cliente cadastrado com sucesso!'
                        })
                     }else{
                         
                        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: 'danger',
                            title: ''+data
                        })
                          
                     }
                }).fail(function(){
                    $.alert("Infelizmente não conseguimos inserir os dados, verifique se inseriu algum dado redundante na base de dados.")
                });
          
             });
          
              
              
           
      })
    </script>

@endsection