@php
    $prefix = $formPrefix ?? '';
@endphp

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}medicine_id">Medicine <span style="color:red">*</span></label>
    <select class="form-control" name="medicine_id" id="{{ $prefix }}medicine_id" onchange="updateCategoryAndType()">
        <option value="">Select Medicine</option>
        @foreach ($medicines as $medicine)
            <option value="{{ $medicine->id }}" data-category="{{ $medicine->category->name ?? '' }}"
                data-category-id="{{ $medicine->category->id ?? '' }}" data-type="{{ $medicine->type->type ?? '' }}"
                data-type-id="{{ $medicine->type->id ?? '' }}" @if (!empty($stock) && $stock['medicine_id'] == $medicine->id) selected @endif>
                {{ $medicine->item_code }} - {{ $medicine->name }}
            </option>
        @endforeach
    </select>
    <span class="text-danger is-invalid medicine_id_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}medicine_category">Category</label>
    <input type="text" class="form-control" id="{{ $prefix }}medicine_category" readonly
        value="{{ $stock->medicine->category->name ?? '' }}">
    <input type="hidden" name="medicine_category_id" id="{{ $prefix }}medicine_category_id"
        value="{{ $stock->medicine_category_id ?? '' }}">
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}medicine_type">Type</label>
    <input type="text" class="form-control" id="{{ $prefix }}medicine_type" readonly
        value="{{ $stock->medicine->type->type ?? '' }}">
    <input type="hidden" name="medicine_type_id" id="{{ $prefix }}medicine_type_id"
        value="{{ $stock->medicine_type_id ?? '' }}">
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}unit_id">Unit <span style="color:red">*</span></label>
    <select class="form-control" name="unit_id" id="{{ $prefix }}unit_id">
        <option value="">Select Unit</option>
        @foreach ($units as $item)
            <option value="{{ $item->id }}" @if (!empty($stock) && $stock['unit_id'] == $item->id) selected @endif>
                {{ $item->unit }}
            </option>
        @endforeach
    </select>
    <span class="text-danger is-invalid unit_id_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}available_qty">Available Qty <span style="color:red">*</span></label>
    <input type="number" class="form-control" name="available_qty" id="{{ $prefix }}available_qty"
        value="{{ $stock->available_qty ?? '' }}">
    <span class="text-danger is-invalid available_qty_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}batch_no">Batch No <span style="color:red">*</span></label>
    <input type="text" class="form-control" name="batch_no" id="{{ $prefix }}batch_no"
        value="{{ $stock->batch_no ?? '' }}">
    <span class="text-danger is-invalid batch_no_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}mfg_date">MFG Date<span style="color:red">*</span></label>
    <input type="date" class="form-control" max="{{ date('Y-m-d') }}" name="mfg_date"
        id="{{ $prefix }}mfg_date" value="{{ $stock->mfg_date ?? '' }}">
    <span class="text-danger is-invalid mfg_date_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}exp_date">EXP Date<span style="color:red">*</span></label>
    <input type="date" class="form-control" name="exp_date" id="{{ $prefix }}exp_date"
        value="{{ $stock->exp_date ?? '' }}">
    <span class="text-danger is-invalid exp_date_err"></span>
</div>

<div class="col-md-6 mt-3">
    <label for="{{ $prefix }}price">Price</label>
    <input type="number" step="0.01" class="form-control" name="price" id="{{ $prefix }}price"
        value="{{ $stock->price ?? '' }}">
    <span class="text-danger is-invalid price_err"></span>
</div>
<div class="col-md-6 mt-3">
    <label for="{{ $formPrefix }}received_date">Received Date</label>
    <input type="date" name="received_date" id="{{ $formPrefix }}received_date" class="form-control"
        value="{{ old('received_date', isset($stock->received_date) ? $stock->received_date->format('Y-m-d') : '') }}">
    <span class="text-danger received_date_err"></span>
</div>
<div class="col-md-12 mt-3">
    <label for="{{ $prefix }}description">Description</label>
    <textarea class="form-control" name="description" id="{{ $prefix }}description" rows="4"
        placeholder="Enter description">{{ $stock->description ?? '' }}</textarea>
    <span class="text-danger is-invalid description_err"></span>
</div>

<!-- Other inputs remain unchanged -->

<script>
    function updateCategoryAndType() {
        const select = document.getElementById('{{ $prefix }}medicine_id');
        const selectedOption = select.options[select.selectedIndex];

        // Readonly text inputs
        const categoryInput = document.getElementById('{{ $prefix }}medicine_category');
        const typeInput = document.getElementById('{{ $prefix }}medicine_type');

        // Hidden inputs
        const categoryIdInput = document.getElementById('{{ $prefix }}medicine_category_id');
        const typeIdInput = document.getElementById('{{ $prefix }}medicine_type_id');

        categoryInput.value = selectedOption.getAttribute('data-category') || '';
        typeInput.value = selectedOption.getAttribute('data-type') || '';

        categoryIdInput.value = selectedOption.getAttribute('data-category-id') || '';
        typeIdInput.value = selectedOption.getAttribute('data-type-id') || '';
    }

    // Run once on page load in case a medicine is preselected
    document.addEventListener('DOMContentLoaded', updateCategoryAndType);
</script>