@props(['items' => [], 'namePrefix' => 'items'])

@php
    $itemRows = old($namePrefix, $items ?: [['description' => '', 'quantity' => 1, 'unit_price' => 0, 'charge_basis' => 'once_per_event', 'tax_rate' => 0]]);
    $chargeBasisOptions = collect(\App\Enums\ChargeBasis::cases())->mapWithKeys(fn ($c) => [$c->value => $c->label()]);
@endphp

<h5 class="mb-3">Line Items</h5>

<div x-data="documentItems(@js($itemRows), @js($chargeBasisOptions), @js($namePrefix))">
    <template x-for="(row, index) in rows" :key="index">
        <div class="border rounded p-3 mb-3 bg-light">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong x-text="'Line ' + (index + 1)"></strong>
                <button type="button" class="btn btn-sm btn-outline-danger" @click="removeRow(index)" x-show="rows.length > 1">Remove</button>
            </div>
            <div class="row g-2">
                <div class="col-md-6">
                    <label class="form-label required">Description</label>
                    <input type="text" class="form-control" :name="namePrefix + '[' + index + '][description]'" x-model="row.description" required maxlength="500">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Quantity</label>
                    <input type="number" step="0.01" class="form-control" :name="namePrefix + '[' + index + '][quantity]'" x-model="row.quantity" min="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Unit Price</label>
                    <input type="number" step="0.01" class="form-control" :name="namePrefix + '[' + index + '][unit_price]'" x-model="row.unit_price" min="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tax Rate (%)</label>
                    <input type="number" step="0.01" class="form-control" :name="namePrefix + '[' + index + '][tax_rate]'" x-model="row.tax_rate" min="0">
                </div>
                <div class="col-md-4">
                    <label class="form-label required">Charge Basis</label>
                    <select class="form-select" :name="namePrefix + '[' + index + '][charge_basis]'" x-model="row.charge_basis" required>
                        <template x-for="[value, label] in Object.entries(chargeBasisOptions)" :key="value">
                            <option :value="value" x-text="label"></option>
                        </template>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Guest Count</label>
                    <input type="number" class="form-control" :name="namePrefix + '[' + index + '][guest_count]'" x-model="row.guest_count" min="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Billable Days</label>
                    <input type="number" class="form-control" :name="namePrefix + '[' + index + '][billable_days]'" x-model="row.billable_days" min="1">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Billable Hours</label>
                    <input type="number" step="0.01" class="form-control" :name="namePrefix + '[' + index + '][billable_hours]'" x-model="row.billable_hours" min="0">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Discount</label>
                    <input type="number" step="0.01" class="form-control" :name="namePrefix + '[' + index + '][discount_amount]'" x-model="row.discount_amount" min="0">
                </div>
            </div>
        </div>
    </template>
    <button type="button" class="btn btn-outline-primary btn-sm" @click="addRow()">
        <i class="bi bi-plus-lg me-1"></i> Add Line Item
    </button>
</div>

@once
@push('scripts')
<script>
function documentItems(initialRows, chargeBasisOptions, namePrefix) {
    return {
        rows: initialRows.length ? initialRows : [{ description: '', quantity: 1, unit_price: 0, charge_basis: 'once_per_event', tax_rate: 0 }],
        chargeBasisOptions,
        namePrefix,
        addRow() {
            this.rows.push({ description: '', quantity: 1, unit_price: 0, charge_basis: 'once_per_event', tax_rate: 0 });
        },
        removeRow(index) {
            this.rows.splice(index, 1);
        }
    };
}
</script>
@endpush
@endonce
