@extends('layouts.app')
@section('content')
<h2 class="mb-3">Create Prescription</h2>
<div class="card shadow-sm"><div class="card-body">
<p><strong>Patient:</strong> {{ $appointment->patient->user->name }}</p>
<form method="POST" action="{{ route('prescriptions.store', $appointment) }}">
@csrf
<div class="row">
<div class="col-md-6 mb-3"><label class="form-label">Diagnosis</label><textarea name="diagnosis" class="form-control"></textarea></div>
<div class="col-md-6 mb-3"><label class="form-label">Notes</label><textarea name="notes" class="form-control"></textarea></div>
<div class="col-md-4 mb-3"><label class="form-label">Follow-up Date</label><input type="date" name="follow_up_date" class="form-control"></div>
</div>
<hr>
<h5>Medicine</h5>
<div id="medicines">
<div class="medicine-row border rounded p-3 mb-3">
<div class="row">
<div class="col-md-4"><input name="medicines[0][medicine_name]" class="form-control" placeholder="Medicine name" required></div>
<div class="col-md-3"><input name="medicines[0][dosage]" class="form-control" placeholder="Dosage"></div>
<div class="col-md-2"><input name="medicines[0][duration_days]" type="number" class="form-control" placeholder="Days"></div>
<div class="col-md-3"><input name="medicines[0][instructions]" class="form-control" placeholder="Instructions"></div>
</div>
<div class="mt-2">
<label class="me-3"><input type="checkbox" name="medicines[0][morning]" value="1"> Morning</label>
<label class="me-3"><input type="checkbox" name="medicines[0][afternoon]" value="1"> Afternoon</label>
<label><input type="checkbox" name="medicines[0][night]" value="1"> Night</label>
</div>
</div>
</div>
<button type="button" id="add-medicine" class="btn btn-outline-secondary">+ Add Medicine</button>
<button class="btn btn-primary">Save Prescription</button>
</form>
</div></div>
<script>
let index = 1;
document.getElementById('add-medicine').addEventListener('click', function () {
    const row = document.createElement('div');
    row.className = 'medicine-row border rounded p-3 mb-3';
    row.innerHTML = `
        <div class="row">
            <div class="col-md-4"><input name="medicines[${index}][medicine_name]" class="form-control" placeholder="Medicine name" required></div>
            <div class="col-md-3"><input name="medicines[${index}][dosage]" class="form-control" placeholder="Dosage"></div>
            <div class="col-md-2"><input name="medicines[${index}][duration_days]" type="number" class="form-control" placeholder="Days"></div>
            <div class="col-md-3"><input name="medicines[${index}][instructions]" class="form-control" placeholder="Instructions"></div>
        </div>
        <div class="mt-2">
            <label class="me-3"><input type="checkbox" name="medicines[${index}][morning]" value="1"> Morning</label>
            <label class="me-3"><input type="checkbox" name="medicines[${index}][afternoon]" value="1"> Afternoon</label>
            <label><input type="checkbox" name="medicines[${index}][night]" value="1"> Night</label>
        </div>`;
    document.getElementById('medicines').appendChild(row);
    index++;
});
</script>
@endsection