@php
$field['name'] = $field['name'] ?? 'medicines';
$field['label'] = $field['label'] ?? 'Medicines';
$field['value'] = old($field['name']) ?? ($field['value'] ?? []);
$medicines = \App\Models\Medicine::pluck('name', 'id')->toArray();
$values = $field['value'] ?? [];

@endphp

<div class="form-group col-sm-12">
    <label>{!! $field['label'] !!}</label>

    <div id="{!! $field['name'] !!}-wrapper">
        @php $values = is_array($field['value']) ? $field['value'] : []; @endphp
        @foreach($values as $i => $val)
            <div class="{!! $field['name'] !!}-row d-flex mb-2 gap-2">
                <select class="form-control {!! $field['name'] !!}-select flex-grow-1" name="{{ $field['name'] }}[{{ $i }}][id]">
                    <option value="">-- Select or type --</option>

                    @foreach($medicines as $id => $name)
                        @php
                            // Use pivot price if exists, otherwise default medicine price
                            $price = $val['price'] ?? \App\Models\Medicine::find($id)?->price ?? 0;
                        @endphp
                        <option value="{{ $id }}" data-price="{{ $price }}" {{ ($val['id'] ?? null) == $id ? 'selected' : '' }}>
                            {{ $name }}
                        </option>


                    @endforeach
                </select>
                <input placeholder="Price" type="text" name="{{ $field['name'] }}[{{ $i }}][price]" class="form-control price-field" style="width: 120px;" value="{{ $val['price'] ?? 0 }}">
                <button type="button" class="btn btn-danger btn-sm ms-2 remove-{!! $field['name'] !!}">-</button>
            </div>
        @endforeach
    </div>
    <input type="hidden" name="{!! $field['name'] !!}_count" id="{!! $field['name'] !!}-count"  value="{{ $i ?? 0 }}" />

    <button type="button" id="add-{!! $field['name'] !!}" class="btn btn-primary btn-sm mt-2">+ Add {!! $field['label'] !!}</button>
</div>

@push('crud_fields_scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
    function initTomSelect(el) {
        new TomSelect(el, {
            create: true,
            sortField: {field: "text", direction: "asc"},
            onChange: function(value) {
                const row = el.closest('.{!! $field["name"] !!}-row');
                const priceField = row.querySelector('.price-field');
                const option = el.querySelector(`option[value="${value}"]`);
                priceField.value = option?.dataset.price ?? 0;
            }
        });
    }

    // Init on load
    document.querySelectorAll('.{!! $field["name"] !!}-select').forEach(el => initTomSelect(el));

    // Add new row
    document.getElementById('add-{!! $field["name"] !!}').addEventListener('click', function() {
        const wrapper = document.getElementById('{!! $field["name"] !!}-wrapper');
        const div = document.createElement('div');
        let countElement = document.getElementById("{!! $field["name"] !!}-count");
        let count = parseInt(countElement.value, 10) || 0;
        count++;
        div.classList.add('{!! $field["name"] !!}-row', 'd-flex', 'mb-2', 'gap-2');
        div.innerHTML = `
            <select class="form-control {!! $field['name'] !!}-select flex-grow-1" name="{{ $field['name'] }}[${count}][id]">
                <option value="">-- Select or type --</option>
                @foreach($medicines as $id => $name)
                    <option value="{{ $id }}" data-price="{{ \App\Models\Medicine::find($id)?->price ?? 0 }}">{{ $name }}</option>
                @endforeach
            </select>
            <input type="text" placeholder="Price" name="{{ $field['name'] }}[${count}][price]" class="form-control price-field" style="width: 120px;">
            <button type="button" class="btn btn-danger btn-sm ms-2 remove-{!! $field['name'] !!}">-</button>
        `;
        wrapper.appendChild(div);

        countElement.value = count;
        initTomSelect(div.querySelector('.{!! $field["name"] !!}-select'));
    });

    // Remove row
    document.addEventListener('click', function(e) {
        if(e.target.classList.contains('remove-{!! $field["name"] !!}')) {
            e.target.closest('.{!! $field["name"] !!}-row').remove();
        }
    });
});
</script>
@endpush