@extends('layouts.app')

@section('content')
  <div class="container">
    <form id="formImage" enctype="multipart/form-data">
      @csrf
      <label for="upload-image" class="template-label">Choose image</label>
      <input type="file" id="upload-image" accept="image/*" onchange="loadImage(event)" required>
      <div class="row justify-content-center" id="container">
        <div class="col-md-9">
          <canvas class="dropzone" id="canvas"></canvas>
          <div>
            <div class="drag-drop" id="date">date</div>
            <div class="drag-drop" id="barcode">barcode</div>
            <div class="drag-drop" id="text">text</div>
          </div>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-2"></div>
      </div>
      <br>
      <button type="button" class="btn btn-success template-btn" id="save">Save</button>
    </form>
  </div>
@endsection

var url_image = window.location.origin + "/image";

document.getElementById("save").addEventListener("click", function(event) {
    event.preventDefault();
    var image = document.getElementById("upload-image").files[0];
    var formData = new FormData();
    formData.append("file", image);

    $.ajax({
        url: url_image,
        data: formData,
        dataType: "json",
        type: "post",
        processData: false,
        contentType: false,
        cache: false
    })
        .done(function(data) {
            //swal("Good job!", "Your information has been successfully updated!", "success")
            console.log("Ajax was Successful!");
            console.log(data);
        })
        .fail(function(xhr, textStatus, error) {
            console.log(textStatus);
            console.log(error);
        });
}

public function saveImage(Request $request) {
    //$image = $request->input('image');

    $validation = Validator::make($request->all(), [
        'image' => 'required|image|mimes:jpeg,png,jpg'
    ]);

    if ($validation->passes()) {

        $new_name = 'template.'.$request->file('image')->getClientOriginalExtension();
        $request->file('image')->move(storage_path("app/public"), $new_name);
        // Storage::disk('public')->put($new_name);
        $path_image = Storage::url($new_name);

        $template = Template::findOrNew(1);
        $template->path_image = $path_image;
        $template->save();

        return response()->json([
            'message' => 'Image uploaded successfully',
            'template' => $template
        ]);
    }

    return response()->json([
        'messagge' => $validation->errors()->all()
    ]);
}