<div>

    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="muduleTitle">
            <h1>{{ __('Familias de 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 Familia</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">
                <div class="dataBox dataBox--top">
                    <div class="rowBox">
                        <div class="labelBox">
                            Familia Predecesora
                        </div>
                        <div class="inputBox">
                            <select wire:model.defer="parent_id" name="family">
                                <option></option>
                                @foreach($data as $family)
                                @if ($family->id==$parent_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">
                            Nombre Familia
                        </div>
                        <div class="inputBox">
                            <input type="text" placeholder="Nombre Familia" class="form-control" wire:model.defer="name"
                            style="margin-right:5px;">
                        </div>
                    </div>
                    <div class="rowBox">
                        <div class="labelBox">
                            Descripción
                        </div>
                        <textarea wire:model.defer="description">
                        </textarea>
                    </div>
                    <div class="rowBox rowBox--fat">
                        <div class="labelBox labelBox--unwidth">
                            Especificaciones
                        </div>
                    </div>
                    <div class="rowBox">
                        <select wire:model.defer="unit_id" name="family">
                            <option>Seleccione</option>
                            @foreach($units as $unit)
                                <option value="{{ $unit->id }}" >
                                    {{ $unit->name }} - {{ $unit->description }}
                                </option>
                            @endforeach
                        </select>
                        <div>
                            <label>
                                <input type="checkbox" name="skuy" wire:model.defer="skuy" value="1" checked>
                                Marque si sera parte del SKU
                            </label>
                        </div>
                        <button class="btn" wire:click="addUnit">
                            <i class="fa fa-save"></i>Agregar
                        </button>
                    </div>
                </div>
                <div class="dataBox dataBox--top dataBox--marginLeft">
                    <div class="rowBox rowBox--auto">
                        <table width="370px">
                            <thead>
                                <tr>
                                    <th>Unidad o especificación</th>
                                    <th>SKU</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($familyunits as $familyunit)
                                <tr>
                                    <td>{{ $familyunit->name }} - {{ $familyunit->description}}</td>
                                    <td>{{ $familyunit->pivot->skuy == 1 ? 'Si' : 'No'}}</td>
                                    <td><img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroyUnit({{ $family_id }}, {{ $familyunit->id }})"></td>
                                </tr>
                                @empty
                                <tr>
                                    <td>--</td>
                                    <td>--</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="rowBox rowBox--fat">
                        <div class="">
                            <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>Nombre de Familia</th>
                        <th>Descripcion</th>
                        <th></th>
                    </thead>
                    <tbody>
                        @forelse($data as $family)
                            @if(!$family->parent_id)
                                <tr>
                                    <td>
                                        {{ $family->name }}</td>
                                    <td>{{ $family->description }}</td>
                                    <td>
                                        <img src="{{ asset('/storage/images/edit.jpg') }}" wire:click="edit({{ $family->id }})">
                                        <img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroy({{ $family->id }})">
                                    </td>
                                </tr>
                                    @forelse($family->families as $subfamily)
                                    <tr>
                                        <td>
                                            ----{{ $subfamily->name }}</td>
                                        <td>{{ $subfamily->description }}</td>
                                        <td>
                                            <img src="{{ asset('/storage/images/edit.jpg') }}" wire:click="edit({{ $subfamily->id }})">
                                            <img src="{{ asset('/storage/images/trash.jpg') }}" wire:click="destroy({{ $subfamily->id }})">
                                        </td>
                                    </tr>
                                    @empty
                                    @endforelse
                            @endif
                        @empty
                        @endforelse
                    </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>
