<style>
    .processing-indicator {
        display: flex;
        gap: 6px;
    }

    .processing-dot {
        width: 10px;
        height: 10px;
        background: #2196F3;
        border-radius: 50%;
        animation: bounce 1.4s infinite ease-in-out;
    }

    .processing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .processing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes bounce {
        0%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-12px);
        }
    }

  #fullpage-loading {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.712);
    align-items: center;
    justify-content: center;
  }

</style>

<div class="container-fluid h-100">
<% if !@print_settings.nil? %>
    <% if @print_settings.precision.to_i > 0
        precision = @print_settings.precision
    else
        precision = 0
    end
    #check delimiter
    if @print_settings.delimiter
        delimiter = ","
    else
        delimiter = ""
    end
    %>
<% end %>

<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
  <div>
    <div style="display:flex; gap:10px; justify-content:center;">
      <div class="processing-dot"></div>
      <div class="processing-dot"></div>
      <div class="processing-dot"></div>
    </div>
    <div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
  </div>
</div>

<div class="row clearfix h-100">
    <% if @error %>
        <input type="hidden" name="error_message" id="error_message" value="<%= json_escape(@error.to_json) %>">
    <% end %>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 d-flex flex-column h-100">
    <div class="card h-100" style="margin-bottom: 15px">
        <div class="card-header m-l-5 m-r-5">
        <div id="order-title">
            <div class="row p-l-5 p-r-5">
            <div class="col-lg-6 col-md-6 col-sm-6"><strong>Receipt No :</strong> <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></div>
            <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Receipt Date :</strong> <span id="receipt_date"><%=@sale_data.receipt_date.strftime("%d/%m/%Y-%I:%M %p") rescue '-' %></span></div>
            </div>
            <div class="row p-l-5 p-r-5">
            <div class="col-lg-6 col-md-6 col-sm-6"><strong>Table No :</strong> <%=@table_no%></div>
            <span class="hidden" id="dining"><%if !@dining.nil?%><%= @dining.id rescue "-" %><%end%></span>
            <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Sale ID :</strong> <span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span></div>
            </div>

            <div class="row p-l-5 p-r-5">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <strong>Customer :</strong>
                <% if @cashier_type == 'quick_service' || @cashier_type == 'food_court' %>
                <button type="button" class="btn bg-info waves-effect" id='customer_name' data-toggle="modal" data-target="#read_modal"><%= @sale_data.customer.name%></button>
                <input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' />
                <% else %>
                <input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' />
                <span id="customer_name"><%= @sale_data.customer.name%></span>
                <% end %>
                <span class="hidden" id="membership_id"><%= @sale_data.customer.membership_id%></span>
                <span class="hidden" id="member_discount"><%= @member_discount%></span></div>
            <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Checkin Time : </strong> <%if !@checkin_time.nil?%><%= @checkin_time.strftime("%I:%M %p") %>
            <%end%></div>
            </div>
        </div>
        </div>

        <div class="card-block m-l-5 m-r-5 m-t--10 d-flex flex-column h-100">
        <div class="card-title">
            <div class="card-text">
            <table class="table" id="append-table">
                <tr>
                <!-- <tr> -->
                <th>#</th>
                <th class="item-name">Items</th>
                <th class="item-attr">QTY</th>
                <th class="item-attr">Price</th>
                <!-- </tr> -->
                </tr>
            </table>
            </div>
        </div>
        <div id="foodcourt-slimscroll" class="h-100">
            <!-- <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll"> -->
            <div id="table-details" class="card-text m-t--10" >
            <table class="table summary-items" id="append-table">
                <tbody>
                <% sub_total = 0
                count = 0
                %>
                <% @sale_data.sale_items.each do |sale_item|
                    count += 1
                    %>

                    <% sub_total += sale_item.price%>
                    <tr>
                    <td><%= count %></td>
                    <td class="item-name"><%=sale_item.product_name%>@<%=number_with_precision( sale_item.unit_price, precision: precision.to_i )%></td>
                    <td class="item-attr"><%=sale_item.qty%></td>
                    <td class="item-attr"><%=(number_with_precision(sale_item.price, precision: precision.to_i ))%></td>
                </tr>
                <%end %>
            </tbody>
            </table>
        </div>
        </div>
    </div>
    <div class="card-footer ">
        <table class="table m-t--10 ">
        <tfooter>
            <tr>
            <td class="charges-name"><strong>Sub Total</strong></td>
            <td class="item-attr"><strong><span id="sub-total"><%=number_with_precision(sub_total, precision: precision.to_i)%></span></strong></td>
            </tr>
            <tr>
            <%if @sale_data.discount_type == 'member_discount'%>
            <td class="charges-name"><strong>Member Discount:</strong></td>
            <%else%>
            <td class="charges-name"><strong>(Discount)</strong></td>
            <%end%>
            <td class="item-attr"><strong><span>(<%= number_with_precision(@sale_data.total_discount, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i ) %>)</span></strong></td>
            </tr>
            <tr>
            <td class="charges-name">
                <strong>
                <% if !@account_arr.empty? %>
                Tax
                (<% @i = 0
                @account_arr.each do |ct| %>
                    <%=ct.tax_name%>
                    <% if @account_arr.count != @i+1%>
                    +       <% @i =+1 %>
                    <%end%>
                <%end %>)
                <% else %>
                No Tax
                <% end %></strong><br>
                <%if @changable_tax %>
                <% if @current_user.role == 'cashier' %>
                    <button class="btn btn-link waves-effect bg-info access_modal" data-type = 'change_tax' >Change Tax</button>
                <% else %>
                    <button class="btn btn-link waves-effect bg-info change_tax">Change Tax</button>
                <% end %>
                <% end %>
            </td>
            <td class="item-attr"><strong><span id="total_tax"><%= number_with_precision(@sale_data.total_tax, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></span></strong></td>
            </tr>
            <tr>
            <td class="charges-name"><strong>Rounding Adj:</strong></td>
            <td class="item-attr"><strong><%= number_with_precision(@sale_data.rounding_adjustment, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></strong></td>
            </tr>
            <tr>
            <td class="charges-name"><strong>Grand Total</strong></td>
            <td class="item-attr"><strong><span><%= number_with_precision(@sale_data.grand_total, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></span></strong></td>
            </tr>
            <%if @balance > 0%>
            <tr>
            <td class="charges-name"><strong><%= @accountable_type %></strong></td>
            <td class="item-attr"><strong><span><%=number_with_precision(@balance, precision: precision.to_i )%></span></strong></td>
            </tr>
            <% end %>
            <% if !@individual_total[0].nil? %>
            <tr>
                <td class="charges-name">
                    <strong>Split Bill for <%= @individual_total[0]['total_customer'] %> persons</strong>
                </td>
                <td></td>
            </tr>
            <tr>
                <td class="charges-name">
                    <strong>Amount Due (per person)</strong>
                </td>
                <td class="item-attr"><strong><span><%= number_with_precision(@individual_total[0]['per_person_amount'], precision: precision.to_i )%></span></strong></td>
            </tr>
            <% end %>
        </tfooter>
        </table>
    </div>
</div>
</div>

<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 d-flex flex-column h-100" style="padding-right: 10px;">

    <div class="card-block">
        <div class="payment-waiting text-center" style="min-height: 650px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
            <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
            <div class="processing-indicator" style="margin: 1rem 0;">
                <div class="processing-dot"></div>
                <div class="processing-dot"></div>
                <div class="processing-dot"></div>
            </div>
            <h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
            <p class="text-muted">Please ask customer to scan the QR code</p>
            <% if @qr_svg %>
                <div>
                    <%= raw @qr_svg %>
                </div>
            <% end %>
            <div class="d-flex" style="margin: 1.5rem 0;">
                <button class="btn btn-danger" id="cancel-btn">Cancel Payment</button>
            </div>
        </div>

        <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
        <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
    </div>
</div>
</div>
<input type="hidden" id="server_mode" value="<%= ENV["SERVER_MODE"] %>">
</div>
<div class="modal fade" id="voidModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title" id="voidModalLabel">Please Enter Reason for Void</h4>
    </div>
    <div class="modal-body">
        <input type="textarea" name="remark" class="form-control col-md-12 remark" id="remark">
    </div>
    <div class="modal-footer ">
        <div class="row p-r-20">
        <div class="col-md-5">
            <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-red waves-effect " id="void" active="true">VOID</button>
        </div>
        <div class="col-md-5">
            <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-blue waves-effect" data-dismiss="modal">CLOSE</button>
        </div>
        </div>

    </div>
    </div>
</div>
</div>

<script defer type="text/javascript">

// disable actions while waiting for payment
$(document).ready(function() {
  $('button, a').not('#cancel-btn').each(function() {
    const $element = $(this);

    if ($element.is('button')) {
      $element.prop('disabled', true);
    }

    // Disable links and dropdowns
    $element.addClass('disabled');
    $element.css({
      'pointer-events': 'none',
      'opacity': '0.5',
      'cursor': 'not-allowed'
    });

    // Prevent click actions
    $element.on('click', function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
    });
  });

  // Specifically disable Bootstrap dropdowns
  $('.dropdown-toggle').not('#cancel-btn').each(function() {
    const $dropdown = $(this);

    // Remove Bootstrap functionality
    $dropdown.removeAttr('data-bs-toggle');
    $dropdown.off('click.bs.dropdown');

    // Add visual
    $dropdown.addClass('disabled');
    $dropdown.css({
      'pointer-events': 'none',
      'opacity': '0.5',
      'cursor': 'not-allowed'
    });
  });
});

// payment success
$(document).ready(function() {
  const $paymentWaiting = $('.payment-waiting');
  const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
  const receiptNo = $('#receipt_no').text();
  let paymentProcessed = false;
  let fallbackTimeout;
  let connected = false;

  let fc_server_response;

  function handlePaymentSuccess() {
    if (paymentProcessed) return;
    paymentProcessed = true;
    clearTimeout(fallbackTimeout);
    $('#cancel-btn').hide();
    $paymentWaiting.html(`
      <img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
      <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>
    `);

    $.ajax({
      url: '/foodcourt/qrpay/process_payment',
      method: 'POST',
      contentType: 'application/json',
      headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
      },
      data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>", response_data: fc_server_response }),
      success: (data) => {
        if (data.status) {
          customer_display_view({
            msg: "Payment Successful",
            paid_amount: amountToReceive,
            receipt_no: receiptNo
          }, "pay_success");
        }
      },
      error: (xhr, status, error) => {
        console.log("Error:", error);
      }
    });

    setTimeout(() => {
      window.location.href = "/";
    }, 1500);
  }

  function checkPaymentStatus() {
    $.ajax({
      url: '/foodcourt/qrpay/check_payment_status',
      method: 'POST',
      contentType: 'application/json',
      headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
      },
      data: JSON.stringify({ receipt_no: receiptNo }),
      success: function(response) {
        if (response.status === "PAY_SUCCESS") {
          handlePaymentSuccess();
        } else if (response.status === "CONFIG_ERROR") {
          clearTimeout(fallbackTimeout);
        } else if (!paymentProcessed) {
          fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
        }
      },
      error: function() {
        if (!paymentProcessed) {
          fallbackTimeout = setTimeout(checkPaymentStatus, 5000);
        }
      }
    });
  }

  // ----- WebSocket Setup -----
  const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");

  const subscription = cable.subscriptions.create(
    {
      channel: "NagatoChannel",
      receipt_no: receiptNo
    },
    {
      connected() {
        console.log("Nagato channel connected");
        connected = true;
        fallbackTimeout = setTimeout(checkPaymentStatus, 30000);
      },

      received(data) {
        console.log("Received:", data);
        if (data.status === "PAY_SUCCESS" && !paymentProcessed) {
          fc_server_response = data
          clearTimeout(fallbackTimeout);
          handlePaymentSuccess();
        }
      },

      disconnected() {
        console.log("Nagato channel disconnected");
        if (!paymentProcessed) {
          fallbackTimeout = setTimeout(checkPaymentStatus, 30000);
        }
      }
    }
  );

  // Fallback if WebSocket doesn't connect within 5 seconds
  setTimeout(() => {
    if (!connected) {
      console.warn("WebSocket failed to connect — falling back to polling.");
      checkPaymentStatus(); // start polling
    }
  }, 5000);

  function customer_display_view(data, status) {
    $.post('/foodcourt/customer_view', {
      data: data,
      status: status
    }, function(result) {}, 'json');
  }

  $('#cancel-btn').on('click', function(e) {
    e.preventDefault(); // Prevent any default button action

    swal({
      title: "Are you sure?",
      text: "Do you really want to cancel this transaction?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, cancel it!",
      cancelButtonText: "No, keep it.",
      closeOnConfirm: false,
      showLoaderOnConfirm: true,
    },
    function(isConfirm){
      if (isConfirm) {
        // User clicked "Yes", so we proceed with the cancellation.
        const postData = {
          sale_id: "<%= @sale_data.sale_id %>"
        };

        $.ajax({
          url: '/foodcourt/qrpay/cancel',
          method: 'POST',
          contentType: 'application/json',
          headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
          },
          data: JSON.stringify(postData),
          success: function(data) {
            if (data.status) {
              swal({
                  title: "Cancelled!",
                  text: "The transaction has been successfully cancelled. You will be redirected shortly.",
                  type: "success",
                  timer: 2000, // The alert will close automatically after 2 seconds
                  showConfirmButton: false
              });
              setTimeout(function() {
                window.location.href = "/";
              }, 1500); // 1.5-second delay before redirecting

            } else {
              swal("Error", "Could not cancel the transaction. Please try again.", "error");
            }
          },
          error: function(xhr, status, error) {
            console.log("Error:", error);
            swal("AJAX Error", "An unexpected error occurred. Please check the console.", "error");
          }
        });
      }
    });
  });
});

</script>
