@extends('layouts.backend')

@section('title', 'Opciones')

@section('section', 'Opciones')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                {!! Form::open([
                    'class' => 'options-form',
                    'files' => true
                ]) !!}
                <div class="card-header card-header-primary">
                    <div class="nav-tabs-navigation">
                        <div class="nav-tabs-wrapper">
                            <ul class="nav nav-tabs" data-tabs="tabs">
                                @foreach($output as $group)
                                    @if($group->options->count())
                                        <li class="nav-item">
                                            <a class="nav-link {{ $loop->first ? 'active' : null }}" data-toggle="tab" href="#tab-{{ $loop->iteration }}">{{ $group->name }}</a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        @foreach($output as $group)
                            <div class="tab-pane {{ $loop->first ? 'active' : null }} sortable" id="tab-{{ $loop->iteration }}">
                                @foreach($group->options as $option)
                                    <div class="row" id="post_{{ $option->id }}">
                                        @include('backend.options.'.$option->input)
                                        <div class="col-sm-1 ml-auto">
                                            <a href="#" class="btn btn-link btn-primary btn-just-icon order handle" data-id="{{ $category->id }}"><i class="material-icons">drag_indicator</i></a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-footer">
                    {!! Form::submit('Guardar', ['class' => 'btn btn-success']) !!}
                </div>
                {!! Form::close() !!}
            </div>
        </div>
        <!-- end col-md-12 -->
    </div>
    <!-- end row -->

@endsection

@section('scripts')
    <script>
        $(function() {
            $('.sortable').sortable({
                handle: '.handle',
                update: function (event, ui) {
                    var data = $(this).sortable('serialize');
                    $.post('{{ route('backend.options.order') }}', data);
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].destroy();
                    }
                    $('.ckeditor').each(function() {
                        CKEDITOR.replace($(this).attr('id'), {
                            bodyClass: 'ckeditor'
                        });
                    });
                }
            });

            $('form').on('submit', function() {
                var $this = $(this);
                var form = $($this)[0];
                var formData = new FormData(form);
                $.ajax({
                    method: 'POST',
                    url: $this.attr('action'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        Swal({
                            title: 'Listo',
                            text: response,
                            type: 'success',
                            confirmButtonText: 'Aceptar',
                            timer: 3000
                        });
                    }
                }, 1000);
                return false;
            });
        });
    </script>
@endsection