@extends('layouts.backend')
@section('css')

@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">Daftar Ebook {{ $category->name }}</div>
  </div>
  <div class="col s12">
    <a class="waves-effect waves-light btn modal-trigger" href="#tambah">Tambah Ebook</a>
  </div>
  <div class="row">
    @foreach ($ebook as $data)
    <div class="col s12 m4">
      <div class="card">
        <div class="card-image">
          <img src="{{ asset($data->image) }}" alt="" style="width: 315px; height: 236px;">
        </div>
        <div class="card-action">
          <a href="{{ route('ebook.destroy', $data->id) }}" onclick="event.preventDefault(); document.getElementById('delete-form{{ $data->id }}').submit();">Delete Ebook</a>
          <form id="delete-form{{ $data->id }}" action="{{ route('ebook.destroy', $data->id) }}" method="post" style="display: none;">
            <input type="hidden" name="_method" value="delete" />
            {!! csrf_field() !!}
          </form>
        </div>
      </div>
    </div>
    @endforeach
  </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 Ebook {{ $category->name }}</h4>
      <div class="row">
        <form class="col s12" action="{{ route('storeebook') }}" method="Post">
          {{ csrf_field() }}
          <input type="hidden" name="category_ebooks_id" value="{{ $category->id }}">
          <div class="row">
           <div class="input-field col s6">
              <input placeholder="" type="text" class="validate" name="title" value="{{ old('title') }}" required>
              <label class="active">Nama Ebook</label>
               @if ($errors->has('title'))
                <span class="help-block">
                  <strong>{{ $errors->first('title') }}</strong>
                </span>
              @endif
            </div>
            <div class="input-field col s6">
              <input placeholder="" type="text" class="validate" name="url" value="{{ old('url') }}" required>
              <label class="active">Alamat Ebook</label>
               @if ($errors->has('url'))
                <span class="help-block">
                  <strong>{{ $errors->first('url') }}</strong>
                </span>
              @endif
            </div>
          </div>
          <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 Cover Ebook
                 </a>
               </span>
               <input id="thumbnail" class="form-control" type="text" name="image" readonly required>
              @if ($errors->has('image'))
                <span class="help-block">
                  <strong>{{ $errors->first('image') }}</strong>
                </span>
              @endif
              </div>
              <img id="holder" style="margin-top:15px;max-height:100px;">
            </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>
    <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