<!-- Top Info Bar -->
<div class="top-bar d-flex justify-content-between align-items-center">
  <div class="text-light small ps-3">
    {{ dateTime }}
  </div>
  <div class="d-flex align-items-center text-light small justify-content-end flex-grow-1">
    <span class="me-2">B.T.No:1111</span>
    <div class="top-live-button text-center" (click)="ping()">LIVE</div>
  </div>
</div>

<!-- Main Navbar -->
<nav class="navbar custom-navbar px-0">
  <div class="container-fluid p-0 d-flex align-items-center">
    <button class="hamburger d-lg-none ms-auto me-3" (click)="toggleMenu()">&#9776;</button>

    <!-- Desktop View -->
    <div class="d-none d-lg-flex justify-content-between align-items-center w-100">
      <div class="d-flex" style="width: 50vw;">
        <button class="nav-dropdown w-50 text-start ps-3" (click)="openVenueModal()">Venue | {{ selectedVenue }}</button>
        <button class="nav-dropdown w-50 text-start ps-3" (click)="openRaceModal()">Race No. | {{ selectedRace }}</button>
      </div>
      <div class="d-flex justify-content-end" style="width: 40vw;">
        <div class="nav-button flex-grow-1 text-center" (click)="showWalletModal = true">Wallet</div>
        <div class="nav-button flex-grow-1 text-center" (click)="showResultModal = true">Result</div>
        <div class="nav-button flex-grow-1 text-center" (click)="showMessagesModal = true">Messages</div>
        <div class="nav-button flex-grow-1 text-center" (click)="showLogModal = true">View-Log</div>
        <div class="nav-button flex-grow-1 text-center">Log Out</div>
      </div>
    </div>

    <!-- Mobile View -->
    <div class="d-lg-none w-100 mt-2 d-flex justify-content-end" *ngIf="isMenuOpen">
      <div class="mobile-menu-container p-3" style="width: 50%; background-color: #0d329f;">
        <button class="nav-dropdown w-100 text-end pe-3" (click)="openVenueModal()">Venue | {{ selectedVenue }}</button>
        <button class="nav-dropdown w-100 text-end pe-3" (click)="openRaceModal()">Race No. | {{ selectedRace }}</button>

        <div class="d-flex flex-column text-end">
          <div class="nav-button w-100 text-end pe-3 py-2 border-top" (click)="showWalletModal = true">Wallet</div>
          <div class="nav-button w-100 text-end pe-3 py-2 border-top" (click)="showResultModal = true">Result</div>
          <div class="nav-button w-100 text-end pe-3 py-2 border-top" (click)="showMessagesModal = true">Messages</div>
          <div class="nav-button w-100 text-end pe-3 py-2 border-top" (click)="showLogModal = true">View-Log</div>
          <div class="nav-button w-100 text-end pe-3 py-2 border-top">Log Out</div>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- Wallet Modal -->
<div class="wallet-modal-overlay" *ngIf="showWalletModal" (click)="closeModals()">
  <div class="wallet-modal-box" (click)="$event.stopPropagation()">
    <h5>WALLET</h5>
    <table class="wallet-table">
      <tbody>
        <tr><td>WITHDRAW</td><td>{{ wallet.withdraw }}</td></tr>
        <tr><td>DEPOSIT</td><td>{{ wallet.deposit }}</td></tr>
        <tr><td>PAY-OUT</td><td>{{ wallet.payout }}</td></tr>
        <tr><td>CANCEL</td><td>{{ wallet.cancel }}</td></tr>
        <tr><td>TICKETING</td><td>{{ wallet.ticketing }}</td></tr>
        <tr><td>BALANCE</td><td>{{ wallet.balance }}</td></tr>
      </tbody>
    </table>
    <button class="btn btn-secondary mt-2" (click)="closeModals()">CANCEL</button>
  </div>
</div>

<!-- Result Modal -->
<div class="result-modal-overlay" *ngIf="showResultModal" (click)="closeModals()">
  <div class="result-modal-box" (click)="$event.stopPropagation()">
    <h5>RESULTS</h5>
    <div class="btn-group">
      <button class="btn btn-secondary" (click)="closeModals()">CANCEL</button>
      <button class="btn btn-primary">ERASE</button>
    </div>
  </div>
</div>

<!-- Messages Modal -->
<div class="messages-modal-overlay" *ngIf="showMessagesModal" (click)="closeModals()">
  <div class="messages-modal-box" (click)="$event.stopPropagation()">
    <h5>MESSAGES</h5>
    <ul class="messages-list">
      <li *ngFor="let msg of messages">{{ msg }}</li>
    </ul>
<button class="btn-cancel" (click)="closeModals()">CANCEL</button>
  </div>
</div>

<!-- View Log Modal -->
<div class="viewlog-modal-overlay" *ngIf="showLogModal" (click)="closeModals()">
  <div class="viewlog-modal-box" (click)="$event.stopPropagation()">
    <h5>VIEW-LOG</h5>
    <table class="viewlog-table">
      <thead>
        <tr>
          <th>Description</th>
          <th>Venue</th>
          <th>Ticket Number</th>
          <th>Pool Name</th>
          <th>Total Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let log of logs">
          <td>{{ log.description }}</td>
          <td>{{ log.venue }}</td>
          <td>{{ log.ticketNumber }}</td>
          <td>{{ log.poolName }}</td>
          <td>{{ log.totalAmount }}</td>
        </tr>
      </tbody>
    </table>
    <button class="cancel-btn" (click)="closeModals()">CANCEL</button>
  </div>
</div>

<!-- Venue Modal -->
<div class="modal-overlay" *ngIf="showVenueModal" (click)="closeModals()">
  <div class="modal-box" (click)="$event.stopPropagation()">
    <h5>Select Venue</h5>
    <div class="modal-option" *ngFor="let venue of venues" (click)="selectVenue(venue)">
      {{ venue }}
    </div>
  </div>
</div>

<!-- Race Modal -->
<div class="modal-overlay" *ngIf="showRaceModal" (click)="closeModals()">
  <div class="modal-box" (click)="$event.stopPropagation()">
    <h5>Select Race</h5>
    <div class="modal-option" *ngFor="let race of races" (click)="selectRace(race)">
      {{ race }}
    </div>
  </div>
</div>
