btc_horse/btc-UI/src/app/components/sidebar/sidebar.component.html

<img src="./assets/logo_w.png" alt="new" class="logo" />

<ul class="sidebar-menu">
  <li (click)="ticketingClick.emit()">
    <i class="bi bi-ticket-perforated"></i><span>Ticketing</span>
  </li>
  <li (click)="openWithdrawPopup()">
    <i class="bi bi-cash-stack"></i><span>Withdraw</span>
  </li>
  <li (click)="openDepositPopup()">
    <i class="bi bi-piggy-bank"></i><span>Deposit</span>
  </li>
  <li (click)="openPayoutPopup()">
    <i class="bi bi-currency-exchange"></i><span>Pay-out</span>
  </li>
  <li (click)="openViewRcPopup()">
    <i class="bi bi-journal-text"></i><span>View RC</span>
  </li>
  <li (click)="openCancelPopup()">
    <i class="bi bi-x-circle"></i><span>Cancel</span>
  </li>
</ul>

<!-- Cancel Modal -->
<div class="modal-overlay" *ngIf="showCancel">
  <div class="modal-box">
    <h3 class="modal-title">CANCEL</h3>

    <div class="modal-body">
      <label for="ticketNo">Ticket No</label>
      <!-- ✅ This is where ngModel is used -->
      <input
        type="text"
        id="ticketNo"
        class="modal-input"
        [(ngModel)]="ticketNo"
      />
    </div>

    <div class="modal-footer">
      <button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
      <button class="print-btn" (click)="printTicket()">PRINT</button>
    </div>
  </div>
</div>

<!-- ✅ Pay-out Modal -->
<div class="modal-overlay" *ngIf="showPayout">
  <div class="modal-box">
    <h3 class="modal-title">PAY-OUT</h3>

    <div class="modal-body">
      <label for="payoutTicketNo">Ticket No</label>
      <input
        type="text"
        id="payoutTicketNo"
        class="modal-input"
        [(ngModel)]="payoutTicketNo"
      />
    </div>

    <div class="modal-footer">
      <button class="cancel-btn" (click)="closePayoutPopup()">CANCEL</button>
      <button class="erase-btn" (click)="erasePayoutTicket()">ERASE</button>
      <button class="print-btn" (click)="printPayoutTicket()">PRINT</button>
    </div>
  </div>
</div>

<!-- Deposit Modal -->
<div class="deposit-modal-overlay" *ngIf="showDeposit">
  <div class="deposit-modal-box">
    <h3 class="deposit-modal-title">DEPOSIT</h3>

    <div class="deposit-modal-content">
      <!-- Left Side: Form -->
      <div class="deposit-form">
        <label>Operator ID</label>
        <input
          type="text"
          [(ngModel)]="depositOperatorId"
          class="deposit-input"
        />

        <label>Shroff ID</label>
        <input
          type="text"
          [(ngModel)]="depositShroffId"
          class="deposit-input"
        />

        <label>Amount</label>
        <input type="text" [(ngModel)]="depositAmount" class="deposit-input" />
      </div>

      <!-- Right Side: Balance & Numpad -->
      <!-- Inside deposit-numpad-section -->
      <div class="deposit-numpad-section">
        <div class="deposit-balance-container">
          <div class="deposit-balance">
            <strong>Balance: ₹0.00</strong>
          </div>
        </div>

        <div class="deposit-numpad">
          <div class="row">
            <button (click)="onNumpadClick('0', 'deposit')">0</button>
            <button class="back-btn" (click)="onBackspace('deposit')">
              BACK
            </button>
          </div>
          <div class="row">
            <button (click)="onNumpadClick('7', 'deposit')">7</button>
            <button (click)="onNumpadClick('8', 'deposit')">8</button>
            <button (click)="onNumpadClick('9', 'deposit')">9</button>
          </div>
          <div class="row">
            <button (click)="onNumpadClick('4', 'deposit')">4</button>
            <button (click)="onNumpadClick('5', 'deposit')">5</button>
            <button (click)="onNumpadClick('6', 'deposit')">6</button>
          </div>
          <div class="row">
            <button (click)="onNumpadClick('1', 'deposit')">1</button>
            <button (click)="onNumpadClick('2', 'deposit')">2</button>
            <button (click)="onNumpadClick('3', 'deposit')">3</button>
          </div>
        </div>
      </div>
    </div>

    <div class="deposit-footer">
      <button class="deposit-cancel-btn" (click)="closeDepositPopup()">
        CANCEL
      </button>
      <button class="deposit-print-btn" (click)="printDeposit()">PRINT</button>
    </div>
  </div>
