[WIP]Editing and Deleting Products in Firebase Updated

{{page-title "Edit"}}
<div class="edit">
    <h3>Edit Product</h3> 
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Title</label>
            {{input type="text" class="form-control" value=@model.product_title placeholder = "Add Title..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Description</label>
            {{input type="text" class="form-control" value=@model.desc placeholder = "Add Desc..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Price</label>
            {{input type="number" class="form-control" min = "1" step="any" value=@model.price placeholder = "Add Price..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Category</label>
            <select class="form-select" aria-label="Default select example" id="category">
                <option selected value={{@model.category_id}}>Change the category</option>
                <option value="men">Men</option>
                <option value="women">Women</option>
                <option value="kids">Kids</option>
                <option value="homeaccessories">Home Accessories</option>
            </select>
        </div>
        {{!-- <br> --}}
        {{!-- <div class="form-group">
            <label for="exampleFormControlInput1">Image Link</label>
            {{input type="text" class="form-control" value=@model.imglink placeholder = "Add Image Link..."}}
        </div> --}}
        <div class="form-group">
            <label class="col-sm-2 control-label">Image</label>
            <div class="col-sm-10"> 
                <img id="output" height="200" width="200" src = {{@model.imglink}}>
                <p></p>
                
            {{x-file-input class="btn btn-primary custom-class" multiple=false name="files"  action=(action "changeImage") accept="image/*" alt="Change Image"}}
            </div> 
        </div>
        <br>
        <span class="spinner-border" id="spinner" role="status"> </span>
        <span>{{this.progress_disp}}</span>
        <br>
        <p>Press Done to save changes</p>
    </form>
    <button class="btn btn-success" type="submit" {{on 'click' this.editProduct}}>Done</button>
    <button class='btn btn-danger' type="button" {{on 'click' this.deleteProduct}}>Delete</button>
</div>

import Controller from '@ember/controller';
import { action } from '@ember/object';
import firebase from 'firebase';
export default class AdminEditController extends Controller {
  @action
  editProduct() {
    let title = this.get('model.product_title');
    let desc = this.get('model.desc');
    let price = this.get('model.price');
    let e = document.getElementById('category');
    let category = e.options[e.selectedIndex].value;
    let imglink = this.get('model.imglink');
    
  }
  @action
  deleteProduct() {
    const id = this.model.id;
    this.store.findRecord('product', id).then(function (product) {
      
      product.deleteRecord();
      product.save();
    });
    let link = this.get('model.imglink');
    
    let path = link.split("image_")[1].split("?")[0]
    firebase.storage().ref().child("products/image_"+path).delete();
    alert('Product Deleted');
    this.transitionToRoute('admin');
  }
}