@php $items = old('items', $prescription?->items?->toArray() ?? [['medication_name' => '', 'dosage' => '', 'frequency' => '', 'duration_days' => '', 'instructions' => '']]); @endphp

<div id="items">
    @foreach ($items as $i => $item)
        <div class="border rounded p-3 mb-2">
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">Medication</label>
                    <input class="form-control" name="items[{{ $i }}][medication_name]" value="{{ $item['medication_name'] ?? '' }}" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Dosage</label>
                    <input class="form-control" name="items[{{ $i }}][dosage]" value="{{ $item['dosage'] ?? '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Frequency</label>
                    <input class="form-control" name="items[{{ $i }}][frequency]" value="{{ $item['frequency'] ?? '' }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Days</label>
                    <input class="form-control" type="number" min="1" max="365" name="items[{{ $i }}][duration_days]" value="{{ $item['duration_days'] ?? '' }}">
                </div>
                <div class="col-12">
                    <label class="form-label">Instructions</label>
                    <input class="form-control" name="items[{{ $i }}][instructions]" value="{{ $item['instructions'] ?? '' }}">
                </div>
            </div>
        </div>
    @endforeach
</div>

<button class="btn btn-outline-secondary" type="button" id="addItem">Add another medicine</button>

<script>
    (function () {
        let idx = {{ count($items) }};
        const btn = document.getElementById('addItem');
        if (!btn) return;
        btn.addEventListener('click', function () {
            const container = document.getElementById('items');
            const wrap = document.createElement('div');
            wrap.className = 'border rounded p-3 mb-2';
            wrap.innerHTML = `
                <div class="row g-2">
                    <div class="col-md-4"><label class="form-label">Medication</label><input class="form-control" name="items[${idx}][medication_name]" required></div>
                    <div class="col-md-2"><label class="form-label">Dosage</label><input class="form-control" name="items[${idx}][dosage]"></div>
                    <div class="col-md-3"><label class="form-label">Frequency</label><input class="form-control" name="items[${idx}][frequency]"></div>
                    <div class="col-md-3"><label class="form-label">Days</label><input class="form-control" type="number" min="1" max="365" name="items[${idx}][duration_days]"></div>
                    <div class="col-12"><label class="form-label">Instructions</label><input class="form-control" name="items[${idx}][instructions]"></div>
                </div>
            `;
            container.appendChild(wrap);
            idx++;
        });
    })();
</script>