@php
    $existingRows = old('ingredients');
    if ($existingRows === null && isset($record)) {
        $existingRows = $record->ingredientConsumptions->map(fn($row) => [
            'ingredient_id' => $row->ingredient_id,
            'consumption' => $row->consumption,
        ])->values()->all();
    }
    $existingRows = $existingRows ?? [];
@endphp

<div class="gm-two-col">
    <div class="gm-field">
        <label>Name <span>*</span></label>
        <input class="gm-input" type="text" name="name" placeholder="Name" value="{{ old('name', $record->name ?? '') }}" required>
        @error('name')<div class="gm-error">{{ $message }}</div>@enderror
    </div>
    <div class="gm-field">
        <label>Price <span>*</span></label>
        <input class="gm-input" type="number" name="price" placeholder="Price" value="{{ old('price', $record->price ?? '') }}" min="0" step="0.01" required>
        @error('price')<div class="gm-error">{{ $message }}</div>@enderror
    </div>
</div>

<div class="gm-two-col gm-top-row">
    <div class="gm-field">
        <label>Ingredient Consumptions</label>
        <select id="gm-ingredient-select" class="gm-input">
            <option value="">Select</option>
            @foreach($ingredients as $ingredient)
                <option
                    value="{{ $ingredient->id }}"
                    data-name="{{ $ingredient->name }}"
                    data-code="{{ $ingredient->code }}"
                    data-cost="{{ (float) $ingredient->cost_per_unit }}"
                    data-unit="{{ $ingredient->consumptionUnit?->unit_name ?? '' }}"
                >{{ $ingredient->name }}{{ $ingredient->code ? '(' . $ingredient->code . ')' : '' }}</option>
            @endforeach
        </select>
        @error('ingredients')<div class="gm-error">{{ $message }}</div>@enderror
        @error('ingredients.*.ingredient_id')<div class="gm-error">{{ $message }}</div>@enderror
        @error('ingredients.*.consumption')<div class="gm-error">{{ $message }}</div>@enderror
    </div>
    <div class="gm-read-wrap">
        <button type="button" class="gm-read-btn" onclick="alert('Select an ingredient and enter the quantity consumed. Cost is loaded from the ingredient Cost Per Unit and Total is calculated automatically.')">Read Me First</button>
    </div>
</div>

<div class="gm-table-wrap">
    <table class="gm-table" id="gm-ingredient-table">
        <thead>
            <tr>
                <th style="width:8%">SN</th>
                <th style="width:18%">Ingredient</th>
                <th style="width:20%">Consumption</th>
                <th style="width:22%">Cost</th>
                <th style="width:22%">Total</th>
                <th style="width:10%;text-align:right">Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="gm-total-row">
    <strong>Total Cost</strong>
    <input id="gm-total-cost" class="gm-input gm-total-input" type="text" value="0.00" readonly>
</div>

<div class="gm-field gm-description">
    <label>Description</label>
    <textarea class="gm-textarea" name="description" placeholder="Enter ...">{{ old('description', $record->description ?? '') }}</textarea>
    @error('description')<div class="gm-error">{{ $message }}</div>@enderror
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const select = document.getElementById('gm-ingredient-select');
    const tbody = document.querySelector('#gm-ingredient-table tbody');
    const totalInput = document.getElementById('gm-total-cost');
    const existingRows = @json($existingRows);
    let rows = [];

    function optionData(id) {
        const option = select.querySelector(`option[value="${id}"]`);
        if (!option) return null;
        return {
            id: String(id),
            name: option.dataset.name || option.textContent.trim(),
            code: option.dataset.code || '',
            cost: parseFloat(option.dataset.cost || '0'),
            unit: option.dataset.unit || ''
        };
    }

    function recalculate() {
        let grandTotal = 0;
        rows.forEach((row, index) => {
            const tr = tbody.querySelector(`tr[data-index="${index}"]`);
            if (!tr) return;
            const consumptionInput = tr.querySelector('.gm-consumption');
            const consumption = parseFloat(consumptionInput.value || '0');
            const total = consumption * row.cost;
            tr.querySelector('.gm-row-total').value = total.toFixed(2);
            grandTotal += total;
        });
        totalInput.value = grandTotal.toFixed(2);
    }

    function render() {
        tbody.innerHTML = '';
        rows.forEach((row, index) => {
            const tr = document.createElement('tr');
            tr.dataset.index = index;
            tr.innerHTML = `
                <td>${index + 1}</td>
                <td>
                    <div>${escapeHtml(row.name)}</div>
                    ${row.unit ? `<small class="gm-muted">${escapeHtml(row.unit)}</small>` : ''}
                    <input type="hidden" name="ingredients[${index}][ingredient_id]" value="${row.id}">
                </td>
                <td><input class="gm-input gm-consumption" type="number" min="0.0001" step="0.0001" name="ingredients[${index}][consumption]" value="${row.consumption ?? ''}" placeholder="Consumption" required></td>
                <td><input class="gm-input" type="text" value="${row.cost.toFixed(4)}" readonly></td>
                <td><input class="gm-input gm-row-total" type="text" value="0.00" readonly></td>
                <td style="text-align:right"><button type="button" class="gm-delete-row" data-remove="${index}" title="Remove">&#128465;</button></td>
            `;
            tbody.appendChild(tr);
        });

        tbody.querySelectorAll('.gm-consumption').forEach(input => input.addEventListener('input', recalculate));
        tbody.querySelectorAll('[data-remove]').forEach(button => button.addEventListener('click', function () {
            rows.splice(parseInt(this.dataset.remove), 1);
            render();
        }));
        recalculate();
    }

    function addIngredient(id, consumption = '') {
        if (!id || rows.some(row => row.id === String(id))) return;
        const data = optionData(id);
        if (!data) return;
        rows.push({...data, consumption});
        render();
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#039;');
    }

    select.addEventListener('change', function () {
        addIngredient(this.value);
        this.value = '';
    });

    existingRows.forEach(row => addIngredient(row.ingredient_id, row.consumption));
});
</script>
@endpush