<form>
    <input type="hidden" wire:model="product_id">

    <div class="row match-height mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Datos del Producto</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="category">Categoria</label>
                                            <select wire:model="category" class="form-control">
                                                <option>Seleccionar la categoria</option>
                                                @foreach (config('const.product-categories') as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach
                                            </select>
                                            @error('category') <span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="name">Nombre</label>
                                            <input type="text" class="form-control" wire:model="name" placeholder="Nombre del producto">
                                            @error('name') <span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="description">Descripción</label>
                                            <textarea class="form-control" id="description" wire:model="description" placeholder="Descripción del producto" rows="5"></textarea>
                                            @error('description') <span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <input type="file" class="d-none" wire:model="photo" id="photo">
                                            <a class="preview-image" href="javascript:" wire:click="$emit('triggerPreview', '#photo')">
                                                @if (!empty($photo))
                                                    @if (is_string($photo))
                                                        <img src="{{ Storage::url($photo) }}">
                                                    @else
                                                        <img src="{{ previewImg($photo->temporaryUrl()) }}">
                                                    @endif
                                                @else
                                                    <span>Seleccionar Imagen</span>
                                                @endif
                                            </a>
                                            @error('photo') <span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">Items del Producto</label>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" wire:model="variable" id="chk-variable" {{ $variable ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="chk-variable">Producto Variable</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if ($variable)
                                    <div class="row">
                                        <div class="col-12 text-right">
                                            <button type="button" class="btn btn-light" wire:click="addItem()">
                                                <i class="fas fa-plus"></i> Agregar Item
                                            </button>
                                        </div>
                                        <div class="col-12 mt-4">
                                            <table class="table">
                                                <tbody id="product-details">
                                                    @foreach ($details as $key => $value)
                                                        <tr>
                                                            <td class="align-middle" style="width: 25px;">
                                                                <span class="badge badge-pill badge-dark">{{ $key + 1 }}</span>
                                                            </td>
                                                            <td class="align-middle">
                                                                <input type="hidden" wire:model="details.{{ $key }}.id">
                                                                <input type="text" class="form-control" wire:model="details.{{ $key }}.name" placeholder="Nombre del item">
                                                                @error('details.'.$key.'.name') <span class="text-danger error">{{ $message }}</span>@enderror
                                                            </td>
                                                            @if ($key > 0)
                                                                <td class="align-middle text-right" style="width: 25px;">
                                                                    <button type="button" class="btn btn-light-secondary btn-sm" wire:click="removeItem({{ $key }})">
                                                                        <i class="fas fa-minus text-danger"></i>
                                                                    </button>
                                                                </td>
                                                            @endif
                                                        </tr>
                                                    @endforeach
                                                <tbody>
                                            </table>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="col-12 d-flex justify-content-end">
                                @if ($mode == 'create')
                                    <button wire:click.prevent="store()" class="btn btn-primary mr-1 mb-1">
                                        <i class="far fa-save"></i>
                                        Guardar
                                    </button>
                                @else
                                    <button wire:click.prevent="update()" class="btn btn-primary mr-1 mb-1">
                                        <i class="far fa-save"></i>
                                        Actualizar
                                    </button>
                                @endif
                                <button wire:click.prevent="cancel()" class="btn btn-light-secondary mr-1 mb-1">
                                    <i class="fas fa-ban"></i>
                                    Cancelar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
