@include('popper::assets')

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap4.min.css">
@stop
<div class="modal"  @if ($showAddTipoDispositivo) style="display:block" @endif>

    <div class="modal-dialog modal-xl "  role="document">
        <div class="modal-content" >
                <div class="modal-header">
                    <h5 class="modal-title">Tipo de dispositivos</h5>
                    <button wire:click="close" type="button" class="btn-outline-danger" data-dismiss="modal" aria-label="Close"><span @popper(Cerrar)><i class="bi bi-x"></i></span>
                    </button>
                </div>

                <div class="card-body card-outline card-primary">
                    <table class="table table-striped" id="botonmas">
                        <thead >
                            <tr>
                                <th><span @popper(Ingrese codigo de bootstrap)>Icono </span><a @popper(Link página de iconos) target="_blank" href="https://icons.getbootstrap.com/"><i class="bi bi-bootstrap-fill"></i></a></th>
                                <th>Nombre</th>
                                <th>Categoría</th>
                                <th><span @popper(Selecione si el dispositivo tiene componentes extras)>Req. compo.</span></th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <thead>
                            <tr>

                                <form wire:submit.prevent="saveTipoDispositivo">
                                <td><input type="text" class="form-control" placeholder="Ej: <i class='bi bi-1-circle'></i>" wire:model.lazy="iconotipodispositivo">
                                    @error('iconotipodispositivo') <span class="text-danger">{{ $message }}</span> @enderror
                                </td>
                                <td>
                                    <input type="text" class="form-control" placeholder="Nombre tipo de dispositivo" wire:model.lazy="nombretipodispositivo">
                                    @error('nombretipodispositivo') <span class="text-danger">{{ $message }}</span> @enderror
                                </td>
                                <td>
                                    <div x-data="{
                                        open: false,
                                        get isOpen() { return this.open },
                                        toggle() { this.open = !this.open },
                                    }">
                                        <div class="input-group flex-nowrap">
                                        <span class="input-group-text btn-outline-success mr-1" style="cursor: pointer" id="addon-wrapping" theme="success" icon="fas fa-plus" @click="toggle()"><i class="bi bi-plus-circle-fill "></i></span>
                                            <select wire:model="categoriatipodispositivo" class="form-control" placeholder="seleccione la categoria">
                                                <option selected>Seleccione la categoria</option>
                                                @foreach ($categorias as $categoria )
                                                <option value="{{ ucwords($categoria->name) }}"> {{ ucwords($categoria->name) }} </option>
                                                @endforeach
                                        </select>
                                        @error('categoriatipodispositivo') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                        <div x-show="isOpen">
                                        <input type="text" class="form-control mt-2" placeholder="Nueva categoría" wire:keydown.enter="guardarCategoria" wire:model.lazy="nuevacategoria">
                                        </div>
                                    </div>
                                </td>

                                <td><select wire:model="requirecomponentetipodispositivo" class="form-control">
                                        <option selected></option>
                                        <option value="0"> No </option>
                                        <option value="1">Si</option>
                                    </select>
                                    @error('requirecomponentetipodispositivo') <span class="text-danger">{{ $message }}</span> @enderror
                                </td>
                                <td><button class="btn btn-primary" type="button" wire:click="saveTipoDispositivo">Guardar</button>
                            </form>
                            <tr>
                        </thead>
                        <tbody>
                            @foreach($tipodispositivos as $dispositivo)
                            <tr>
                                <td>@if($dispositivo->icon != null ) {!! $dispositivo->icon !!} @endif</td>
                                <td>{{ $dispositivo->name}}</td>
                                <td>{{ $dispositivo->category}}</td>
                                <td>@if($dispositivo->req_add_componente == '1') <span>SI</span> @else <span>NO</span> @endif</td>
                                <td></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $tipodispositivos->links() }}
                </div>
        </div>
    </div>
</div>
@section('js')
    <script> console.log('Hi!'); </script>
    {{-- <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap4.min.js"></script>
    <script>
        $('#botonmas').DataTable({
            responsive: true,
            autowidth:false,
            "language": {
            "lengthMenu": "Mostrar  _MENU_ registos por página",
            "zeroRecords": "Nada encontrado - disculpa",
            "info": "Mostrando la página _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(Filtrado de  _MAX_ registros totales )",
            "search": "Buscar",
            'paginate':{
                'next': 'Siguiente',
                'previous': 'Anterior'
            }
        }
        });
    </script> --}}

@stop