@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('content')
  <section id="multiple-column-form">
    <div class="row match-height">
      <div class="col-12">
        <div class="card">
          <div class="card-content">
            <div class="card-body">
              <form id="form" class="form" method="POST" action="{{ route("admin.article.update", ["slug" => $slug, "id" => $article->id]) }}">
                @csrf
                  <div class="form-body">
                      <div class="row">
                          <div class="col-md-12 col-12">
                              <div class="form-group">
                                  <label for="name">Name <span style="color: red;">*</span></label>
                                  <input type="text" id="name" class="form-control" name="name" placeholder="Name" value="{{ $article->name }}">
                              </div>
                              <div class="form-group">
                                  <label for="summary">Summary <span style="color: red;">*</span></label>
                                  <textarea type="text" id="summary" class="form-control" name="summary" placeholder="Summary">{{ $article->summary }}</textarea>
                              </div>
                              <div class="form-group">
                                  <label for="description">Description <span style="color: red;">*</span></label>
                                  <textarea class="ckeditor form-control" id="description" name="description">{!! $article->description !!}</textarea>
                              </div>
                              <div class="form-group">
                                  <input type="hidden" name="attachment_uuid" />
                                  <label for="inputGroupFile01">Featured Image <span style="color: red;">*</span></label>
                                  <div class="media">
                                      <a href="javascript: void(0);">
                                          <img src="{{ $attachment->image_url ?? GeneralHelper::PLACEHOLDER }}" class="rounded mr-75"
                                               alt="profile image" height="100" width="100" id="image-preview">
                                      </a>
                                      <div class="media-body mt-75">
                                          <div class="col-12 px-0 d-flex flex-sm-row flex-column justify-content-start">
                                              <label class="btn btn-md btn-primary ml-50 mb-50 mb-sm-0 cursor-pointer"
                                                     for="account-upload">Upload</label>
                                              <input type="file" id="account-upload" hidden name="featured_image">
                                          </div>
                                          <p class="text-muted ml-75 mt-50"><small>File Maximal 4MB with Format JPG, JPEG or PNG </small></p>
                                      </div>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label for="status">Status <span style="color: red;">*</span></label>
                                  {{
                                      Form::select(
                                          "status",
                                          BaseStatusEnum::getArrayWithStringKey(),
                                          $article->status,
                                          ["class" => "form-control"]
                                      )
                                  }}
                              </div>
                          </div>
                      </div>
                      <div class="col-12">
                          <div class="float-right">
                              <button type="submit" class="btn btn-primary mr-1 mb-1">Save</button>
                              <a href="{{ route("admin.article.index", ["slug" => $slug]) }}" class="btn btn-secondary mr-1 mb-1">Cancel</a>
                          </div>
                      </div>
                  </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('page-script')
    <!-- Page js files -->
    <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            CKEDITOR.replace( 'ckeditor', {
                height: 400
            });

            var $uploadImageInput = $("input[name='featured_image']");
            var $imagePreview = $("#image-preview");
            var $attachmentInput = $("input[name='attachment_uuid']");

            $uploadImageInput.on("change", function (e) {
                e.preventDefault();

                var reader = new FileReader();
                reader.onload = function (event) {
                    $.ajax({
                        url: "{{ route("general.store-image-to-temporary-storage") }}",
                        method: "POST",
                        data: {
                            "user_uuid": "{{ Auth::user()->uuid }}",
                            "filename": e.target.files[0].name,
                            "base64": event.target.result
                        },
                        success: function (res) {
                            $imagePreview.attr("src", event.target.result);
                            $attachmentInput.attr("value", res.attachment_uuid);

                            Swal.fire(
                                'Successfully!',
                                res.message + " , please press <b>save</b> button to continue.",
                                'success',
                                1000
                            )
                        },
                        error: function (res) {}
                    });
                };

                reader.readAsDataURL(this.files[0]);
            });
        });
    </script>
    @include('admin.menu.article.components.support-js.crud.update-submit-js')
@endsection