@extends('layouts.admin')
@section('title', 'Berita Terkini')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<style type="text/css">
   img{
      width: 100%;
   }
</style>
<style>
</style>
@endsection
@section('content')
<section class="content">
   <div class="d-flex flex-wrap justify-content-between">
      <h4>Form Berita Terkini</h4>
      <div class="tools">
         <a type="button" class="btn btn-outline-success btn-sm pull-right" href="{{route('news_form')}}"><i class="fas fa-plus"></i> Buat Baru</a>
         <button type="button" class="btn btn-outline-primary btn-sm pull-right" onclick="$('#formData').submit();"><i class="fas fa-save"></i> Publish</button>
      </div>
   </div>
   @if ($message = Session::get('success'))
   <div class="alert alert-success">
      <p>{{ $message }}</p>
   </div>
   @endif
   @if ($message = Session::get('error'))
   <div class="alert alert-error">
      <p>{{ $message }}</p>
   </div>
   @endif
   <form id="formData" style="min-height: 400px" method="POST" action="javascript:void(0)" enctype="multipart/form-data" autocomplete="off">
      <div class="row g-2 my-2">
         <div class="col-lg-9 col-md-12">
            <div class="card">
               <div class="card-body">
                  <input type="hidden" name="berita_id" id="berita_id" value="{{ isset($news)?$news->berita_id:'' }}">
                  @csrf
                  <div class="row g-2">
                     <div class="col-md-12">
                        <label for="judul" class="form-label">Judul <span style="color:red">*</span></label>
                        <input type="text" name="judul" id="judul" class="form-control" value="{{isset($news)?$news->berita_judul:''}}">
                        @error('judul')
                        <span class="invalid-feedback" role="alert">
                           <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                     </div>
                     <div class="col-md-6">
                        <label for="tanggal" class="form-label">Tanggal</label>
                        <input type="datetime-local" name="tanggal" id="tanggal" class="form-control" value="{{isset($news)?$news->published_at:''}}" max="{{date('Y-m-d H:i:s')}}">
                     </div>
                     <div class="col-md-6">
                        <label for="tags" class="form-label">Tags</label>
                        <input type="text" name="tags" id="tags" class="form-control" value="{{isset($news)?$news->berita_tags:''}}" style="text-transform: lowercase;">
                        @error('tags')
                        <span class="invalid-feedback" role="alert">
                           <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                     </div>
                     <div class="col-md-12">
                        <label for="deskripsi" class="form-label">Deskripsi <span style="color:red">*</span></label>
                        <textarea type="text" name="deskripsi" id="deskripsi" class="form-control" rows="4" style="width:100%">{{isset($news)?$news->berita_deskripsi:''}}</textarea>
                        @error('deskripsi')
                        <span class="invalid-feedback" role="alert">
                           <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                     </div>
                     <div class="col-md-12">
                        <div class="form-check form-switch">
                           <input class="form-check-input" type="checkbox" role="switch" name="publish" id="publish"  >
                           <label class="form-check-label" for="publish">Publish</label>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-lg-3 col-md-12">
            <div class="card">
               <div class="m-2">
                  <div class="row gap-2">
                     <div class="col-12">
                        <div>
                           <label class="col-12 control-label">Gambar Cover <span style="color:red">*</span></label>
                           <div class="col-sm-12">
                              <input type="file" id="foto" name="foto" accept="image/png, image/gif, image/jpeg"/>
                           </div>
                           @error('foto')
                           <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                           </span>
                           @enderror
                        </div>
                     </div>
                     <div class="col-12">
                        <img data-fancybox id="previewFoto" class="rounded shadow-sm" src="{{isset($news)?URL::asset(config('app.path_images').'/news').'/'.$news->berita_foto:''}}" style="max-height: 400px; max-width: 300px"/>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="sticky-bottom d-grid float-lg-end">
         <button type="submit" class="btn btn-primary btn-sm shadow"><i class="fas fa-save"></i> Publish</button>
      </div>
   </form>
