@extends('admin.component.layout')
@section('extended_css')
<link rel="stylesheet" href="{{ url('/') }}/tag_input/bootstrap-tagsinput.css">
<script>
    var BASE_URL = "{{ url('/') }}/";
</script>
@stop
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Form Profil</h6>
                <form method="POST" action="{{ route('TentangSave') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                     @if (Session::has('success'))
                        <div class="alert alert-success">
                            {{ Session::get('success') }}
                        </div>
                    @endif
                    @if ($data != '')
                    <input type="hidden" name="id" value="{{$data->id_menu}}">
                    @endif
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Judul</label>
                                <input class="form-control judul" type="text" required="" name="judul_menu" @if (!empty($data)) value="{{$data->judul_menu}}" @endif>
                            </div>

                            <div class="form-group">
                                <label for="basic-url">Permalink</label>
                                <div class="input-group mb-3">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text" id="basic-addon3">{{ url('p/') }}/</span>
                                  </div>
                                  <input type="text" class="form-control permalink" id="basic-url" aria-describedby="basic-addon3" name="slug" @if (!empty($data)) value="{{$data->slug}}" @endif placeholder="Permalink">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-control-label">Isi</label>
                                <textarea class="ckeditor" rows="5" name="content" id="ckeditor" required>@if ($data != '') {{$data->content}} @endif</textarea>

                            </div>

                            <div class="form-group" id="tag">
                                <label class="form-control-label">Tags</label>
                                <div class="col-lg-12 col-md-12">
                                    <input type="text" data-role="tagsinput" id="category" placeholder="pisahkan dengan koma (,)" @if (!empty($data)) value="{{$data->tags}}" @endif name="hastag">
                                </div>
                            </div> 
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('Tentang') }}" class="btn btn-warning btn-cancel"><i class="fa fa-chevron-left fs-14 m-r-5"></i> Kembali</a>
                        <button type="submit" class="btn btn-primary btn-submit float-right">Simpan <i class="fa fa-save fs-14 m-l-5"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@stop
@section('extended_js')

<script src="{{ url('/') }}/tag_input/bootstrap-tagsinput.js"></script>
<script src="{{ url('/') }}/tag_input/bootstrap3-typeahead.js"></script>
<script type="text/javascript" src="{{ url('resources/ckeditor/ckeditor.js') }}"></script>

{{-- <script src="{!! url('assets/ckeditor1/ckeditor.js') !!}"></script> --}}
{{-- <script src="{!! url('assets/ckeditor1/adapters/jquery.js') !!}"></script> --}}
<script type="text/javascript">
  var onLoad = (function() {
      $('#panel-form').animateCss('bounceInUp');
  })();
    

    $('.permalink').on('click',function(){
        var desired = $('.judul').val().replace(/[^\w\s]/gi, '')
        var slug = desired.split(' ').join('-');
        $('.permalink').val(slug.toLowerCase());
    });

  function loadFilePhoto(event) {
      var image = URL.createObjectURL(event.target.files[0]);
      $('#preview-photo').fadeOut(function(){
          $(this).attr('src', image).fadeIn().css({
              '-webkit-animation' : 'showSlowlyElement 700ms',
              'animation'         : 'showSlowlyElement 700ms'
          });
      });
  };


  CKEDITOR.env.isCompatible = true;
</script>
@stop