@extends('layouts.master')

@section('content')
<script src="{{ asset('dist/plugins/jquery/jquery.min.js') }}"></script>
<style>
  .modal-body>.info-box {
    border: none;
    background: #f9f9f9;
    margin-bottom: 10px !important;
    border-radius: 6px;
    margin: 8px;
  }

  .modal-body>.info-box>span.info-box-icon {
    width: 40px;
    background: #5c55a1;
    color: #fff;
    font-size: 24px;
  }

  .card-body {
    background: #1f272b;
    overflow: auto;
    padding: 0;
    box-shadow: 1px 6px 10px #bdb5b5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-radius: 0px;
    cursor: pointer;
    transition: .15s all ease;
    min-height: 190px;
  }

  .card-body h4 {
    font-size: 1.2rem;
  }

  .card-body .w-75 {
    width: 100% !important;
    margin-bottom: 2px;
    font-size: 14px;
  }

  .card-body i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.6rem;
    left: 1rem;
    color: rgba(255, 255, 255, .2);
    transition: .15s all ease;
  }

  .card-body:hover {
    box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(33, 37, 41, .3), 0 0 1.5rem .5rem rgba(33, 37, 41, .05) !important;
    transition: .15s all ease;
  }

  .card-body:hover i {
    left: 1.5rem;
    font-size: 3rem;
  }

  .modal-body .info-box-content {
    color: #000;
    font-weight: normal;
    font-size: 14px;
  }

  .modal-body .info-box-text {
    font-size: 18px;
    color: #5c55a1;
  }

  .dashboard_common {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: auto;
  }

  .welcome_txt {
    font-size: 2.5em;
    color: #3f1868;
  }

  .bg-success {
    background-color: #28a745;
  }

  .bg-danger {
    background-color: #ffc107;
  }

  .bg-color {
    background-color: #ffc107;
    color: #fff;
  }

  .bg-primary {
    background-color: #17a2b8 !important;
  }

  .col-md-6 {
    padding: 7px;
  }

  .viewmore {
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 0;
    margin-top: 15px;
    position: absolute;
    bottom: 24px;
  }

  .view-bg-green {
    background: #24963e;
  }

  .view-bg-blue {
    background: #1591a5;
  }

  .view-bg-yellow {
    background: #e5ad06;
  }

  .view-bg-red {
    background: #c6303e;
  }

  .common-row {
    width: 100%;
    align-items: flex-start;
  }

  .dash_box_1 {
    background: #6366f1 !important;
    color: #fff;
    border-radius: 5px !important;
  }

  .dash_box_2 {
    background: #22d3ee !important;
    color: #fff;
    border-radius: 5px !important;
  }

  .dash_box_3 {
    background: #34d399 !important;
    color: #fff;
    border-radius: 5px !important;
  }

  .dash_box_4 {
    background: #72a6f4 !important;
    color: #fff;
    border-radius: 5px !important;
  }

  .dash_box_5 {
    background: #f4a872 !important;
    color: #fff;
    border-radius: 5px !important;
  }

  .viewmore {
    background: rgb(0 0 0 / 20%) !important;
    color: #fff !important;
  }

  .viewmore a {
    color: #fff !important;
  }

  @media screen and (max-width:767px) {
    .welcome_txt {
      font-size: 1.8em;
      line-height: 1.2;
    }

    .welcome_logo {
      max-width: 160px;
    }
  }

  .small-box {
    text-align: left;
  }

  .welcome_txt {
    font-size: 2.5em;
    color: #3f1868;
  }

  .dashboard-com {
    align-items: flex-start;
    margin-top: 30px;
  }

  .content-header {
    margin: 15px .9rem 15px;
  }

  @media screen and (max-width:767px) {
    .welcome_txt {
      font-size: 1.8em;
      line-height: 1.2;
    }

    .welcome_logo {
      max-width: 160px;
    }
  }

  .small-box .icon {
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    position: absolute;
    top: -5px;
    right: 10px;
    z-index: 0;
    font-size: 40px;
    color: rgba(0, 0, 0, 0.15);
  }

  .small-box:hover .icon {
    font-size: 45px;
  }

  .card-bodys.p-0 .table tbody>tr>td:first-of-type,
  .card-bodys.p-0 .table tbody>tr>th:first-of-type,
  .card-bodys.p-0 .table thead>tr>td:first-of-type,
  .card-bodys.p-0 .table thead>tr>th:first-of-type,
  .pl-4,
  .px-4 {
    padding-left: 1.5rem !important;
    text-align: left;
    border: #1f272b;
  }

  .col-md-6 {
    padding-right: 7.5px;
    padding-left: 7.5px;
  }

  i.fa.fa-square.text-gray {
    color: lightgray;
  }
