@extends('layouts.app')

@section('content')

<div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">

<h2 class="text-xl font-bold mb-4">OSHA Questionnaire</h2>

<div class="w-full bg-gray-200 h-2 mb-4 rounded">
    <div id="progress" class="bg-blue-600 h-2 rounded" style="width:20%"></div>
</div>

<form id="form" method="POST" action="{{ route('submit.form') }}">
@csrf

<!-- STEP 1 -->
<div class="step">
    <input class="border p-2 w-full mb-3" name="answers[name]" placeholder="Full Name">
</div>

<!-- STEP 2 -->
<div class="step hidden">
    <p>Do you smoke?</p>
    <input type="radio" name="answers[smoke]" value="yes"> Yes
    <input type="radio" name="answers[smoke]" value="no"> No
</div>

<!-- STEP 3 -->
<div class="step hidden">
    <p>Asthma?</p>
    <input type="radio" name="answers[asthma]" value="yes"> Yes
    <input type="radio" name="answers[asthma]" value="no"> No
</div>

<div class="flex justify-between mt-4">
    <button type="button" onclick="prev()">Back</button>
    <button type="button" onclick="next()">Next</button>
    <button type="submit" id="submit" class="hidden">Submit</button>
</div>

</form>
</div>

<script>
let step = 0;
let steps = document.querySelectorAll('.step');

function show(){
    steps.forEach((s,i)=>s.classList.toggle('hidden',i!==step));
    document.getElementById('progress').style.width=((step+1)/steps.length)*100+'%';
    document.getElementById('submit').classList.toggle('hidden',step!==steps.length-1);
}

function next(){ step++; show(); }
function prev(){ step--; show(); }

show();

setInterval(()=>{
 fetch('/save-draft',{
  method:'POST',
  headers:{
    'Content-Type':'application/json',
    'X-CSRF-TOKEN':document.querySelector('[name=_token]').value
  },
  body:JSON.stringify({answers:Object.fromEntries(new FormData(document.getElementById('form')))})
 });
},5000);

</script>

@endsection