@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-12">
        <div class="mb-3">
            <label class="col-form-label">Description</label>
            <input type="text" wire:model="form.description" class="form-control">
            @error('form.description')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Quantity</label>
            <input type="number" min="0" wire:model.live.debounce.500ms="form.quantity" class="form-control">
            @error('form.quantity')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Rate ($)</label>
            <input type="number" min="0" step="0.01" wire:model.live.debounce.500ms="form.rate" class="form-control">
            @error('form.rate')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Discount (%)</label>
            <input type="number" min="0" wire:model.live.debounce.500ms="form.discount_percentage" class="form-control">
            @error('form.discount_percentage')
            <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Discount ($)</label>
            <input type="number" min="0" wire:model.live="form.discount_amount" class="form-control" readonly="readonly">
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="mb-3">
            <label class="col-form-label">Final Amount ($)</label>
            <input type="text" wire:model.live="form.amount" class="form-control" readonly="readonly">
        </div>
    </div>
</div>