EXTRA CHARGES ADD AMOUNT FEATURE IMPLEMENTATION
================================================

This document contains all the changes made to implement the "Add Amount" button functionality for Extra Charges in the unitsales show view.

CHANGES MADE:
============

1. FRONTEND CHANGES (resources/assets/js/views/unitsales/show.vue):
   ================================================================

   A. Added "Actions" column to Extra Charges table:
   - Added new table header: <th class="">Actions</th>
   - Added new table cell with "Add Amount" button for each row

   B. Added "Add Amount" button in each row:
   ```html
   <td>
     <button
       v-if="permissions[0].edit == 1"
       class="btn btn--icon btn--small secondary"
       title="Add Amount"
       @click.prevent="openAddAmountModal(item)"
     >
       <i class="fas fa-plus"></i> Add Amount
     </button>
   </td>
   ```

   C. Added Modal Popup for Amount Entry:
   ```html
   <!-- Add Amount Modal -->
   <div v-if="showAddAmountModal" class="modal-mask">
     <div class="modal-wrapper">
       <div class="modal-container" style="width: 400px !important">
         <div class="modal-heading panel-header">Add Amount</div>
         <div class="modal-body">
           <div class="form-group">
             <label>Amount</label>
             <input 
               type="number" 
               class="form-control" 
               v-model="addAmountForm.amount"
               placeholder="Enter amount"
               step="0.01"
               min="0"
             />
           </div>
         </div>
         <div class="modal-footer">
           <button 
             class="btn btn--small secondary" 
             @click="closeAddAmountModal"
           >
             Cancel
           </button>
           <button 
             class="btn btn--small primary" 
             @click="saveAddAmount"
             :disabled="!addAmountForm.amount || addAmountForm.amount <= 0"
           >
             Save
           </button>
         </div>
       </div>
     </div>
   </div>
   ```

   D. Added Data Properties:
   ```javascript
   data() {
     return {
       // ... existing properties
       showAddAmountModal: false,
       addAmountForm: {
         amount: 0,
         selectedItem: null
       }
     };
   }
   ```

   E. Added Methods:
   ```javascript
   methods: {
     // ... existing methods
     
     openAddAmountModal(item) {
       this.addAmountForm.amount = 0;
       this.addAmountForm.selectedItem = item;
       this.showAddAmountModal = true;
     },
     
     closeAddAmountModal() {
       this.showAddAmountModal = false;
       this.addAmountForm.amount = 0;
       this.addAmountForm.selectedItem = null;
     },
     
     saveAddAmount() {
       if (!this.addAmountForm.amount || this.addAmountForm.amount <= 0) {
         this.$message.error('Please enter a valid amount');
         return;
       }

       this.$bar.start();
       
       const payload = {
         amount: this.addAmountForm.amount,
         id: this.addAmountForm.selectedItem.id
       };

       byMethod("post", `${process.env.MIX_APP_URL}/api/unitsale_extra_charges_waive`, payload)
         .then(({ data }) => {
           this.$message.success('Amount added successfully!');
           this.closeAddAmountModal();
           // Refresh the page to get updated data
           this.refreshPage();
           this.$bar.finish();
         })
         .catch(err => {
           this.$message.error('Error adding amount. Please try again.');
           this.$bar.finish();
         });
     }
   }
   ```

2. BACKEND CHANGES (app/Http/Controllers/UnitsaleExtraChargesController.php):
   ==========================================================================

   Updated the waiveBounceReturnCharges method:
   ```php
   public function waiveBounceReturnCharges(Request $request)
   {
       $request->validate([
           'amount' => 'required|numeric|min:0',
           'id' => 'required|exists:unitsale_extra_charges,id'
       ]);

       $extraCharge = ExtraCharge::findOrFail($request->id);
       
       // Add the new amount to existing charges
       $extraCharge->charges = $extraCharge->charges + $request->amount;
       $extraCharge->save();

       return response()->json([
           'saved' => true,
           'message' => 'Amount added successfully',
           'new_total' => $extraCharge->charges
       ]);
   }
   ```

3. API ENDPOINT:
   ==============
   The feature uses the existing API endpoint:
   POST: http://127.0.0.1:8000/api/unitsale_extra_charges_waive
   
   Request payload:
   ```json
   {
     "amount": 500,
     "id": 1
   }
   ```
   
   Response:
   ```json
   {
     "saved": true,
     "message": "Amount added successfully",
     "new_total": 1500
   }
   ```

4. FEATURES IMPLEMENTED:
   =====================
   
   ✓ "Add Amount" button in each Extra Charges row
   ✓ Modal popup with amount input field
   ✓ Validation for amount (must be positive number)
   ✓ Cancel and Save buttons
   ✓ API call to update the charge amount
   ✓ Success/error messages
   ✓ Automatic page refresh after successful update
   ✓ Loading indicator during API call
   ✓ Permission-based button visibility (only shows if user has edit permission)

5. USER FLOW:
   ===========
   1. User clicks "Add Amount" button on any Extra Charges row
   2. Modal popup opens with amount input field
   3. User enters the amount to add
   4. User clicks "Save" button
   5. API call is made to update the charge
   6. Success message is shown
   7. Page refreshes to show updated data
   8. Modal closes automatically

6. SECURITY FEATURES:
   ==================
   - Input validation on both frontend and backend
   - Permission-based access control
   - Database validation for record existence
   - Proper error handling and user feedback

7. TECHNICAL DETAILS:
   ===================
   - Uses existing Vue.js modal system
   - Integrates with existing API structure
   - Follows existing code patterns and conventions
   - Uses existing permission system
   - Maintains data consistency with automatic refresh

This implementation provides a complete, user-friendly way to add amounts to existing Extra Charges with proper validation, error handling, and user feedback.