<form id="form" role="form" wire:submit.prevent="store">
    <div class="card-body">
        <div class="form-row">
            <div class="col">
                <label for="name">نام گزینه *</label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                       wire:model.defer="name" required>
                @error('name')
                    <span class="text-danger" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="col">
                <label for="label">لیبل</label>
                <input type="text" class="form-control @error('label') is-invalid @enderror" id="label"
                       wire:model.defer="label">
                @error('label')
                <span class="text-danger" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="col">
                <label for="sort_order">ترتیب</label>
                <input type="number" class="form-control @error('sort_order') is-invalid @enderror" id="sort_order"
                       wire:model.defer="sort_order">
                @error('sort_order')
                <span class="text-danger" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="col">
                <label for="type">نوع</label>
                <select class="form-control @error('type') is-invalid @enderror" id="type"
                       wire:model.defer="type" required>
                    @for($i = 0; $i < count(\App\Models\Option::TYPE_TRANSLATE); $i++)
                        <option value="{{ $i }}">{{ \App\Models\Option::TYPE_TRANSLATE[$i] }}</option>
                    @endfor
                </select>
                @error('type')
                    <span class="text-danger" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <table class="table table-hover mt-4">
            <thead>
            <tr>
                <th>مقدار *</th>
                <th>رنگ</th>
                <th>ترتیب</th>
                <th>عملیات</th>
            </tr>
            </thead>
            <tbody>
            @if(count($values))
                @foreach($values as $index => $value)
                    <tr>
                        <td>
                            <input type="text" class="form-control @error("values.$index.name") is-invalid @enderror" wire:model.defer="values.{{$index}}.name" required>
                            @error("values.$index.name")
                            <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </td>
                        <td>
                            <input type="color" wire:model.defer="values.{{$index}}.color">
                            @error("values.$index.color")
                                <br>
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </td>
                        <td>
                            <input type="number" class="form-control @error("values.$index.sort_order") is-invalid @enderror" min="0" wire:model.defer="values.{{$index}}.sort_order">
                            @error("values.$index.sort_order")
                            <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm" wire:click="removeItem({{ $index }})">
                                <span class="fa fa-trash"></span> حذف
                            </button>
                        </td>
                    </tr>
                @endforeach
            @endif
            </tbody>
            <tfoot>
            <tr>
                <td colspan="3"></td>
                <td>
                    <button type="button" id="add-item" class="btn btn-success btn-sm" wire:click="addItem"><span class="fa fa-plus"></span> افزودن</button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-primary">ذخیره</button>
        <a href="{{ route('admin.options.index') }}" class="btn btn-danger float-left">لغو</a>
    </div>
</form>