@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">Upload Foto</h6>
                <form method="POST" action="{{ route('FotoSave') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}
                     @if (Session::has('success'))
                        <div class="alert alert-success">
                            {{ Session::get('success') }}
                        </div>
                    @endif
                     @if (Session::has('danger'))
                        <div class="alert alert-danger">
                            {{ Session::get('danger') }}
                        </div>
                    @endif
                    @if ($data != '')
                    <input type="hidden" name="id" value="{{$data->id_foto}}">
                    @endif
                    <div class="row">
                        <div class="col-md-12">
                           

                            <div class="form-group">
                                <label class="form-control-label">Caption</label>
                                <input class="form-control judul" required type="text" required="" name="caption" @if (!empty($data)) value="{{$data->caption}}" @endif>
                            </div>
                            
                            <div class="form-group">
                                <label for="my-select">Album</label>
                                <select id="my-select" required class="form-control" name="album_id">
                                    <option value="">Pilih Album</option>
                                    @foreach ($album as $a )
                                    <option value="{{$a->id_album}}" @if(!empty($data)) @if($a->id_album==$data->album_id) selected @endif @endif>{{$a->nama_album}}</option>
                                        
                                    @endforeach
                                </select>
                            </div>
                           

                 
                            
                            <div class="form-group">
                                <label class="form-control-label" style='font-weight:bold;color:black'>Foto :</label>
                               @if (!empty($data)) 
                               <img src="{{url('resources/galeri/'.$data->slug_album.'/'.$data->foto)}}" width="400px" height="300px">
                             @endif
                                <div class='clearfix' style='padding-bottom:5px'></div>
                                <input type="file" class="upload"  name="gambar" accept="image/*" class="form-control input-sm col-md-7 col-xs-12" style='border-color:#4a9e3c;color:#4a9e3c'>
                               @if (!empty($data)) 
                                <small>* kosongi jika tidak ingin mengganti</small>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="py-3">
                        <a href="{{ route('manageFoto') }}" 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'
          });
      });
  };

  $( 'textarea#editor1' ).ckeditor({width:'100%', height: '150px', toolbar: [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: ['NewPage', 'Preview', 'Print', '-', 'Templates' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-'] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
        { name: 'tools', items: [ 'Maximize' ] },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        { name: 'styles', items: [ 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
    ]});

</script>
@stop