{% load static %}
{% block title %}
Finance List
{% endblock title %}
{% block content %}
<br>
<h3 class="text-center font-weight-bold mb-4">Welcome back, {{ user.username }}</h3>
<div class="container">
   <div class="row mb-4">
       <div class="col-md-4">
           <div class="card bg-primary text-white">
               <div class="card-body">
                   <h6 class="card-title font-weight-bold mb-3">Total Budget</h6>
                   <h1 class="card-text font-weight-bold mb-0">₹{{ project.budget }}</h1>
               </div>
           </div>
       </div>
       <div class="col-md-4">
           <div class="card bg-success text-white">
               <div class="card-body">
                   <h6 class="card-title font-weight-bold mb-3">Budget Left</h6>
                   {% if project.budget_left > 0 %}
                   <h1 class="card-text font-weight-bold mb-0">₹{{ project.budget_left }}</h1> 
                   {% elif project.budget_left == 0 %}
                   <h1 class="card-text font-weight-bold mb-0">₹{{ project.budget_left }}</h1>
                   {% else %}
                   <h1 class="card-text font-weight-bold mb-0">₹{{ project.budget_left }}</h1>
                   {% endif %}
               </div>
           </div>
       </div>
       <div class="col-md-4">
           <div class="card bg-secondary text-white">
               <div class="card-body">
                   <h6 class="card-title font-weight-bold mb-3">Total Transactions</h6>
                   <h1 class="card-text font-weight-bold mb-0">{{ project.total_transactions }}</h1>
               </div>
           </div>
       </div>
   </div>


   <center>
   <div class="row mb-4">
       <div class="col-md-12">
           <button class="btn btn-success btn-lg float-right modal-trigger" href="#expenseModal" data-toggle="modal" data-target="#expenseModal">
               <i class="fas fa-plus-circle mr-2"></i>
               Add Expense
           </button>
       </div>
   </div>
   </center>
<center>
   <div class="column">
       <div class="col-md-10">
           <table class="table table-striped table-hover">
               <thead>
                   <tr>
                       <th>Title</th>
                       <th>Amount</th>
                       <th>Category</th>
                       <th>Action</th>
                   </tr>
               </thead>
               <tbody>
                   {% for expense in expense_list %}
                   <tr id="{{ expense.id }}">
                       <td>{{ expense.title }}</td>
                       <td>₹{{ expense.amount }}</td>
                       <td>{{ expense.category.name }}</td>
                       <td>
                           <button class="btn btn-sm btn-danger" onclick="deleteExpense(this)" data-id="{{ expense.id }}">
                               <i class="fas fa-trash-alt"></i>
                               Delete
                           </button>
                       </td>
                   </tr>
                   {% endfor %}
               </tbody>
           </table>
       </div>
   </div>
</div>
</center>


<div id="expenseModal" class="modal fade">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <h4 class="modal-title font-weight-bold">Add Expense</h4>
               <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
               <form action="" method="POST">
                   {% csrf_token %}
                   <div class="mb-3">
                       <label for="title" class="form-label">Title</label>
                       <input type="text" class="form-control" id="title" name="title">
                   </div>
                   <div class="mb-3">
                       <label for="amount" class="form-label">Amount</label>
                       <input type="text" class="form-control" id="amount" name="amount">
                   </div>
                   <div class="mb-3">
                       <label for="category" class="form-label">Category</label>
                       <select id="category" class="form-select" name="category">
                           {% for category in category_list %}
                           <option value="{{ category.name }}">{{ category.name }}</option>
                           {% endfor %}
                       </select>
                   </div>
                   <button type="submit" class="btn btn-primary">Add</button>
               </form>
           </div>
       </div>
   </div>
</div>


<script>
   var elem = document.querySelector('.modal')
   var instanace = M.Modal.init(elem)


   var elem = document.querySelector('select')
   var instanace = M.FormSelect.init(elem)


   function deleteExpense(e){


       let id = e.dataset.id
       let row = document.getElementById(id)
       row.remove()
      
       fetch('',{
           method:'DELETE',
           headers : {
               'X-CSRFToken' : '{{ csrf_token }}'
           },
           body:JSON.stringify({
               'id' :id
           }),
           credentials : 'same-origin',
       })
   }
</script>
{% endblock content %}

alassani-satarr:107 Uncaught TypeError: Cannot read properties of undefined (reading 'init')
    at alassani-satarr:107:28