@extends('layouts.web')

@section('page-title', trans('app.dashboard'))

@section('content')

  <div class="form-group row add">
    <div class="col-md-12">
      <h1>NOTICIAS <small>Gestión Territorial</small></h1>
    </div>
    <div class="col-md-12">
      <button type="button" data-toggle="modal" data-target="#create-item" class="btn btn-primary">
        Create New Post
      </button>
    </div>
  </div>



  <div class="row">
    <div class="table-responsive">
      <table class="table table-borderless">
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Actions</th>
        </tr>
        <tr v-for="item in items">
          <td>@{{ item.title }}</td>
          <td>@{{{ item.description }}}</td>
          <td>
            <button class="edit-modal btn btn-warning" @click.prevent="editItem(item)">
              <span class="glyphicon glyphicon-edit"></span> Edit
            </button>
            <button class="edit-modal btn btn-danger" @click.prevent="deleteItem(item)">
              <span class="glyphicon glyphicon-trash"></span> Delete
            </button>
          </td>
        </tr>

      </table>
    </div>
  </div>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li v-if="pagination.current_page > 1" >
        <a href="#" aria-label="Previous" class="page-link" @click.prevent="changePage(pagination.current_page - 1)">
          <span aria-hidden="true">«</span>
        </a>
      </li>
      <li v-for="page in pagesNumber" v-bind:class="page-item [ page == isActived ? 'active' : '] ">
        <a href="#" @click.prevent="changePage(page)" class="page-link">
          @{{ page }}
        </a>
      </li>
      <li v-if="pagination.current_page < pagination.last_page">
        <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)" class="page-link">
          <span aria-hidden="true">»</span>
        </a>
      </li>
    </ul>
  </nav>
  <!-- Create Item Modal -->
  <div class="modal fade" id="create-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Create New Post</h4>
        </div>
        <div class="modal-body">
          <form id="createForm" method="post" enctype="multipart/form-data"  v-on:submit.prevent="createItem">
          {{-- <form id="createForm" method="post" enctype="multipart/form-data" action ="vueitems" > --}}
            {{ csrf_field() }}
            <div class="form-group">
              <label for="title">Título:</label>
              <input type="text" name="title" class="form-control" v-model="newItem.title" />
              <span v-if="formErrors['title']" class="error text-danger">
                @{{ formErrors['title'] }}
              </span>
            </div>
            <div class="form-group">
              <label for="title">Descripción:</label>
              <textarea name="description" class="ckeditor form-control"   id="descriptionCreate" class="form-control" v-editor v-model="description">
              </textarea>
              <span v-if="formErrors['description']" class="error text-danger">
                @{{ formErrors['description'] }}
              </span>
            </div>
            <div class="form-group">
              <button id="showValues" text="">Show textarea values</button>
              <div id="values"></div>
              <button type="submit" class="waves-effect waves-light btn-large" id="crear"><i class="material-icons left fa fa-floppy-o"></i> GUARDAR </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
<!-- Edit Item Modal -->
<div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Edit Blog Post</h4>
      </div>
      <div class="modal-body">
        <form method="post" enctype="multipart/form-data" v-on:submit.prevent="updateItem(fillItem.id)">
          <div class="form-group">
            <label for="title">Título:</label>
            <input type="text" name="title" class="form-control ckeditor" v-model="fillItem.title" />
            <span v-if="formErrorsUpdate['title']" class="error text-danger">
              @{{ formErrorsUpdate['title'] }}
            </span>
          </div>

          <div class="form-group">
            <label for="title">Descripción:</label>
            <textarea name="description" id="descriptionEdit" class="form-control"  v-tinymce-editor="content" v-model="fillItem.description">
            </textarea>

            {{-- <div id="descriptionDiv" class="form-control">@{{ fillItem.description}}</div> --}}

            <span v-if="formErrorsUpdate['description']" class="error text-danger">
              @{{ formErrorsUpdate['description'] }}
            </span>
          </div>

          {{-- <div id="tinymce-form">
          <fieldset class="form-group">
              <textarea
                      class="form-control"
                      id="editor"
                      rows="10"
                      name="description"
                      v-model="fillItem.description"
                      placeholder="Content"
                      v-tinymce-editor="content">
              </textarea>
          </fieldset>
          </div> --}}

          <div class="form-group">
            <button type="submit" class="waves-effect waves-light btn-large"><i class="material-icons left fa fa-floppy-o"></i> GUARDAR</button>
            {{-- <pre>@{{ fillItem.description}}</pre> --}}
          </div>

        </form>
      </div>
    </div>
  </div>
</div>

{{-- <pre> @{{items|json}}</pre> --}}


@stop

@section('scripts')

  <script type="text/javascript">
// CKEDITOR.replace( 'descriptionEdit' );

 //   var editor = CKEDITOR.replace( 'descriptionEdit' );
 //   editor.on( 'change', function( evt ) {
 //       console.log(evt.editor.getData() );
 // $('#descriptionEdit').val(evt.editor.getData());
 //   });
 // // CKEDITOR.instances.descriptionEdit.setData( datos  );

  </script>

<script type="text/javascript">

  tinymce.init({
    twoWay: true,
    selector : "#descriptionEdit",
    plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste"],
    toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"

  });

</script>

  {!! HTML::script('assets/js/config.js') !!}
  {!! HTML::script('assets/js/vueScript.js') !!}

@stop