@include('livewire.tenant.common.modalHead')

<div class="row">
    <div class="col-12">
        <div class="form-group">
            <label>Nombre Opción</label>
            <input type="text" wire:model.blur='name' class="form-control"
                placeholder="ej: Opcion Arma Tu Roll">
            @error('name')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label>Categoría</label>
            <select wire:model.blur="data.category_id" class="form-control">
                <option value="Elegir">Elegir una Categoría</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
            @error('data.category_id')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label>Título Opción</label>
            <input type="text" wire:model.blur='data.name' class="form-control"
                placeholder="ej: Bebidas">
            @error('data.name')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-3">
        <div class="form-group">
            <label>Minimo</label>
            <input type="number" value="0" wire:model.blur='data.min' class="form-control px-1">
            @error('data.min')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-3">
        <div class="form-group">
            <label>Maximo</label>
            <input type="number" value="0" wire:model.blur='data.max' class="form-control px-1">
            @error('data.max')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-3">
        <div class="form-group">
            <label>Gratis</label>
            <input type="number" value="0" wire:model.blur='data.free' class="form-control px-1">
            @error('data.free')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-3 m-auto">
        <button class="btn btn-block btn-success" wire:click.prevent='addExtra'>Agregar</button>
    </div>
    <div class="col-12">
        <div class="table-responsive">
            <table class="table table-hover mt-2">
                <thead class="text-white" style="background: #3B3F5C;">
                    <tr>
                        <th class="table-th text-white">Categoría Opción</th>
                        <th class="table-th text-white text-center">Minimo</th>
                        <th class="table-th text-white text-center">Maximo</th>
                        <th class="table-th text-white text-center">Gratis</th>
                        <th class="table-th text-white text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($optionsSelected as $key => $optionSelect)
                        <tr>
                            <td class="py-1">{{ $optionSelect['name'] }}</td>
                            <td class="py-1 text-center">{{ $optionSelect['min'] }}</td>
                            <td class="py-1 text-center">{{ $optionSelect['max'] }}</td>
                            <td class="py-1 text-center">{{ $optionSelect['free'] }}</td>
                            <td class="py-1 text-center">
                                <ul class="table-controls">
                                    @can('Puede Eliminar Productos')
                                        <li>
                                            <a href="javascript:void(0);" wire:click="deleteOption({{ $key }})"
                                                data-toggle="tooltip" data-placement="top" title=""
                                                data-original-title="Delete">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-x-circle text-danger">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <line x1="15" y1="9" x2="9" y2="15">
                                                    </line>
                                                    <line x1="9" y1="9" x2="15" y2="15">
                                                    </line>
                                                </svg>
                                            </a>
                                        </li>
                                    @endcan
                                </ul>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


@include('livewire.tenant.common.modalFooter')