<!DOCTYPE html>
<html lang="pt-AO">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo e(asset('app.css')); ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>

<div id="all">
<div id="ctl">
  <div id="animate">
  </div>
</div>
</div>

    <div class="ct">
      <h1 class="typed-out">Conte-nos como foi o seu atendimento</h1>
    </div>


  <div onclick="reagir('adorei')" class="emoji emoji--love">
    <div class="emoji__heart"></div>
  </div>

      
  <div onclick="reagir('gostei')" class="emoji emoji--like">
    <!--<div class="emoji__hand">
      <div class="emoji__thumb"></div>
    </div>-->
  </div>

  <div onclick="reagir('incrivel')" class="emoji emoji--wow">
    <!--<div class="emoji__face">
      <div class="emoji__eyebrows"></div>
      <div class="emoji__eyes"></div>
      <div class="emoji__mouth"></div>
    </div>-->
  </div>

  <div class="emoji emoji--angry" data-bs-toggle="modal" data-bs-target="#podemelhorar">
    <!--<div class="emoji__face">
      <div class="emoji__eyebrows"></div>
      <div class="emoji__eyes"></div>
      <div class="emoji__mouth"></div>
    </div>-->
  </div>

  <div class="modal fade" id="podemelhorar" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Diga-nos o que incomoda você</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form onsubmit="event.preventDefault();">

        <div class="mb-3">
          <label for="exampleFormControlTextarea1" class="form-label">Nº de Conta</label>
          <input required id="nome" autofocus  class="form-control" type="text" placeholder="Seu número de conta">
        </div>

      <div class="form-check">
        <input checked class="form-check-input" type="radio" name="motivo" value="motivo 1" id="motivo1">
        <label class="form-check-label" for="motivo1">
          Motivo 1
        </label>
      </div>

      <div class="form-check">
        <input class="form-check-input" type="radio" name="motivo" value="motivo 2" id="motivo2">
        <label class="form-check-label" for="motivo2">
          Motivo 2
        </label>
      </div>

      <div class="form-check">
        <input class="form-check-input" type="radio" name="motivo" value="motivo 3" id="motivo2">
        <label class="form-check-label" for="motivo2">
          Motivo 3
        </label>
      </div>

      <div class="form-check">
        <input class="form-check-input" type="radio" name="motivo" value="motivo 4" id="motivo2">
        <label class="form-check-label" for="motivo2">
          Motivo 4
        </label>
      </div>


        <div class="m-2 d-grid gap-2">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <input type="submit" onclick="reagir('podemelhorar')"  class="btn btn-primary" value="Enviar Avaliação">
      </div>

        </form>
      </div>
    </div>
  </div>
</div>
  
  <script src="<?php echo e(asset('scripts/axios.js')); ?>"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>


  <script>
    var mdl = new bootstrap.Modal(document.getElementById('podemelhorar'), {});



var container = document.getElementById('animate');
//var emoji = ['😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','🥰','😗','🤨','🤩','🤗','😚','😫','😡','Adorei','Gostei','Ruim','Esperei muito','Fantasticoo','Muito Bom'];
var circles = [];
var emoji = ['<img src="https://www.standardbank.co.ao/static_file/assets/favicons/favicon.ico"/>','💧']

for (var i = 0; i < 15; i++) {
  addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
  addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
}



function addCircle(delay, range, color) {
  setTimeout(function() {
    var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
      x: -0.15 + Math.random() * 0.3,
      y: 1 + Math.random() * 1
    }, range);
    circles.push(c);
  }, delay);
}

function Circle(x, y, c, v, range) {
  var _this = this;
  this.x = x;
  this.y = y;
  this.color = c;
  this.v = v;
  this.range = range;
  this.element = document.createElement('span');
  this.element.style.opacity = 0;
  this.element.style.position = 'absolute';
  this.element.style.fontSize = '26px';
  this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
  this.element.innerHTML = c;
  container.appendChild(this.element);

  this.update = function() {
    if (_this.y > 1980) {
      _this.y = 80 + Math.random() * 4;
      _this.x = _this.range[0] + Math.random() * _this.range[1];
    }
    _this.y += _this.v.y;
    _this.x += _this.v.x;
    this.element.style.opacity = 0.2;
    this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
    this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
    this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
  };
}

function animate() {
  for (var i in circles) {
    circles[i].update();
  }
  requestAnimationFrame(animate);
}

animate();

    function reagir(react){

      if(react == "podemelhorar"){
        var nome = document.getElementById("nome").value;

        if (nome == ""){
          alert("Insira o seu número de conta");
          return false;
        }
        var motivo = document.querySelector('.form-check-input:checked').value;
        axios.post("http://192.168.14.101:8000/api/reagir",{reacao:react,nome:nome,motivo:motivo}).then((response)=>{
          mdl.hide();
          document.getElementById("nome").value = "";
          Swal.fire({
          position: 'center',
          icon: 'success',
          title: 'Agradecemos o seu feedback 😁',
          showConfirmButton: false,
          timer: 1500
        });
        
        });
      }else{
        axios.post("http://192.168.14.101:8000/api/reagir",{reacao:react}).then((response)=>{

          Swal.fire({
          position: 'center',
          icon: 'success',
          title: 'Agradecemos o seu feedback 😁',
          showConfirmButton: false,
          timer: 1500
        });

        });
      }
    }
  </script>
</body>
</html><?php /**PATH C:\Users\Edgar Singui\Documents\DEV\sb_e\resources\views/welcome.blade.php ENDPATH**/ ?>