<div class="flex flex-col flex-auto min-w-0">
  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
    <div class="w-full max-w-screen-xl mx-auto">
      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
        <!-- Budget distribution -->
        <div
          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
        >
          <div class="text-lg font-medium tracking-tight leading-6 truncate">
            루징데이터
          </div>

          <!-- Search -->
          <div
            class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
          >
            <!-- Actions -->
            <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
              <!-- Search -->
              <!-- Add user button -->
              <button
                mat-flat-button
                [color]="'primary'"
                fxFlex
                (click)="__createProduct()"
              >
                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                <span class="ml-2 mr-1" (click)="__onClickPrev($event)"
                  >목록으로</span
                >
              </button>
              <button
                mat-flat-button
                [color]="'primary'"
                fxFlex
                (click)="__onClickPrev($event)"
              >
                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                <span class="ml-2 mr-1">이전페이지</span>
              </button>
              <button
                mat-flat-button
                [color]="'primary'"
                fxFlex
                (click)="__createProduct()"
              >
                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                <span class="ml-2 mr-1">엑셀저장</span>
              </button>
            </div>
          </div>

          <div
            class="flex flex-col flex-auto mt-2 overflow-x-auto"
            style="overflow: auto"
          >
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="loosingDataSource"
            >
              <!-- 아이디 -->
              <ng-container matColumnDef="userId" sticky>
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  style="display: 'none'"
                ></th>
                <td mat-cell *matCellDef="let info; let i = index">
                  <span class="font-medium text-right">
                    {{ info.signinId }}
                  </span>
                </td>
              </ng-container>
              <ng-container matColumnDef="signinId" sticky>
                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
                  아이디
                </th>
              </ng-container>

              <!-- 코드 -->
              <ng-container matColumnDef="userCode" sticky>
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  style="display: 'none'"
                ></th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.code }}
                  </span>
                </td>
              </ng-container>
              <ng-container matColumnDef="code" sticky>
                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
                  코드
                </th>
              </ng-container>

              <!-- 카지노루징 시작-->
              <!-- 윈로스 -->
              <ng-container matColumnDef="casinoWinLoss">
                <th mat-header-cell *matHeaderCellDef>윈로스</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.casinoReport.betWinLossmoney
                  }}</span>
                </td>
              </ng-container>
              <!-- 롤링 -->
              <ng-container matColumnDef="casinoRolling">
                <th mat-header-cell *matHeaderCellDef>롤링</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.casinoReport.rollingMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.casinoReport.rollingBottomMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.casinoReport.rollingMeMoney }}
                  </span>
                </td>
              </ng-container>
              <!-- 손익 -->
              <ng-container matColumnDef="casinoProfitLoss">
                <th mat-header-cell *matHeaderCellDef>손익</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.casinoReport.profitLossMoney }}
                  </span>
                </td>
              </ng-container>
              <!-- 루징요율 -->
              <ng-container matColumnDef="casinoLoosing">
                <th mat-header-cell *matHeaderCellDef>루징요율</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.casinoReport.loosingRate
                  }}</span>
                </td>
              </ng-container>
              <!-- 본인 -->
              <ng-container matColumnDef="casinoSelf">
                <th mat-header-cell *matHeaderCellDef>본인</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.casinoReport.meMoney
                  }}</span>
                </td>
              </ng-container>

              <!-- 하부 -->
              <ng-container matColumnDef="casinoBottom">
                <th mat-header-cell *matHeaderCellDef>하부</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.casinoReport.bottomMoney
                  }}</span>
                </td>
              </ng-container>
              <!-- 실정산금 -->
              <ng-container matColumnDef="casinoCalculate">
                <th mat-header-cell *matHeaderCellDef>실정산금</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.casinoReport.calculateMoney
                  }}</span>
                </td>
              </ng-container>

              <!-- 카지노루징 끝-->

              <!-- 슬롯루징 시작-->
              <!-- 윈로스 -->
              <ng-container matColumnDef="slotWinLoss">
                <th mat-header-cell *matHeaderCellDef>윈로스</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.slotReport.betWinLossmoney
                  }}</span>
                </td>
              </ng-container>
              <!-- 롤링 -->
              <ng-container matColumnDef="slotRolling">
                <th mat-header-cell *matHeaderCellDef>롤링</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.slotReport.rollingMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.slotReport.rollingBottomMoney }}
                    <hr style="margin: 7px 0px" />
                    {{ info.slotReport.rollingMeMoney }}
                  </span>
                </td>
              </ng-container>
              <!-- 손익 -->
              <ng-container matColumnDef="slotProfitLoss">
                <th mat-header-cell *matHeaderCellDef>손익</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.slotReport.profitLossMoney }}
                  </span>
                </td>
              </ng-container>
              <!-- 루징요율 -->
              <ng-container matColumnDef="slotLoosing">
                <th mat-header-cell *matHeaderCellDef>루징요율</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.slotReport.loosingRate
                  }}</span>
                </td>
              </ng-container>
              <!-- 본인 -->
              <ng-container matColumnDef="slotSelf">
                <th mat-header-cell *matHeaderCellDef>본인</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.slotReport.meMoney
                  }}</span>
                </td>
              </ng-container>

              <!-- 하부 -->
              <ng-container matColumnDef="slotBottom">
                <th mat-header-cell *matHeaderCellDef>하부</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.slotReport.bottomMoney
                  }}</span>
                </td>
              </ng-container>
              <!-- 실정산금 -->
              <ng-container matColumnDef="slotCalculate">
                <th mat-header-cell *matHeaderCellDef>실정산금</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.slotReport.calculateMoney
                  }}</span>
                </td>
              </ng-container>

              <!-- 슬롯루징 끝-->
              <!-- Star Column -->
              <ng-container matColumnDef="totalCalculate" stickyEnd>
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  style="
                    border-left: 1px solid #e0e0e0;
                    padding-left: 30px;
                    display: none;
                  "
                >
                  &nbsp;
                </th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.totalCalculate
                  }}</span>
                </td>
              </ng-container>
              <ng-container matColumnDef="tempTotalCalculate" stickyEnd>
                <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">
                  총실정산금
                </th>
              </ng-container>

              <!-- Header row second group -->
              <ng-container matColumnDef="header-row-casino-group">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  [attr.colspan]="7"
                  style="text-align: center"
                >
                  카지노루징
                </th>
              </ng-container>

              <!-- Header row second group -->
              <ng-container matColumnDef="header-row-slot-group">
                <th
                  mat-header-cell
                  *matHeaderCellDef
                  [attr.colspan]="7"
                  style="text-align: center; border-left: 1px solid #e0e0e0"
                >
                  슬롯루징
                </th>
              </ng-container>

              <tr
                mat-header-row
                *matHeaderRowDef="[
                  'signinId',
                  'code',

                  'header-row-casino-group',
                  'header-row-slot-group',
                  'tempTotalCalculate'
                ]"
              ></tr>
              <tr mat-header-row *matHeaderRowDef="displayedTableColumns"></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: displayedTableColumns"
              ></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
