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

        <div class="row mb-3">
            <div class="col-lg-6 mt-1 d-flex align-items-center">
                <h1 class="mb-0">Listado de afirmaciones</h1>
            </div>
            <div class="col-lg-6 text-center text-lg-right">
                <button class="btn btn-primary mt-1" x-on:click="openCreateModal">
                    <i class="fa fa-plus"></i> Agregar una Nueva Afirmación
                </button>
                <!-- <br> -->
                <!-- <button class="btn btn&#45;outline&#45;dark mt&#45;1 mr&#45;2"> -->
                <!--     <i class="fa fa&#45;sort"></i> Ordenar afirmaciones -->
                <!-- </button> -->
            </div>
        </div>

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

                <div class="row">
                    <div class="col-md-4">
                        <h4>Nivel de desarrollo</h4>
                        <p>{{$question->developmentLevel->name}}</p>
                    </div>
                    <div class="col-md-4">
                        <h4>Indicador</h4>
                        <p>{{$question->indicator->name}}</p>
                    </div>
                    <div class="col-md-4">
                        <h4>Talento</h4>
                        <p>{{$question->talent->name}}</p>
                    </div>
                </div>

                <button class="btn btn-sm btn-primary" x-on:click="openEditModal({
                                                           id: '{{$question->id}}',
                                                           number: '{{$question->number}}',
                                                           description: '{{$question->description}}',
                                                           tal_development_level_id: '{{$question->tal_development_level_id}}',
                                                           tal_indicator_id: '{{$question->tal_indicator_id}}',
                                                           tal_talent_id: '{{$question->tal_talent_id}}',
                                                           tal_instrument_id: '{{$question->tal_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.talent.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.talent.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.talent.questions.store')}}'
                                                        : '/admin/talent/questions/'+entity.id"
                              method="post">
                            @csrf <template x-if="!createMode">@method('put')</template>

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

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

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="">Nivel de desarrollo</label>
                                        <select name="tal_development_level_id" class="form-control" required>
                                            @foreach($developmentLevels as $developmentLevel)
                                                <option value="{{$developmentLevel->id}}"
                                                        x-bind:selected="entity.tal_development_level_id == '{{$developmentLevel->id}}'">
                                                        {{$developmentLevel->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="">Indicador</label>
                                        <select id="tal_indicator_id"
                                                name="tal_indicator_id"
                                                class="form-control"
                                                required>
                                            <template x-for="indicator in indicators" x-key="indicator.id">
                                                <option x-bind:value="indicator.id">
                                                    <span x-text="indicator.name"></span>
                                                </option>
                                            </template>
                                            {{-- @foreach($indicators as $indicator) --}}
                                            {{--     <option value="{{$indicator->id}}" --}}
                                            {{--             x-bind:selected="entity.tal_indicator_id == '{{$indicator->id}}'"> --}}
                                            {{--             {{$indicator->name}} --}}
                                            {{--     </option> --}}
                                            {{-- @endforeach --}}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="">Talento</label>
                                        <select name="tal_talent_id" class="form-control" required>
                                            @foreach($talents as $talent)
                                                <option value="{{$talent->id}}"
                                                        x-bind:selected="entity.tal_talent_id == '{{$talent->id}}'">
                                                        {{$talent->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <input type="hidden" name="number" x-model="entity.number" required>
                                </div>
                            </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,
                instrumentId: @json($instrument->id),
                entity: {
                    id: null,
                    number: null,
                    description: null,
                    tal_development_level_id: null,
                    tal_indicator_id: null,
                    tal_talent_id: null,
                    tal_instrument_id: null,
                },
                factorId: @json($instrument->tal_factor_id),
                indicators: [],
                async openEditModal(data) {
                    await this.fetchIndicators()

                    this.initEditors()

                    this.entity.id = data.id
                    this.entity.number = data.number
                    this.entity.tal_development_level_id = data.tal_development_level_id
                    this.entity.tal_indicator_id = data.tal_indicator_id
                    this.entity.tal_talent_id = data.tal_talent_id
                    this.entity.tal_instrument_id = data.tal_instrument_id

                    setTimeout(()=>$('#tal_indicator_id').val(data.tal_indicator_id).change(),500)

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

                    $('#questionModal').modal('show')
                    this.createMode = false
                },
                async openCreateModal() {
                    await this.fetchIndicators()

                    this.getNextNumber()
                    this.initEditors()
                    this.resetData()
                    $('#questionModal').modal('show')
                    this.createMode = true
                },
                resetData() {
                    CKEDITOR.instances['description'].setData('');
                    this.entity.id = null
                    this.entity.number = null
                    this.entity.tal_development_level_id = null
                    this.entity.tal_indicator_id = null
                    this.entity.tal_talent_id = null
                    this.entity.tal_instrument_id = null
                },
                initEditors() {
                    if (!CKEDITOR.instances.hasOwnProperty('description')) {
                        CKEDITOR.replace('description', { height: 100 });
                    }
                },
                fetchIndicators() {
                    return axios.get('/api/talent-indicators/by-factor', {
                        params: { factorId: this.factorId }
                    }).then(res => {
                        if(res.data.status == 'success') {
                            this.indicators = res.data.data.indicators
                        }
                    }).catch(err => {
                        alert('Error al cargar los Indicadores')
                        console.log(err.response)
                    })
                },
                getNextNumber() {
                    axios.get('/api/talent/instruments/'+this.instrumentId+'/next-question-number')
                        .then(res => {
                            if (res.data.status == 'success') {
                                this.entity.number = res.data.data.nextNumber
                            }
                        }).catch(err => {
                            Feedback('error', 'Error al recuperar el siguiente número de afirmación')
                            console.log(err.response)
                        })
                }
            }
        }
    </script>
@endpush