</style>
<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">{{trans('breadcrumbs.Dashboard')}}</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item active">{{trans('breadcrumbs.Dashboard')}}</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <!-- Info boxes -->
      <div class="dashboard_common">
        <div class="row common-row">
          <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 mx-auto">
            <div class="card-body  text-right bg-success dash_box_1">
              <h4>Player Status</h4>
              <p class="w-75">Active Players : {{$activeUser}}</p>
              <p class="w-75">In-active Players : {{$inactiveUser}}</p>
              <p class="w-75">Blocked Players : {{$blockedUser}}</p>

              <p class="w-75"> </p>
              <p class="viewmore view-bg-green"> <a href="{{ route('playerSearch') }}">View More</a></p>
              <i class="fa fa-user-o" aria-hidden="true"></i>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 mx-auto">
            <div class="card-body  text-right bg-primary dash_box_2">
              <h4>Total P/L </h4>
              <p class="w-75">Total Bet :{{(float) $today['totalBet']}} </p>
              <p class="w-75">Total Win : {{(float) $today['totalWin']}} </p>
              <p class="w-75">Total Margin : {{(float) $today['totalNet']}} </p>
              <p class="viewmore view-bg-blue"><a href="{{ route('turnoverReport') }}?from=27-05-2026 00:00:00&to=27-05-2026 23:59:59">View More</a></p>
              <i class="fa fa-bar-chart" aria-hidden="true"></i>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 mx-auto">
            <div class="card-body  text-right bg-color  dash_box_3">
              <h4>Weekly P/L</h4>
              <p class="w-75">Total Bet : {{(float) $week['totalBet']}} </p>
              <p class="w-75">Total Win : {{(float) $month['totalWin']}} </p>
              <p class="w-75">Total Margin : {{(float) $month['totalNet']}} </p>
                            <p class="viewmore view-bg-yellow"><a href="{{ route('turnoverReport') }}?from=25-05-2026 00:00:00&to=27-05-2026 23:59:59">View More</a></p>
              <i class="fa fa-tachometer" aria-hidden="true"></i>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 mb-5 mb-lg-0 mx-auto">
            <div class="card-body  text-right bg-danger dash_box_4">
              <h4>Monthly P/L</h4>
              <p class="w-75">Total Bet : {{(float) $month['totalBet']}} </p>
              <p class="w-75">Total Win : {{(float) $month['totalWin']}}</p>
              <p class="w-75">Total Margin : {{(float) $month['totalNet']}}</p>
                            <p class="viewmore view-bg-red"><a href="{{ route('turnoverReport') }}?from=01-05-2026 00:00:00&to=31-05-2026 23:59:59">View More</a></p>
              <i class="fa fa-area-chart" aria-hidden="true"></i>
            </div>
          </div>

          <!-- active user count -->
          <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
            <div class="card-body  text-right bg-secondary dash_box_5">
              <h4>Live Users status</h4>
              <p class="w-75">Live User count : {{$currentlyLoggedInUsers}} </p>
                            <i class="fa fa-users" aria-hidden="true"></i>
            </div>
          </div>

        </div>
      </div>

    </div><!--/. container-fluid -->

    <br><br>
    <div class="row">
      <!-- <div class="col-lg-6 mx-auto">
 <div class="col-lg-12 ">
          <div class="card">
      <h5 class="mb-4">Last Seven Days T/O Graph</h5>
            <div class="card-bodys">
              <div class="position-relative mb-4">
                <canvas id="sales-chart" height="150"></canvas>
              </div>

              <div class="d-flex flex-row justify-content-end">
                <span class="mr-2">
                  <i class="fa fa-square text-primary"></i> Last Seven Days
                </span>
              </div>
            </div>
          </div> 
        </div>
</div> -->

      <!-- <div class="col-lg-6 mx-auto">
 <div class="col-lg-12 ">
 <div class="card"><h5 class="mb-4">Last & Current Week T/O Comparison Graph</h5>
            <div class="card-bodys">

              <div class="position-relative mb-4">
                <canvas id="visitors-chart" height="225"></canvas>
              </div>
              <div class="d-flex flex-row justify-content-end">
                <span class="mr-2">
                  <i class="fa fa-square text-primary"></i> This Week
                </span>

                <span>
                  <i class="fa fa-square text-gray"></i> Last Week
                </span>
              </div>
            </div>
          </div>
          
        </div>
