@extends('layouts.app')

@section('content')

<h2 class="text-xl font-semibold">OSHA Respirator Medical Evaluation</h2>

<div class="max-w-4xl mx-auto py-6">

<form id="oshaForm" method="POST" action="{{ route('submit.form') }}" class="bg-white p-6 rounded shadow">
@csrf

@php
    $answers = $response->answers ?? [];
@endphp

<!-- SECTION 1 -->
<h3 class="font-bold text-lg mb-3">Section 1: Personal Info</h3>

<div class="grid grid-cols-2 gap-4 mb-4">
    <input name="answers[name]" value="{{ $answers['name'] ?? '' }}" placeholder="Full Name"
        class="border p-2 rounded w-full">

    <input name="answers[age]" value="{{ $answers['age'] ?? '' }}" placeholder="Age"
        class="border p-2 rounded w-full">
</div>

<div class="mb-4">
    <select name="answers[sex]" class="border p-2 rounded w-full">
        <option value="">Select Sex</option>
        <option value="male" {{ ($answers['sex'] ?? '')=='male'?'selected':'' }}>Male</option>
        <option value="female" {{ ($answers['sex'] ?? '')=='female'?'selected':'' }}>Female</option>
    </select>
</div>

<!-- SECTION 2 -->
<h3 class="font-bold text-lg mt-6 mb-3">Section 2: General Health</h3>

@foreach([
    'smoke' => 'Do you smoke?',
    'seizures' => 'Seizures?',
    'diabetes' => 'Diabetes?',
    'allergies' => 'Allergies affecting breathing?',
    'claustrophobia' => 'Claustrophobia?',
    'smell' => 'Trouble smelling odors?'
] as $key => $label)

<div class="mb-3">
    <p>{{ $label }}</p>

    <label class="mr-4">
        <input type="radio" name="answers[{{ $key }}]" value="yes"
        {{ ($answers[$key] ?? '')=='yes'?'checked':'' }}> Yes
    </label>

    <label>
        <input type="radio" name="answers[{{ $key }}]" value="no"
        {{ ($answers[$key] ?? '')=='no'?'checked':'' }}> No
    </label>
</div>

@endforeach

<!-- SECTION 3 -->
<h3 class="font-bold text-lg mt-6 mb-3">Section 3: Lung Conditions</h3>

@foreach([
    'asthma'=>'Asthma',
    'bronchitis'=>'Chronic bronchitis',
    'emphysema'=>'Emphysema',
    'pneumonia'=>'Pneumonia',
    'tuberculosis'=>'Tuberculosis',
    'silicosis'=>'Silicosis',
    'collapsed_lung'=>'Collapsed lung',
    'lung_cancer'=>'Lung cancer'
] as $key => $label)

<div class="mb-3">
    <p>{{ $label }}</p>

    <label class="mr-4">
        <input type="radio" name="answers[{{ $key }}]" value="yes"
        {{ ($answers[$key] ?? '')=='yes'?'checked':'' }}> Yes
    </label>

    <label>
        <input type="radio" name="answers[{{ $key }}]" value="no"
        {{ ($answers[$key] ?? '')=='no'?'checked':'' }}> No
    </label>
</div>

@endforeach

<!-- SECTION 4 -->
<h3 class="font-bold text-lg mt-6 mb-3">Section 4: Symptoms</h3>

@foreach([
    'short_breath'=>'Shortness of breath',
    'cough'=>'Frequent coughing',
    'wheezing'=>'Wheezing',
    'chest_pain'=>'Chest pain',
    'phlegm'=>'Phlegm'
] as $key => $label)

<div class="mb-3">
    <p>{{ $label }}</p>

    <label class="mr-4">
        <input type="radio" name="answers[{{ $key }}]" value="yes"
        {{ ($answers[$key] ?? '')=='yes'?'checked':'' }}> Yes
    </label>

    <label>
        <input type="radio" name="answers[{{ $key }}]" value="no"
        {{ ($answers[$key] ?? '')=='no'?'checked':'' }}> No
    </label>
</div>

@endforeach

<!-- SECTION 5 -->
<h3 class="font-bold text-lg mt-6 mb-3">Section 5: Heart Conditions</h3>

@foreach([
    'heart_attack'=>'Heart attack',
    'stroke'=>'Stroke',
    'angina'=>'Angina',
    'heart_failure'=>'Heart failure',
    'high_bp'=>'High blood pressure'
] as $key => $label)

<div class="mb-3">
    <p>{{ $label }}</p>

    <label class="mr-4">
        <input type="radio" name="answers[{{ $key }}]" value="yes"
        {{ ($answers[$key] ?? '')=='yes'?'checked':'' }}> Yes
    </label>

    <label>
        <input type="radio" name="answers[{{ $key }}]" value="no"
        {{ ($answers[$key] ?? '')=='no'?'checked':'' }}> No
    </label>
</div>

@endforeach

<!-- SECTION 6 -->
<h3 class="font-bold text-lg mt-6 mb-3">Section 6: Work Exposure</h3>

@foreach([
    'chemicals'=>'Exposure to chemicals',
    'asbestos'=>'Worked with asbestos',
    'dust'=>'Dust exposure',
    'welding'=>'Welding exposure',
    'mining'=>'Mining exposure'
] as $key => $label)

<div class="mb-3">
    <p>{{ $label }}</p>

    <label class="mr-4">
        <input type="radio" name="answers[{{ $key }}]" value="yes"
        {{ ($answers[$key] ?? '')=='yes'?'checked':'' }}> Yes
    </label>

    <label>
        <input type="radio" name="answers[{{ $key }}]" value="no"
        {{ ($answers[$key] ?? '')=='no'?'checked':'' }}> No
    </label>
</div>

@endforeach

<!-- NOTES -->
<div class="mt-4">
    <textarea name="answers[notes]" class="w-full border p-2 rounded"
        placeholder="Additional notes">{{ $answers['notes'] ?? '' }}</textarea>
</div>

<button class="mt-6 bg-blue-600 text-white px-6 py-2 rounded">
    Submit
</button>

</form>

</div>

<!-- AUTO SAVE -->
<script>
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('oshaForm')))
        })
    });
},5000);
</script>

@endsection