@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.banner.store") }}">
                @csrf
                <div class="form-body">
                  <div class="row">
                      <div class="col-md-12 col-12">
                          <div class="form-group">
                              <label for="first_name">Name <span style="color: red;">*</span></label>
                              <input type="text" id="name" class="form-control" name="name" placeholder="Name">
                          </div>

                          <div class="form-group">
                              <label for="target_link">Target Link <span style="color: red;">*</span></label>
                              <input type="text" id="target_link" class="form-control" name="target_link" placeholder="https://example.com">
                          </div>

                          <div class="form-group">
                              <label for="order">Order <span style="color: red;">*</span></label>
                              <input type="number" id="order" class="form-control" name="order" placeholder="Order">
                          </div>

                          <div class="form-group">
                              <input type="hidden" name="attachment_uuid" />
                              <label for="inputGroupFile01">Banner 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="banner_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(),
                                      null,
                                      ["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.banner.index") }}" class="btn btn-secondary mr-1 mb-1">Cancel</a>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function () {
            var $uploadImageInput = $("input[name='banner_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 + " , silakan tekan tombol <b>Save</b> untuk melanjutkan.",
                                'success',
                                1000
                            )
                        },
                        error: function (res) {}
                    });
                };

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