@extends('layouts.app', ['title' => $instrument->name, 'titleIcon' => asset($instrument->image)])
@php $hasHelp = $instrument->hasHelp; @endphp
@section('content')
    <div class="container" x-data="xDataQuestions()">
        <h1>Descripción</h1>
        <p>{{$instrument->description}}</p>

        <div class="row mb-3">
            <div class="col-md-6 mt-1">
                <h1 class="mb-0">Listado de afirmaciones</h1>
            </div>
            <div class="col-md-6 text-center text-md-right mt-1">
                <button class="btn btn-primary" x-on:click="openCreateModal">
                    <i class="fa fa-plus"></i> Agregar una Nueva Afirmación
                </button>
            </div>
        </div>

        @forelse($instrument->questions as $question)
            <div class="border rounded p-3 mb-4">
                <h3 class="text-primary">{{$loop->iteration}}.</h3>
                <p> {!!$question->description!!}</p>

                @if($question->help)
                    <h4>Texto de ayuda</h4>
                    <p>{!!$question->help!!}</p>
                @endif

                @if($question->indicator)
                    <div class="row">
                        <div class="col-md-6">
                            <h4>Factor</h4>
                            <p>{{$question->indicator->factor->name}}</p>
                        </div>
                        <div class="col-md-6">
                            <h4>Indicador</h4>
                            <p>{{$question->indicator->name}}</p>
                        </div>
                    </div>
                @endif

                <button class="btn btn-sm btn-primary" x-on:click="openEditModal({
                                                           id: '{{$question->id}}',
                                                           description: '{{$question->description}}',
                                                           help: '{{$question->help}}',
                                                           pot_indicator_id: '{{$question->pot_indicator_id}}',
                                                           pot_instrument_id: '{{$question->pot_instrument_id}}',
                                                        })">
                    <i class="fa fa-edit"></i> Editar
                </button>

                <button class="btn btn-sm btn-danger"
                        onclick="if(confirm('¿Borrar el registro?')) $('#destroy-{{$question->id}}').submit()">
                    <i class="fa fa-trash"></i> Eliminar
                </button>
                <form action="{{route('admin.potential.questions.destroy', $question)}}"
                      method="post"
                      id="destroy-{{$question->id}}">
                    @csrf @method('delete')
                </form>
            </div>
        @empty
            <p>No hay afirmaciones para mostrar</p>
        @endforelse

        <a class="btn btn-secondary my-5" href="{{route('admin.potential.instruments.index')}}">
            <i class="fa fa-arrow-left"></i> Volver al índice
        </a>

        <div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="questionModalLabel">
                            <span x-text="createMode ? 'Crear Afirmación' : 'Editar Afirmación'"></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.questions.store')}}'
                                                        : '/admin/potential/questions/'+questionId"
                              method="post">
                            @csrf <template x-if="!createMode">@method('put')</template>

                            <input type="hidden" name="pot_instrument_id" value="{{$instrument->id}}">

                            <div class="form-group">
                                <label for="">Descripción de la afirmación</label>
                                <textarea name="description" id="description"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="" x-bind:class="{'d-none': !questionHasHelp}">
                                    Texto de ayuda
                                </label>
                                <textarea name="help"
                                          x-bind:class="{'d-none': !questionHasHelp}"
                                          x-bind:disabled="!questionHasHelp"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="">Indicador</label>
                                <select name="pot_indicator_id" id="pot_indicator_id" class="form-control" required>
                                    @foreach($indicators as $indicator)
                                        <option value="{{$indicator->id}}">{{$indicator->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <input type="submit" id="submitQuestionForm" 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="$('#submitQuestionForm').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 xDataQuestions() {
            return {
                createMode: false,
                questionId: null,
                questionHasHelp: @json($hasHelp),
                openEditModal(data) {
                    this.initEditors()

                    this.questionId = data.id

                    CKEDITOR.instances['description'].setData(data.description);
                    if(this.questionHasHelp) CKEDITOR.instances['help'].setData(data.help);
                    $('#pot_indicator_id').val(data.pot_indicator_id).change();

                    $('#questionModal').modal('show')
                    this.createMode = false
                },
                openCreateModal() {
                    this.initEditors()
                    this.resetData()
                    $('#questionModal').modal('show')
                    this.createMode = true
                },
                resetData() {
                    CKEDITOR.instances['description'].setData('');
                    if(this.questionHasHelp) CKEDITOR.instances['help'].setData('');
                    $('#pot_indicator_id').val('').change();
                },
                initEditors() {
                    if (!CKEDITOR.instances.hasOwnProperty('description')) {
                        CKEDITOR.replace('description', { height: 100 });
                        if(this.questionHasHelp) CKEDITOR.replace('help', { height: 200 });
                    }
                }
            }
        }
    </script>
@endpush