@extends('layouts.app', ['title' => 'Potencial de Aprehendizaje', 'titleIcon' => asset('images/icons/Icono_1_3.png')])
@section('content')
    <div class="container" x-data="xDataInstruments()">

        <div class="row">
            <div class="col-md-6 text-center text-md-left">
                <h1>Listado de Instrumentos</h1>
            </div>
            <div class="col-md-6 text-center text-md-right">
                <a href="javascript:void(0)" class="btn btn-primary" x-on:click="openCreateModal">
                    <i class="fa fa-plus"></i> Agregar Nuevo Instrumento
                </a>
            </div>
        </div>

        <div class="row">
            @forelse($instruments as $instrument)
                <div class="col-lg-4 p-3">
                    <div class="rounded border">
                        <div class="rounded-top bg-default pr-3 pl-2 py-2 d-flex align-items-center text-white">
                            <img src="{{asset($instrument->image)}}" width="80">
                            <h3 class="text-white">{{$instrument->name}}</h3>
                        </div>
                        <div class="px-3 py-2">
                            <small>{{$instrument->description}}</small>
                        </div>
                        <div class="px-3 py-3 text-right">
                            <a href="{{route('admin.potential.instruments.show', $instrument)}}"
                               class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-eye"></i> Ver
                            </a>
                            <div class="btn-group dropleft">
                                <button type="button" class="btn btn-sm btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item"
                                       href="#"
                                       x-on:click.prevent="openEditModal({
                                            id: '{{$instrument->id}}',
                                            name: '{{$instrument->name}}',
                                            description: '{{$instrument->description}}',
                                            instructions: `{{$instrument->instructions}}`,
                                            image: '{{$instrument->image}}',
                                            options_quantity: '{{$instrument->options_quantity}}',
                                            pot_population_id: '{{$instrument->pot_population_id}}',
                                            pot_source_id: '{{$instrument->pot_source_id}}',
                                       })">
                                        <i class="fa fa-xs mt--2 fa-edit"></i>Editar
                                    </a>
                                    <a class="dropdown-item"
                                       href="javascript:void(0)"
                                       onclick="if(confirm('¿Borrar este instrumento?')) $('#destroy-{{$instrument->id}}').submit()">
                                        <i class="fa fa-xs mt--2 fa-trash"></i> Borrar
                                    </a>
                                    <form action="{{route('admin.potential.instruments.destroy', $instrument)}}"
                                          method="post"
                                          id="destroy-{{$instrument->id}}">
                                        @csrf @method('delete')
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <p>No hay instrumentos para mostrar</p>
            @endforelse
        </div>

        <div class="modal fade" id="instrumentModal" tabindex="-1" role="dialog" aria-labelledby="instrumentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="instrumentModalLabel">
                            <span x-text="createMode ? 'Crear Instrumento' : 'Editar Instrumento'"></span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form x-bind:action="createMode ? '{{route('admin.potential.instruments.store')}}'
                                                        : '/admin/potential/instruments/'+entity?.id"
                              method="post"
                              enctype="multipart/form-data">
                            @csrf <template x-if="!createMode">@method('put')</template>

                            <div class="form-group">
                                <label for="">Nombre</label>
                                <textarea class="form-control"
                                          name="name"
                                          cols="30"
                                          rows="2"
                                          x-model="entity.name"
                                          required></textarea>
                            </div>

                            <div class="form-group">
                                <label for="">Descripción</label>
                                <textarea class="form-control"
                                          name="description"
                                          cols="30"
                                          rows="3"
                                          x-model="entity.description"
                                          required></textarea>
                            </div>

                            <div class="form-group">
                                <label for="">Instrucciones</label>
                                <textarea class="form-control"
                                          name="instructions"
                                          id="instructions"
                                          x-model="entity.instructions"
                                          required></textarea>
                            </div>

                            <div class="form-group">
                                <label for="">Población</label>
                                <select name="pot_population_id" class="form-control" required>
                                    @foreach($populations as $population)
                                        <option value="{{$population->id}}"
                                                x-bind:selected="entity.pot_population_id == '{{$population->id}}'">
                                            {{$population->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="">Fuente</label>
                                <select name="pot_source_id" class="form-control" required>
                                    @foreach($sources as $source)
                                        <option value="{{$source->id}}"
                                                x-bind:selected="entity.pot_source_id == '{{$source->id}}'">
                                            {{$source->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="">Cantidad de opciones de respuesta</label>
                                        <input class="form-control"
                                               type="number"
                                               min="1"
                                               name="options_quantity"
                                               x-model="entity.options_quantity"
                                               required/>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group" id="input-image">
                                        <label for="">Imagen</label>
                                        <div class="custom-file">
                                            <input type="file"
                                                   class="custom-file-input"
                                                   name="image"
                                                   id="image"
                                                   x-on:change="handleImageInputChange"
                                                   accept=".jpg,.jpeg,.png"
                                                   id="input-image">
                                            <label class="custom-file-label overflow-hidden" for="customFile">
                                                <span x-text="imageInputText"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <input type="submit" id="submitInstrumentForm" class="d-none">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" x-on:click="$('#submitInstrumentForm').click()">
                            <i class="fa fa-save"></i> Guardar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <script src="{{asset('js/ckeditor/ckeditor.js')}}"></script>
@endpush
@push('js')
    <script>
        function xDataInstruments() {
            return {
                createMode: false,
                entity: {
                    id: null,
                    name: null,
                    description: null,
                    instructions: null,
                    options_quantity: 4,
                    pot_population_id: null,
                    pot_source_id: null,
                },
                imageInputText: 'Seleccione una imagen',
                openEditModal(data) {
                    this.initEditors()

                    this.entity.id = data.id
                    this.entity.name = data.name
                    this.entity.instructions = data.instructions
                    this.entity.description = data.description
                    this.entity.options_quantity = data.options_quantity
                    this.entity.pot_population_id = data.pot_population_id
                    this.entity.pot_source_id = data.pot_source_id

                    CKEDITOR.instances['instructions'].setData(data.instructions);

                    $('#instrumentModal').modal('show')
                    this.createMode = false
                },
                openCreateModal() {
                    this.initEditors()
                    this.resetData()
                    $('#instrumentModal').modal('show')
                    this.createMode = true
                },
                resetData() {
                    CKEDITOR.instances['instructions'].setData('');
                    this.entity.id = null
                    this.entity.name = null
                    this.entity.description = null
                    this.entity.instructions = null
                    this.entity.options_quantity = 4
                    this.entity.pot_population_id = null
                    this.entity.pot_source_id = null

                    $('#image').val(null)
                    this.imageInputText = 'Seleccione una imagen'
                },
                handleImageInputChange(ev) {
                    this.imageInputText = ev.target.value ? ev.target.value.substr(12) : 'Seleccione una imagen'
                },
                initEditors() {
                    if (!CKEDITOR.instances.hasOwnProperty('instructions')) {
                        CKEDITOR.replace('instructions', { height: 150 });
                        CKEDITOR.instances['instructions'].on( 'required', function( evt ) {
                            alert( 'El campo "Instrucciones" es obligatorio.' );
                            evt.cancel();
                        });
                    }
                },
            }
        }
    </script>
@endpush