@extends('layouts.admin.app')

@section('title','Tambah Resep')

@section('content')
<h4 class="mb-3">Tambah Resep Obat</h4>

<!-- INFO PASIEN -->
<div class="mb-3">
    <strong>Nama Pasien:</strong>
    {{ $medicalRecord->appointment->familyMember
        ? $medicalRecord->appointment->familyMember->name
        : $medicalRecord->appointment->patient->name }}
    <br>

    @if($medicalRecord->appointment->familyMember)
        <strong>Reservasi Oleh:</strong> {{ $medicalRecord->appointment->patient->name }} <br>
        <strong>Hubungan:</strong> {{ $medicalRecord->appointment->familyMember->relationship }} <br>
    @endif

    <strong>ID Rekam Medis:</strong> #{{ $medicalRecord->id }}
</div>

<form method="POST"
      action="{{ route('prescriptions.store', $medicalRecord->id) }}">
    @csrf

    <!-- PILIH OBAT -->
    <div class="mb-3">
        <label class="form-label">Nama Obat</label>
        <select name="medicine_id"
                id="medicineSelect"
                class="form-select"
                required>
            <option value="">-- Pilih Obat --</option>
            @foreach($medicines as $m)
                <option value="{{ $m->id }}"
                        data-price="{{ $m->price }}"
                        data-stock="{{ $m->stock }}">
                    {{ $m->name }} | Stok: {{ $m->stock }} |
                    Rp {{ number_format($m->price,0,',','.') }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- INFO STOK -->
    <div class="mb-3">
        <label class="form-label">Stok Tersedia</label>
        <input type="text"
            id="stockInfo"
            class="form-control"
            readonly>
    </div>


    <!-- HARGA OTOMATIS -->
    <div class="mb-3">
        <label class="form-label">Harga</label>
        <input type="number"
               name="price"
               id="priceInput"
               class="form-control"
               readonly
               required>
    </div>

    <!-- DOSIS -->
    <div class="mb-3">
        <label class="form-label">Dosis</label>
        <input type="text"
               name="dosage"
               class="form-control"
               placeholder="Contoh: 500 mg"
               required>
    </div>

    <!-- FREKUENSI -->
    <div class="mb-3">
        <label class="form-label">Frekuensi</label>
        <input type="text"
               name="frequency"
               class="form-control"
               placeholder="Contoh: 3x sehari"
               required>
    </div>

    <!-- DURASI -->
    <div class="mb-3">
        <label class="form-label">Durasi (Hari)</label>
        <input type="number"
               name="duration_day"
               class="form-control"
               min="1"
               required>
    </div>

    <!-- CATATAN -->
    <div class="mb-3">
        <label class="form-label">Catatan</label>
        <textarea name="notes"
                  class="form-control"
                  rows="3"></textarea>
    </div>

    <!-- ACTION -->
    <button type="submit" id="btnSubmitResep" class="btn btn-primary">
        Simpan Resep
    </button>

    <a href="{{ route('prescriptions.index', $medicalRecord->id) }}"
       class="btn btn-secondary">
        Kembali
    </a>
</form>

<!-- SCRIPT AUTO FILL HARGA -->
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {

    const priceInput = document.getElementById('priceInput');
    const stockInfo  = document.getElementById('stockInfo');
    const submitBtn = document.getElementById('btnSubmitResep');


    // INIT TOM SELECT
    const tom = new TomSelect("#medicineSelect",{
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },

        // Disable option jika stok 0
        render: {
            option: function(data, escape) {
                const stock = data.$option.getAttribute('data-stock');
                if(stock == 0){
                    return `<div style="color:#999;">${escape(data.text)} (Stok Habis)</div>`;
                }
                return `<div>${escape(data.text)}</div>`;
            }
        },

        // === EVENT ON CHANGE DARI TOM SELECT ===
        onChange: function(value) {

            const selectedOption = document.querySelector(
                '#medicineSelect option[value="'+value+'"]'
            );

            if(!selectedOption) return;

            const price = selectedOption.getAttribute('data-price') || 0;
            const stock = selectedOption.getAttribute('data-stock') || 0;

            // isi harga
            priceInput.value = price;

            // isi stok info
            if(parseInt(stock) <= 0){
                stockInfo.value = "STOK HABIS";
                stockInfo.style.backgroundColor = "#ffe5e5";
                submitBtn.disabled = true;   // ✅ tombol benar-benar disable
            } else {
                stockInfo.value = stock + " pcs";
                stockInfo.style.backgroundColor = "";
                submitBtn.disabled = false;
            }
        }
    });

    // Default: tombol disable jika belum pilih obat
    submitBtn.disabled = true;

});
</script>
@endpush

@endsection