<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Epos</title>
	<style>
    /* Modal backdrop */
    body {
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center;    /* Center vertically */
      height: 100vh;          /* Full height of the viewport */
      margin: 0;              /* Remove default body margin */
      background-color: #f0f0f0; /* Optional background color */
      font-family: Arial, Helvetica, sans-serif;
    }

/* Modal backdrop */
	.modal-backdrop {
      display: none; /* Hidden by default */
      position: fixed;
      inset: 0; /* Shortcut for top, right, bottom, and left set to 0 */
      background: rgba(0, 0, 0, 0.6); /* Dark semi-transparent overlay */
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    /* Modal container */
    .modal {
      display: none; /* Hidden by default */
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      z-index: 20;
      width: 90%;
      max-width: 400px;
      opacity: 0;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	  font-family: Arial, Helvetica, sans-serif;
    }

    /* When the modal is visible */
    .modal-backdrop.active {
      display: block;
      opacity: 1;
    }

    .modal.active {
      display: block;
      opacity: 1;
      transform: translate(-50%, -45%);
    }

    /* Modal header */
    .modal-header {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
      text-align: center;
    }

    /* Shop list */
    .shop-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 500px;
      overflow-y: auto;
    }

    .shop-list li {
      padding: 12px;
      margin: 8px 0;
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .shop-list li:hover {
      background: #e6e6e6;
    }

    /* Close button */
    .close-button {
      background: #ff5c5c;
      color: white;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease;
    }

    .close-button:hover {
      background: #ff3232;
    }
    
    input {
      height:40px;
      border-radius: 5px;
      border-color: aliceblue;
      border:rgb(173, 173, 173);
      font-size: 20px;
      width:200px;
    }
    input::placeholder {
      color: grey; /* Change to a light grey */
      opacity: 0.3; /* Adjust transparency (optional) */
      font-style: italic;
    }
    .terminal-button {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      background-color: #4dc5e9; /* Optional button color */
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

  .msg {
    font-family:Arial, Helvetica, sans-serif;
    display:none;
  }

	.startbtn {
      padding: 15px 30px;
      font-size: 16px;
      color: white;
      background-color: #4DC4E9; /* Optional button color */
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>

<body>

	 <!-- Modal Backdrop -->
	 <div id="modalBackdrop" class="modal-backdrop"></div>

	<!-- Modal -->
	<div id="modal" class="modal">
	<button class="close-button" onclick="selectClose()">&times;</button>
	<div class="modal-header" id="modal-title">Select a Store</div>
	<ul class="shop-list" id="shopList">
		<!-- Shop items will be dynamically added -->
	</ul>
  <button style="margin-top:40px;border-radius: 3px;height:20px" onclick="revoke();">Logout Store</button>
	</div>

  <!--Pay-->
  <div id="pay-modal" class="modal">
      <button class="close-button" onclick="selectClose()">&times;</button>
      <div class="modal-header" id="modal-title">Test Terminal</div>
      <div style="margin-top:40px">
         <input id="pay-amount" type="number" placeholder="amount" min="0" step="0.01">       
      </div>
      <div style="margin-top:20px">
         <input id="tip-amount" type="number" placeholder="tip" min="0" step="0.01">
      </div>
      <div style="margin-top:40px">
         <button class="terminal-button" style="width:150px" onclick="Pay()">Pay</button>
        <button class="terminal-button" style="width:150px">Cancel</button>
        <button hidden class="terminal-button" style="width:150px">Refund</button>
      </div>
  </div>

<!-- Modal -->
<div id="pay-status" class="modal" >
  <button class="close-button" onclick="selectClose()">&times;</button>
  <div class="modal-header" id="modal-title">Process Payment</div>
  <div id="pay-status-msg" style="min-height:250px; display: flex; align-items: center; justify-content: center;">
    Payment Status
  </div>
</div>



<!-- Merchant Login Button -->
<button id="startbtn" class="startbtn" onclick="start()" style="z-index: 1010; position: relative;">Merchant Login</button>
<div id="msg" class="msg">Please Wait</div>