</div> -->
    </div>
  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<div class="modal fade" id="landing_popup" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">{{trans('layout.notice')}}</h4>
      </div>
      <div class="modal-body" style="padding: 0;">
        <div class="info-box">
          <span class="info-box-icon"><i class="fa fa-bell-o"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">{{trans('layout.notifications')}}</span>
            <span>{{trans('layout.notification-msg')}}</span>
          </div>
        </div>
        <div class="info-box">
          <span class="info-box-icon"><i class="fa fa-arrows-alt"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">{{trans('layout.fullscreen')}}</span>
            <span>{{trans('layout.fullscreen-msg')}}</span>
          </div>
        </div>
        <div class="info-box">
          <span class="info-box-icon"><i class="fa fa-mobile"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">{{trans('layout.mobile-view')}}</span>
            <span>{{trans('layout.mobile-view-msg')}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('javascript')
<script src="{{ asset('dist/plugins/chartjs-old/Chart.min.js') }}"></script>
<script src="/dist/plugins/chart.js/Chart.min.js"></script>

<script>
  $(function() {
    'use strict'

    var ticksStyle = {
      fontColor: '#495057',
      fontStyle: 'bold'
    }

    var mode = 'index'
    var intersect = true

    var $salesChart = chart($('#sales-chart'));
    var $salesCharts = chart($('#sales-charts'));

    function chart($chart) {

      var salesChart = new Chart($chart, {
        type: 'bar',
        data: {
          labels: Object.values(null),
          datasets: [{
            backgroundColor: '#007bff',
            borderColor: '#007bff',
            data: Object.values(null)
          }, ]
        },
        options: {
          maintainAspectRatio: true,
          tooltips: {
            mode: mode,
            intersect: intersect
          },
          hover: {
            mode: mode,
            intersect: intersect
          },
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              // display: false,
              gridLines: {
                display: true,
                lineWidth: '4px',
                color: 'rgba(0, 0, 0, .2)',
                zeroLineColor: 'transparent'
              },
              ticks: $.extend({
                beginAtZero: true,

                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                  if (value >= 1000) {
                    value /= 1000
                    value += 'k'
                  }
                  return "{{env('CURRENCY', '')}} " + value
                }
              }, ticksStyle)
            }],
            xAxes: [{
              display: true,
              gridLines: {
                display: false
              },
              ticks: ticksStyle
            }]
          }
        }
      })
    };

    var $visitorsChart = $('#visitors-chart')
    var visitorsChart = new Chart($visitorsChart, {
      data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
            type: 'line',
            data: Object.values(null),
            backgroundColor: 'transparent',
            borderColor: '#007bff',
            pointBorderColor: '#007bff',
            pointBackgroundColor: '#007bff',
            fill: false
            // pointHoverBackgroundColor: '#007bff',
            // pointHoverBorderColor    : '#007bff'
          },
          {
            type: 'line',
            data: Object.values(null),
            backgroundColor: 'tansparent',
            borderColor: '#ced4da',
            pointBorderColor: '#ced4da',
            pointBackgroundColor: '#ced4da',
            fill: false
            // pointHoverBackgroundColor: '#ced4da',
            // pointHoverBorderColor    : '#ced4da'
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        tooltips: {
          mode: mode,
          intersect: intersect
        },
        hover: {
          mode: mode,
          intersect: intersect
        },
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            // display: false,
            gridLines: {
              display: true,
              lineWidth: '4px',
              color: 'rgba(0, 0, 0, .2)',
              zeroLineColor: 'transparent'
            },
            ticks: $.extend({
              beginAtZero: true,
              suggestedMax: 200
            }, ticksStyle)
          }],
          xAxes: [{
            display: true,
            gridLines: {
              display: false
            },
            ticks: ticksStyle
          }]
        }
      }
    });
  })
</script>

<!-- AdminLTE App -->
<!-- <script src="{{ asset('dist/js/adminlte.js') }}"></script> -->
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{ asset('dist/js/pages/dashboard2.js') }}"></script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="{{ asset('dist/js/demo.js') }}"></script> -->
@if(Session::has('landing_popup'))
<script>
  $('#landing_popup').modal('toggle');
</script>
@endif
@stop