@extends('layouts.master')
@section('page_title', 'Reverse Discount')
@section('content')

<div class="card">
  <div class="card-header">
    <h2>{{$name}}</h2>
  </div>
  <div class="card-body">
    <h4 class="card-text">Bill Amount: GHS {{ number_format($bill->due_amount, 2, '.', ',') }}</h4>
    <h4 class="card-text">Paid: GHS {{ number_format($bill->paid_amount, 2, '.', ',') }}</h4>
    <h4 class="card-text">Discount: GHS {{ number_format($bill->discount_value, 2, '.', ',') }}  </h4>

    <div class="card-body">
        <a href="#" id="reverse-discount" class="card-link btn btn-danger">Confirm</a>
        <a href="#" onclick="window.close();" class="card-link btn btn-primary">Cancel</a>
    </div>
  </div>
</div>

@endsection

@section('page_scripts')

@endsection

<script>
     
       let billId = @json($bill->id);
       let amount = @json($bill->discount_value);

        document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("reverse-discount").addEventListener("click", function (e) {
            e.preventDefault();

            fetch('/api/reverse-discount', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                  
                },
                body: JSON.stringify({ bill_id: billId, discount_amount: amount })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Discount reversed successfully');
                    window.close();
                } else {
                    alert('Error reversing discount');
                }
            })
            .catch(error => {
                alert('Error occurred while processing request');
            });
        });
    })
</script>