</div>

<!-- Withdraw Modal -->
<div class="withdraw-modal-overlay" *ngIf="showWithdraw">
  <div class="withdraw-modal-box">
    <h3 class="withdraw-modal-title">WITHDRAW</h3>

    <div class="withdraw-modal-content">
      <!-- Left Side: Form -->
      <div class="withdraw-form">
        <label>Operator ID</label>
        <input
          type="text"
          [(ngModel)]="withdrawOperatorId"
          class="withdraw-input"
        />

        <label>Shroff ID</label>
        <input
          type="text"
          [(ngModel)]="withdrawShroffId"
          class="withdraw-input"
        />

        <label>Amount</label>
        <input
          type="text"
          [(ngModel)]="withdrawAmount"
          class="withdraw-input"
        />
      </div>

      <!-- Right Side: Numpad -->
      <div class="withdraw-numpad">
        <div class="row">
          <button (click)="onNumpadClick('0', 'withdraw')">0</button>
          <button class="back-btn" (click)="onBackspace('withdraw')">
            BACK
          </button>
        </div>
        <div class="row">
          <button (click)="onNumpadClick('7', 'withdraw')">7</button>
          <button (click)="onNumpadClick('8', 'withdraw')">8</button>
          <button (click)="onNumpadClick('9', 'withdraw')">9</button>
        </div>
        <div class="row">
          <button (click)="onNumpadClick('4', 'withdraw')">4</button>
          <button (click)="onNumpadClick('5', 'withdraw')">5</button>
          <button (click)="onNumpadClick('6', 'withdraw')">6</button>
        </div>
        <div class="row">
          <button (click)="onNumpadClick('1', 'withdraw')">1</button>
          <button (click)="onNumpadClick('2', 'withdraw')">2</button>
          <button (click)="onNumpadClick('3', 'withdraw')">3</button>
        </div>
      </div>
    </div>

    <div class="withdraw-footer">
      <button class="withdraw-cancel-btn" (click)="closeWithdrawPopup()">
        CANCEL
      </button>
      <button class="withdraw-print-btn" (click)="printWithdraw()">
        PRINT
      </button>
    </div>
  </div>
</div>



<!-- View RC Modal -->
<div class="viewrc-modal-overlay" *ngIf="showViewRc">
  <div class="viewrc-modal-box">
    <h3 class="viewrc-modal-title">VIEW RC</h3>
    <div class="viewrc-modal-body">
      <ng-container *ngIf="raceCardData && !raceCardData.error; else errorTpl">
        <p class="top"><strong>📍 Venue:</strong> {{ raceCardData.Venue }}</p>
        <p class="top"><strong>📅 Date:</strong> {{ raceCardData.date }}</p>

        <div class="rc-table-container">
          <h4>🏇 Race Lists</h4>
          <table class="rc-table">
            <thead>
              <tr>
                <th class="new">Races</th>
                <th class="new">Race Numbers</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let races of raceCardData.raceVenueRaces.races; let i = index">
                <td class="table_col">Race {{ i + 1 }}</td>
                <td class=" table_col1">{{ races.join('  , ') }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="rc-table-container" *ngIf="raceCardData.pools?.comboRaces">
          <h4>🎯Races</h4>
          <table class="rc-table">
            <thead>
              <tr>
                <th class="new">Pool</th>
                <th class="new">Races</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let pool of objectKeys(raceCardData.pools.comboRaces)">
                <td class="table_col">{{ pool }}</td>
                <td class="table_col1">{{ raceCardData.pools.comboRaces[pool].join('  ,  ') }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </ng-container>

      <ng-template #errorTpl>
        <p class="error-text">❌ {{ raceCardData?.error }}</p>
      </ng-template>
    </div>

    <div class="viewrc-modal-footer">
      <button class="viewrc-cancel-btn" (click)="closeViewRcPopup()">CANCEL</button>
    </div>
  </div>
</div>