</section>
@endsection
@section("javascript")
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
   /*Data belum disimpan, tetap reload halaman?*/
   var changed = false;
   var form = document.getElementById("formData");
   form.addEventListener("change", function () {
      changed = true;
   });
   window.onbeforeunload = function (event){
      if (changed) {
         return '';
      }
   };
   var save_method;
   var berita_id = '{{ isset($news)?$news->berita_id:'' }}';
   $(document).ready( function () {
      $.ajaxSetup({
         headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
         }
      });
      save_method = 'add';      /*if(save_method=="add"){
      $("#foto").attr('required', 'required');
      }else{
      $("#foto").removeAttr('required');
      }*/
   });
   $("#tags").on('keydown',function(e) {
      if (e.code === "Space") {
         var hashTag = addHashtag($("#tags").val());
         $("#tags").val(hashTag);
      }
   });
   $("#tags").on('change',function(e) {
      var hashTag = addHashtag($("#tags").val());
      $("#tags").val(hashTag);
   });
   function addHashtag(str) {
      return str.split(' ').map(word => {
         if (word.startsWith('#')) {
            return word;
         } else {
            return '#' + word;
         }
      }).join(' ');
   }
   $('#deskripsi').summernote({
      placeholder: 'Write here...',
      codeviewFilter: false,
      codeviewIframeFilter: true,
      height: 300,
      minHeight: null,
      maxHeight: null,
      focus: false,
      toolbar: [
         ['style', ['bold','italic','clear']],
         ['font', ['strikethrough', 'superscript', 'subscript']],
         ['fontsize', ['fontsize']],
         ['fontname', ['fontname']],
         ['color', ['color']],
         ['para', ['ul', 'ol', 'paragraph']],
         ],
      fontNames: [
        'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
        'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
        'Sacramento'
        ],
      callbacks: {
         onChange: function(contents, $editable) {
            changed = true;
         }
      }
   });
   $("#foto").change(function() {
      if (this.files && this.files[0]) {
         var filePhoto = this.files[0];
         $("#previewFoto").attr("src", "");
         if(filePhoto.type=="image/jpeg"||filePhoto.type=="image/jpg"||filePhoto.type=="image/png"){
            if(filePhoto){
               var reader = new FileReader();
               reader.onload = function(){
                  document.getElementById("previewFoto").style.display = '';
                  $("#previewFoto").attr("src", reader.result);
               }
               reader.readAsDataURL(filePhoto);
            }
         }else{
            $("#previewFoto").attr("src", "");
            $("#foto").val('');
            alertSukses('Notifikasi','Hanya file foto','bg-danger');
         }
      } else {
         $("#previewFoto").attr("src", "");
      }
   });

   $("#formData").on("submit", function(e){
      e.preventDefault();
      console.clear();
      changed = false;
      var formData = new FormData(this);
      $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
      $('.btnSave').attr('disabled', true);
      $(document).find("span.text-danger").remove();
      const elements = document.querySelectorAll('*');
      elements.forEach((element) => {
         element.classList.remove('is-invalid');
      });
      $.ajax({
         type:'POST',
         url: "{{ route('news_store') }}",
         data: formData,
         cache: false,
         contentType: false,
         processData: false,
         success: (data) => {
            $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
            $(".btnSave").attr("disabled", false);
            if(data.status){
               alertSukses('Notifikasi',''+data.message,'bg-success');
               $.alert({
                  title: '',
                  content: data.message,
                  buttons: {
                     btnLanjut: {
                        text: 'Lanjut Edit',
                        btnClass: 'btn-light',
                        keys: ['esc'],
                        action: function(){
                           $("#berita_id").val(data.id);
                           save_method = 'edit';
                           var url_edit = "{{ route('news_form') }}";
                           window.history.pushState('Berita', 'Berita', url_edit+'?id='+data.id);
                        }
                     },
                     btnSelesai: {
                        text: 'Selesai',
                        btnClass: 'btn-primary',
                        keys: ['enter'],
                        action: function(){
                           location.href = "{{ route('admin_news') }}";
                        }
                     },
                  }
               });
            }else{
               alertSukses('Notifikasi',''+data.message,'bg-danger');
            }
         },
         error: function(data){
            $(".btnSave").html('<i class="fas fa-save"></i> Simpan');
            $(".btnSave").attr("disabled", false);
            $.each(data.responseJSON.errors,function(field_name,error){
               $(document).find('[name='+field_name+']').addClass('is-invalid');
               $(document).find('[name='+field_name+']').after('<span style="font-weight: light" class="text-danger">' +error+ '</span>');
            });
         }
      });
   });

   function showPreview(idInput, idPreview) {
      var input = document.getElementById(idInput);
      var preview = document.getElementById(idPreview);
      if (input.files && input.files[0]) {
         var filePhoto = input.files[0];
         preview.setAttribute("src", "{{URL::asset(config('app.path_images').'/user_grey.png')}}");
         if(filePhoto){
            var reader = new FileReader();
            reader.onload = function(){
               preview.style.display = '';
               preview.setAttribute("src", reader.result);
            }
            reader.readAsDataURL(filePhoto);
         }

      } else {
         preview.setAttribute("src", "{{URL::asset(config('app.path_images').'/user_grey.png')}}");
      }
   }
</script>
@endsection