@section('estilos')
<link rel="stylesheet" href="{{asset('assets/js/plugins/select2/css/select2.min.css')}}">
@endsection
<div>
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center pt-0">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    Accesorios
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Lista de manuales, tiempos y características de los complementos.
                </h2>
            </div>
            <nav aria-label="breadcrumb">
                <div wire:loading wire:target="nuevoAccesorio" class="mt-2">
                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                    </div>
                    <span class="text-muted fs-md">Creando accesorio...</span>
                </div>
                <div wire:loading.remove  wire:target="nuevoAccesorio">
                    <button type="button" class="btn btn-success push" data-bs-toggle="modal" data-bs-target="#modal-block-normal"><i class="fa fa-plus"></i> Nuevo accesorio</button>
                </div>
            </nav>
        </div>
    </div>

    <div class="content pt-0">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="input-group">
                    <input type="text" wire:model="search" class="form-control form-control-lg" placeholder="Buscar accesorio...">
                </div>
            </div>
        </div>
    </div>

    <div class="content content-boxed pb-6">
        <div class="row">
            @forelse($accesorios as $accesorio)
            <div class="col-sm-6 col-xl-4">
                <div class="block block-rounded mb-4">
                    <div class="block-content block-content-full text-center fs-sm">
                        <img class="img-avatar img-avatar96 img-avatar-thumb" src="{{asset('assets/media/avatars/avatar12.jpg')}}" alt="">
                        <a class="text-dark"><h5 class="my-2">{{$accesorio['name']}}</h5></a>
                        <small class="text-info">{{$accesorio['category']}}</small>
                    </div>
                    <div class="block-content block-content-full bg-body-light">
                        <div class="row justify-content-end">
                            <div class="col-auto">
                                <a class="btn btn-sm btn-primary mb-0" href="{{asset('/apl/accesorios/'.$accesorio['id'])}}" wire:click="abrirModal({{$accesorio['id']}})">Editar</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center">
                    <span>No hay ningún accesorio :(</span>
                </div>
            </div>
            @endforelse
            {{ $accesorios->links() }}
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-normal" tabindex="-1" role="dialog" aria-labelledby="modal-block-normal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-rounded block-transparent mb-0">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Nuevo accesorio</h3>
                        <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <div class="row">

                            <div class="col-12">
                                <label>Selecciona una imagen del accesorio</label>
                                <div class="mb-4">
                                    <div class="input-group">
                                        <input type="file" class="form-control form-control-alt" wire:model.defer="url_image">
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <div class="input-group">
                                      <span class="input-group-text input-group-text-alt">Nombre <span class="text-danger">*</span></span>
                                      <input type="text" class="form-control form-control-alt @error('nombre') is-invalid @enderror" wire:model="nombre">
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <div class="input-group">
                                      <span class="input-group-text input-group-text-alt">Referencia <span class="text-danger">*</span></span>
                                      <input type="text" class="form-control form-control-alt @error('category') is-invalid @enderror" wire:model="category">
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="time">
                                    <label for="example-text-input-floating">Aproximado por instalación (en minutos)</label>
                                </div>
                            </div>
                            <div class="mb-4">
                                <span class="text-sm text-danger"><i class="fa fa-fw fa-circle-exclamation"></i> Terminando este registro, deberás colocar que herramientas y dispositivos se necesitan para este accesorio.</span>
                            </div>
                            <div class="col-12" wire:ignore>
                                <label for="example-text">Manual o instructivo del accesorio</label>
                                <div class="mb-4">
                                    <textarea id="js-ckeditor" name="ckeditor" wire:model.defer="manual"></textarea>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="url_video">
                                    <label for="example-text-input-floating">URL de video</label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="block-content block-content-full text-end bg-body">
                        <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" wire:click="nuevoAccesorio">Crear</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script src="{{asset('assets/js/lib/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        $(document).ready(function() {

            ClassicEditor
            .create(document.querySelector('#js-ckeditor'))
            .then(editor => {
                editor.model.document.on('change:data', () => {
                    @this.set('manual', editor.getData());
                })
            })
            .catch(error => {
                console.error(error);
            });

            $('.herramientas-select').select2();
            $('.herramientas-select').on('change', function (e) {
                var data = $('.herramientas-select').select2("val");
                @this.set('tools', data);
            });
        });
    });

    window.addEventListener('swal', event => {
        Swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.type,
            timer: event.detail.timer,
            showConfirmButton: event.detail.showConfirmButton,
        });
    });

    window.addEventListener('modalAccesoryAgain', event => {
        $('#modal-block-normal').modal('show');
    });

</script>
@endsection