@extends('layouts.auth',["title"=>"Generate site"])
@section('content')
<style>
    #fullscreen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

    </style>
<div id="fullscreen-loader">
  <!--<div class="spinner"></div>-->
  <div class="loading-div text-center">
    <img class="form-img" alt="Bloxby" width="200" src="./bloxby.svg">
    <br/>
    <img alt="loading..." height="100px" src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3e%3ccircle%20fill='rgb(0%20130%20187)'%20stroke='rgb(0%20130%20187)'%20stroke-width='5'%20r='15'%20cx='40'%20cy='100'%3e%3canimate%20attributeName='opacity'%20calcMode='spline'%20dur='2.4'%20values='1;0;1;'%20keySplines='.5%200%20.5%201;.5%200%20.5%201'%20repeatCount='indefinite'%20begin='-.4'%3e%3c/animate%3e%3c/circle%3e%3ccircle%20fill='rgb(0%20130%20187)'%20stroke='rgb(0%20130%20187)'%20stroke-width='5'%20r='15'%20cx='100'%20cy='100'%3e%3canimate%20attributeName='opacity'%20calcMode='spline'%20dur='2.4'%20values='1;0;1;'%20keySplines='.5%200%20.5%201;.5%200%20.5%201'%20repeatCount='indefinite'%20begin='-.2'%3e%3c/animate%3e%3c/circle%3e%3ccircle%20fill='rgb(0%20130%20187)'%20stroke='rgb(0%20130%20187)'%20stroke-width='5'%20r='15'%20cx='160'%20cy='100'%3e%3canimate%20attributeName='opacity'%20calcMode='spline'%20dur='2.4'%20values='1;0;1;'%20keySplines='.5%200%20.5%201;.5%200%20.5%201'%20repeatCount='indefinite'%20begin='0'%3e%3c/animate%3e%3c/circle%3e%3c/svg%3e" style="margin-top: -24px; margin-bottom: 10px;">
    <div class="loading-container">
      <p class="loading-message slide-in">Generating structured content and layouts for your website…</p>
    </div>
  </div>
</div>
<script type="text/javascript">
    function runScript() {
        //document.getElementById('fullscreen-loader').style.display = 'flex';

        fetch('/generate-site/run', {
            method: 'POST',
            headers: {
                "Content-type":"application/json",
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.status=="success"){
                top.location.href = "/dashboard";
            }
        })
        .finally(() => {
            document.getElementById('fullscreen-loader').style.display = 'none';
        });
    }
    runScript();
</script>
@endsection;