@extends('layouts.backend')
@section('css')
{{-- expr --}}
@endsection

@section('js')
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script src="{{ asset('/vendor/laravel-filemanager/js/lfm.js') }}"></script>
@endsection

@section('content')
  <div class="col s12">
    <div class="page-title">Ekskul</div>
  </div>
  <div class="col s12">
    <a href="#tambah" class="modal-trigger waves-effect waves-light btn indigo m-b-xs">Tambah Ekskul</a>
    <div class="card">
      <div class="card-content">
        <br>
        <table class="responsive-table">
          <thead>
            <tr>
              <th data-field="title">Nama</th>
              <th data-field="title">Deskripsi</th>
              <th data-field="action">Action</th>
              <th data-field="action"></th>
            </tr>
          </thead>
          <tbody>
            @foreach ($ekskul as $data)
            <tr>
                <td>{{ $data->nama }}</td>
                <td>{!! str_limit(strip_tags($data->deskripsi), $limit = 100, $end = '...') !!}</td>
              <td>
                <a class="waves-effect waves-light btn modal-trigger" href="{{ route('ekskul.edit', $data->id) }}"><i class="material-icons left">cloud</i>Edit</a>
              </td>
              <td>
                <a class="waves-effect waves-light btn red m-b-xs" href="{{ route('ekskul.destroy', $data->id) }}" onclick="event.preventDefault(); document.getElementById('delete-form{{ $data->id }}').submit();">Hapus</a>
                <form id="delete-form{{ $data->id }}" action="{{ route('ekskul.destroy', $data->id) }}" method="post" style="display: none;">
                  <input type="hidden" name="_method" value="delete" />
                  {!! csrf_field() !!}
                </form>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Add Modal Structure -->
  <div id="tambah" class="modal modal-fixed-footer" style="width: 75% !important ; height: 75% !important ;">
    <div class="modal-content">
      <h4>Tambah ekskul</h4>
      <form class="col s12" action="{{ route('ekskul.store') }}" method="Post">
        {{ csrf_field() }}
        <div class="row">
          <div class="col s12">
            <div class="file-field input-field">
              <span class="input-group-btn">
               <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
                 <i class="fa fa-picture-o"></i> Pilih Foto
               </a>
             </span>
             <input id="thumbnail" class="form-control" type="text" name="image" readonly required>
            </div>
            <img id="holder" style="margin-top:15px;max-height:100px;">
          </div>
        </div>
        <div class="row">
          <div class="input-field col s6">
            <input placeholder="" type="text" class="validate" name="nama" value="{{ old('nama') }}" required>
            <label class="active">Nama</label>
             @if ($errors->has('nama'))
              <span class="help-block">
                <strong>{{ $errors->first('nama') }}</strong>
              </span>
            @endif
          </div>
          <div class="input-field col s6">
            <input placeholder="" type="text" class="validate" name="deskripsi" value="{{ old('deskripsi') }}" required>
            <label class="active">Deskripsi Singkat</label>
             @if ($errors->has('deskripsi'))
              <span class="help-block">
                <strong>{{ $errors->first('deskripsi') }}</strong>
              </span>
            @endif
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <button class="waves-effect waves-light btn indigo m-b-xs">Simpan</abutton>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
    </div>
  </div>
@endsection
@push('scripts')
  <script>
    var domain = "";
    $('#lfm').filemanager('image', {prefix: domain});
    var editor_config = {
      path_absolute : "/",
      selector: "textarea.my-editor",
      plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
      ],
      toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
      relative_urls: false,
      file_browser_callback : function(field_name, url, type, win) {
        var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
        var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

        var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
        if (type == 'image') {
          cmsURL = cmsURL + "&type=Images";
        } else {
          cmsURL = cmsURL + "&type=Files";
        }

        tinyMCE.activeEditor.windowManager.open({
          file : cmsURL,
          title : 'Filemanager',
          width : x * 0.8,
          height : y * 0.8,
          resizable : "yes",
          close_previous : "no"
        });
      }
    };

    tinymce.init(editor_config);
  </script>
@endpush