@extends('layouts.app')
@section('title', 'New prescription')

@section('content')
<div class="page-head"><div><div class="eyebrow">Prescriptions · New</div><h1>New prescription</h1></div></div>

<form method="POST" action="{{ route('prescriptions.store') }}">
    @csrf
    @if($appointmentId)<input type="hidden" name="appointment_id" value="{{ $appointmentId }}">@endif

    <div class="card card-pad" style="margin-bottom:18px;">
        <div class="form-grid">
            <div class="field">
                <label for="patient_id">Patient</label>
                <select id="patient_id" class="select" name="patient_id" required>
                    <option value="">Select patient…</option>
                    @foreach($patients as $p)
                        <option value="{{ $p->id }}" @selected((string)old('patient_id', $selectedPatient)===(string)$p->id)>{{ $p->name }} ({{ $p->mrn }})</option>
                    @endforeach
                </select>
                @error('patient_id')<div class="error">{{ $message }}</div>@enderror
            </div>
            <div class="field"><label for="prescribed_on">Date</label><input id="prescribed_on" class="input" type="date" name="prescribed_on" value="{{ old('prescribed_on', date('Y-m-d')) }}" required></div>
            <div class="field" style="grid-column:1 / -1;"><label for="diagnosis">Diagnosis</label><input id="diagnosis" class="input" name="diagnosis" value="{{ old('diagnosis') }}" placeholder="e.g. Upper respiratory tract infection"></div>
        </div>
    </div>

    <div class="card" style="margin-bottom:18px;">
        <div class="card-head"><h3>Medications</h3><span class="sub">Rx</span></div>
        <div class="card-pad">
            <datalist id="drug-list">
                @foreach($medications as $m)<option value="{{ $m->label }}">@endforeach
            </datalist>
            <div id="items"></div>
            <button type="button" class="btn btn-sm btn-ghost" id="add-item">+ Add medication</button>
        </div>
    </div>

    <div class="card card-pad" style="margin-bottom:18px;">
        <div class="field" style="margin:0;"><label for="advice">General advice</label><textarea id="advice" class="input" name="advice" rows="3" placeholder="e.g. Plenty of fluids, rest, review in 5 days if not improving">{{ old('advice') }}</textarea></div>
    </div>

    <div class="form-actions">
        <button class="btn btn-primary" type="submit">Create prescription</button>
        <a href="{{ url()->previous() }}" class="btn btn-ghost">Cancel</a>
    </div>
</form>

@push('scripts')
<script>
    const wrap = document.getElementById('items');
    let i = 0;
    function item() {
        const n = i++;
        const el = document.createElement('div');
        el.className = 'repeater-row';
        el.style.gridTemplateColumns = '1.6fr 1fr 1fr 1fr 40px';
        el.innerHTML = `
            <div><label class="hint">Medication</label><input class="input" list="drug-list" name="items[${n}][drug_name]" placeholder="Drug name"></div>
            <div><label class="hint">Dosage</label><input class="input" name="items[${n}][dosage]" placeholder="1 tablet"></div>
            <div><label class="hint">Frequency</label><input class="input" name="items[${n}][frequency]" placeholder="Twice daily"></div>
            <div><label class="hint">Duration</label><input class="input" name="items[${n}][duration]" placeholder="5 days"></div>
            <button type="button" class="rm-row" aria-label="Remove" style="align-self:end;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M6 6l12 12M18 6 6 18" stroke-linecap="round"/></svg></button>`;
        el.querySelector('.rm-row').addEventListener('click', () => el.remove());
        wrap.appendChild(el);
    }
    document.getElementById('add-item').addEventListener('click', item);
    item();
</script>
@endpush
@endsection