<div>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="muduleTitle">
            <h1>{{ __('Insumos') }}</h1>
        </div>
        <div class="inputTitle">
            <input type="text" class="inputSearch" wire:model="search">
            <button class="btn " wire:click="$toggle('imputActive')"><i class="fa fa-plus"></i>Añadir Insumo</button>
            <!-- <button class="btn " wire:click="$emit('openModal', 'create-supply')"><i class="fa fa-plus"></i>Añadir Insumo</button> -->
        </div>
    </div>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if($imputActive or $updateMode)
            <div class="flex w-full justify-between">
                <div class="dataBox dataBox--top">
                    <div class="rowBox">
                        <div class="labelBox">
                            Nombre
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre" class="form-control" wire:model.defer="name"
                            style="margin-right:5px;">
                            <input type="hidden" wire:model.defer="supply_id">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Codigo
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Codigo" class="form-control" wire:model.defer="code"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Familia
                        </div>
                        <div class="inputBox">

                            <select wire:model.defer="family_id" name="family">
                                @foreach($families as $key => $family)
                                    @if($family->id == $family_id)
                                        <option value="{{ $family->id }}" selected>{{ $family->name }}</option>
                                    @else
                                        <option value="{{ $family->id }}">{{ $family->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Detalle
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Detalle" class="form-control" wire:model.defer="description"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Ubicación
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Ubicación" class="form-control" wire:model.defer="location"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Agregar Imagen
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Imagen" class="form-control" wire:model.defer="image"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Agregar Archivo
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Archivo" class="form-control" wire:model.defer="file"
                            style="margin-right:5px;">
                        </div>
                    </div>
                </div>
                <div class="dataBox dataBox--top dataBox--marginLeft">
                    <div class="rowBox rowBox--lit rowBox--fat">
                        <div class="labelBox labelBox--unwidth">
                            Especificaciones Actuales
                        </div>
                    </div>
                    @forelse($familyunits as $units)
                    <div class="rowBox rowBox--lit">
                        <div class="labelBox">
                            {{ $units->description }}
                        </div>
                        <div>
                            {{ $units->pivot->valor ?? ''}}
                        </div>
                    </div>
                    @empty
                    <div class="rowBox rowBox--lit">
                        <div class="labelBox">
                            Debe ir a la pantalla familias y definir que especificaciones o unidades tendra esta familia
                        </div>
                    </div>
                    @endforelse
                    <div class="rowBox rowBox--lit rowBox--fat">
                        <div class="labelBox labelBox--unwidth">
                            Actualizar Especificaciones
                        </div>
                    </div>
                    @forelse($familyunits as $units)
                    <div class="rowBox rowBox--lit">
                        <div class="labelBox">
                            {{ $units->description }}
                        </div>
                        <div>
                            <input type="text"
                                name="listunit.{{ $units->id }}"
                                wire:model.defer='listunit.{{ $units->id }}'>
                        </div>
                    </div>
                    @empty
                    <div class="rowBox rowBox--lit">
                        <div class="labelBox">
                            Debe ir a la pantalla familias y definir que especificaciones o unidades tendra esta familia
                        </div>
                    </div>
                    @endforelse
                    <div class="rowBox rowBox--lit rowBox--fat">
                        <div class="labelBox labelBox--unwidth">
                            <button wire:click="generatecode">Generar Codigo</button>
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox--full">
                            <button class="btn" wire:click="save">
                                <i class="fa fa-save"></i>Guardar
                            </button>
                            <button class="btn" wire:click="resetInput">
                                <i class="fa fa-trash"></i>Cancelar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="flex w-full">
                <table class="quamaqTable">
                    <thead>
                        <th>Imagen</th>
                        <th>Nombre</th>
                        <th>Codigo</th>
                        <th>Familia</th>
                        <th>Detalle</th>
                        <th>Ubicacion</th>
                        <th>Ficha</th>
                        <th></th>
                    </thead>
                    <tbody>
                        @foreach($data as $supplier)
                        <tr>
                            <td><img src="{{ asset('/storage/images/machine.jpg') }}"></td>
                            <td>{{ $supplier->name }}</td>
                            <td>{{ $supplier->code }}</td>
                            <td>{{ $supplier->family->name }}</td>
                            <td>{{ $supplier->description }}</td>
                            <td>{{ $supplier->location }}</td>
                            <td><img src="{{ asset('/storage/images/clip.jpg') }}"></td>
                            <td>
                                <img src="{{ asset('/storage/images/edit.jpg') }}" wire:click="edit({{ $supplier->id }})">
                                <img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroy({{ $supplier->id }})">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <x-welcome />
            </div> -->
        @endif
        </div>

    </div>
</div>
