@extends('layouts.admin')
@section('title', 'Profil Ketua')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />

<style type="text/css">
   img{
      width: 100%;
   }

   #imgPreview{
      border: 1px solid black;
      padding: 10px;
   }

   #imgPreview img{
      width: 200px;
      padding: 5px;
   }
   .item-img {
      position: relative;
      display: inline-block;
   }

   .btn-delete-img {
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
   }
   .item-img:hover .btn-delete-img {
      display: block;
   }
</style>
@endsection
@section('content')
<section class="content">
   <div class="d-flex flex-wrap justify-content-between">
      <h4>Form Profil Ketua</h4>
      <div class="tools">
         <a type="button" class="btn btn-outline-success btn-sm pull-right" href="{{route('ketua_form')}}"><i class="fas fa-plus"></i> Data Baru</a>
         <button type="button" class="btn btn-outline-primary btn-sm pull-right" onclick="$('#formData').submit();"><i class="fas fa-save"></i> Simpan</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" method="POST" action="javascript:void(0)" enctype="multipart/form-data" autocomplete="off">
      <div class="row g-2 my-2">
         <div class="col-md-9 g-2">
            <div class="card">
               <div class="card-body">
                  <div id="formInput">
                     <input type="hidden" name="ketua_id" id="ketua_id" value="{{ isset($ketua)?$ketua->id:'' }}">
                     @csrf
                     <div class="row g-2">
                        <div class="col-md-4 col-sm-12 col-12">
                           <label for="nama" maxlength="100" class="form-label">Nama <span style="color:red">*</span></label>
                           <input type="text" name="nama" id="nama" class="form-control" value="{{isset($ketua)?$ketua->nama:''}}" required>
                        </div>
                        <div class="col-md-4 col-sm-6 col-12">
                           <label for="tipe" class="form-label">Tipe Ketua <span style="color:red">*</span></label>
                           <select class="form-control" name="tipe" id="tipe" required>
                              <option value="">Pilih</option>
                              @foreach($tipe AS $value)
                              <option value="{{$value}}" >{{$value}}</option>
                              @endforeach
                           </select>
                        </div>
                                                <div class="col-md-4 col-sm-6 col-12">
                           <label for="tahun_awal" class="form-label">Tahun Jabatan <span style="color:red">*</span></label>
                           <div class="row">
                              <div class="col-6">
                                 <select class="form-control" name="tahun_awal_jabatan" id="tahun_awal" required>
                                                                     </select>
                              </div>
                              <div class="col-6">
                                 <select class="form-control" name="tahun_akhir_jabatan" id="tahun_akhir">
                                    <option value="">Sekarang</option>
                                                                     </select>
                              </div>
                           </div>
                        </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" style="width:100%">{{isset($ketua)?$ketua->deskripsi:''}}</textarea>
                        </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">Foto profil <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($ketua)?$path_ketua.'/'.$ketua->foto:''}}" style="object-fit: contain; max-height: 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> Simpan</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 src="https://code.jquery.com/ui/1.13.1/jquery-ui.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 '';
      }
   };

   $(document).ready( function () {
      $.ajaxSetup({
         headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
         }
      });
      $('#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']],
            ['height', ['height']],
            ],
         fontNames: [
           'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
           'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
           'Sacramento'
           ],
         lineHeights: ['0.5', '1.0', '1.5'],
         callbacks: {
            onChange: function(contents, $editable) {
               changed = true;
            }
         }
      });

      $('body').keydown(function(e) {
         if (e.keyCode == 13) {
            if (e.ctrlKey) {
               $('#formData').submit();
            }
            return false;
         }
      });
   });
   $(".numeric").keypress(function (e) {
      var text = this.value;
      this.value = text.replace(/[^0-9\\+\\-]+/g, '');
   });

   $("#foto").change(function() {
      showPreview('foto','previewFoto');
   });
   function getParameterByName(name) {
      var urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
   }

   $("#formData").on("submit", function(e){
      e.preventDefault();
      e.stopPropagation();
      console.clear();
      changed = false;
      $('.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');
      });
      sending_data();
   });

   function sending_data() {
      var formData = new FormData(document.getElementById('formData'));
      $.ajax({
         type:'POST',
         url: "{{ route('ketua_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(){
                           $("#ketua_id").val(data.id);
                           var url_edit = '{{route("ketua_form")}}';
                           window.history.pushState('form', 'form', url_edit+'?id='+data.id);
                        }
                     },
                     btnSelesai: {
                        text: 'Selesai', btnClass: 'btn-primary', keys: ['enter'],
                        action: function(){
                           location.href = "{{ route('admin_ketua') }}";
                        }
                     },
                  }
               });
            }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", "");
         if(filePhoto){
            var reader = new FileReader();
            reader.onload = function(){
               preview.style.display = '';
               preview.setAttribute("src", reader.result);
            }
            reader.readAsDataURL(filePhoto);
         }
      } else {
         preview.setAttribute("src", "");
      }
   }

</script>
@endsection