<div id="status">Connecting...</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const status = $('#status');
  const amountToReceive = 500;

  // Create Action Cable consumer
  const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");

  // Subscribe to channel
  const subscription = cable.subscriptions.create(
    {
      channel: "TestChannel",
      receipt_no: "0101234123456789012"
    },
    {
      connected() {
        console.log("Nagato channel connected");
      },

      received(data) {
        console.log("Received:", data);

        if (data.status === "PAY_SUCCESS") {
          this.handlePaymentSuccess();
        }
      },

      handlePaymentSuccess() {
        status.html(`
          <div class="payment-success text-center">
            <i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
            <h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
            <p>Amount Received: ${amountToReceive}</p>
          </div>
        `);
      }
    }
  );
})
</script>
