@extends('admin.layouts.masterlayout')
@section('styles')
<style>
  .custom-link .icon-box {
    background-color: transparent !important;
  }

  i.fa {
    font-size: 22px;
  }

  table {
    font-size: 18px;
  }
</style>
@endsection
@section('content')
<div class="main-content">
  <!--breadcrumb-->
  <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3 w-100">
    <div class="w-100">
      <div class="row align-items-center">
        <div class="col-md-4 d-flex align-items-center">
          <div class="breadcrumb-title pe-3">Dashboard</div>
          <ol class="breadcrumb mb-0 ps-3">
            <li class="breadcrumb-item">
              <a href="javascript:;"><i class="bx bx-home-alt"></i></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Analytics</li>
          </ol>
        </div>
        <div class="col-md-7 d-flex justify-content-end">
            <form class="d-flex align-items-center" method="get" action="{{ route('dashboard_data_datewise') }}">
                <input type="text" name="start_date" class="form-control datetimepickerget me-2" value="{{ old('start_date', request('start_date', date('Y-m-d'))) }}">
                <input type="text" name="end_date" class="form-control datetimepickerget me-2" value="{{ old('end_date', request('end_date', date('Y-m-d'))) }}">
                <button type="submit" class="btn btn-primary">
                  <span class="material-icons-outlined fs-5">search</span>
              </button>
            </form>
        </div>

        <div class="col-md-1 d-flex justify-content-end">
          <a class="btn btn-success" href="{{ route('dashboard_data_cron') }}" title="Update Datshboard Data." data-bs-toggle="tooltip">
            <span class="material-icons-outlined fs-5">published_with_changes</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!--end breadcrumb-->

<div class="row">
  <div class="col-12 col-lg-4 col-xxl-4 d-flex">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="">
          <div class="d-flex align-items-center gap-2 mb-2">
            <h5 class="mb-0">Welcome <span class="fw-600">{{session()->get('AdminDetail')->name}}</span></h5>
            <img src="{{asset('new_theme/assets/images/apps/party-popper.png')}}" width="24" height="24" alt="">
          </div>
          <p class="mb-4">You are all wallet balance</p>
          <div class="d-flex align-items-center justify-content-between">
            <div class="">
              <h3 class="mb-0 text-indigo">{{formatCurrency($total_wallet)}}</h3>
              <p class="mb-3">Check details below</p>
              <a class="btn btn-grd btn-grd-primary rounded-5 border-0 px-4" href="{{route('Registerusers.users_wallet')}}">View Details</a>
            </div>
            <img src="{{asset('new_theme/assets/images/apps/gift-box-3.png')}}" width="100" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-4 col-xxl-2 d-flex">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <a href="{{route('Registerusers.users_wallet')}}" class="custom-link">
          <div class="mb-3 d-flex align-items-center justify-content-between">
            <div
              class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-primary  text-white">
              <span class="material-icons-outlined fs-5">account_balance_wallet</span>
            </div>
            <div>

            </div>
          </div>
          <div>
            <h4 class="mb-0">₹{{ $today_add_fund == 0  ? 0  : $today_add_fund }}</h4>
            <p class="mb-3">Today's Deposit</p>
            <div id="radial-chart"></div>

          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 col-xxl-2 d-flex">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <a href="{{route('Registerusers.view_active_users')}}" class="custom-link">
          <div class="mb-3 d-flex align-items-center justify-content-between">
            <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-success text-white">
              <span class="material-icons-outlined fs-5">trending_up</span>
            </div>
            <div>
              {{-- <span class="text-danger d-flex align-items-center"><i
                    class="material-icons-outlined">expand_less</i></span> --}}
            </div>
          </div>
          <div>
            <h4 class="mb-0">₹ {{$total_investment}}</h4>
            <p class="mb-3">Today's Investment</p>
            <div id="barChart"></div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4 col-xxl-2 d-flex">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <a href="{{route('Registerusers.users_wallet')}}" class="custom-link">
          <div class="mb-3 d-flex align-items-center justify-content-between">
            <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-danger text-white">
              <span class="material-icons-outlined fs-5">emoji_events</span>
            </div>

            <div>
              {{-- <span class="text-success d-flex align-items-center"><i
                    class="material-icons-outlined">expand_less</i></span> --}}
            </div>
          </div>
          <div>
            <h4 class="mb-0">₹ {{ $total_winning_distribute == 0 ? 0 : $total_winning_distribute }}</h4>
            <p class="mb-3">Today's Wining</p>
            <div id="lineChart" style="margin-top: 69px;"></div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 col-xxl-2 d-flex">
    <div class="card rounded-5 w-100">
      <div class="card-body">
        <a href="{{route('Registerusers.withdraw_amount_bank')}}" class="custom-link">
          <div class="mb-3 d-flex align-items-center justify-content-between">
            <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-info text-white">
              <span class="material-icons-outlined fs-5">leaderboard</span>
            </div>


            <div>
              {{-- <span class="text-success d-flex align-items-center"><i
                    class="material-icons-outlined">expand_less</i></span> --}}
            </div>
          </div>
          <div>
            <h4 class="mb-0">₹ {{ $total_withdraw == 0 ? 0 : $total_withdraw }}</h4>
            <p class="mb-3">Today's Withdraw</p>
            <div id="lineChart2"></div>
          </div>
        </a>
      </div>
    </div>
  </div>

</div><!--end row-->


<div class="row">
  <div class="col-12 col-xl-4">
    <div class="card w-100 rounded-4">
      <div class="card-body">
        <div class="d-flex flex-column gap-3">
          <div class="d-flex align-items-start justify-content-between">
            <div class="">
              <h5 class="mb-0">Leagues Status</h5>
            </div>

          </div>
          <div class="position-relative">
            <div class="piechart-legend">
              <h2 class="mb-1">{{$total_earning_percentage}} %</h2>
              <h6 class="mb-0">Total Earning</h6>
            </div>
            <div id="chart6"></div>
          </div>
          <div class="d-flex flex-column gap-3">
            <div class="d-flex align-items-center justify-content-between">
              <p class="mb-0 d-flex align-items-center gap-2 w-25"><span
                  class="material-icons-outlined fs-4 text-primary">fiber_manual_record</span>Investment</p>
              <div class="">
                <p class="mb-0">₹ {{$total_investment}}</p>
              </div>
            </div>
            <div class="d-flex align-items-center justify-content-between">
              <p class="mb-0 d-flex align-items-center gap-2 w-25"><span
                  class="material-icons-outlined fs-4 text-danger">fiber_manual_record</span>Refunds</p>
              <div class="">
                <p class="mb-0">₹ {{$total_refund}}</p>
              </div>
            </div>
            <div class="d-flex align-items-center justify-content-between">
              <p class="mb-0 d-flex align-items-center gap-2 w-25"><span
                  class="material-icons-outlined fs-4 text-success">fiber_manual_record</span>Winning</p>
              <div class="">
                <p class="mb-0">₹ {{$total_winning_distribute}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-xl-8">
    <div class="card w-100 rounded-4">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="">
            <h5 class="mb-0">Earning View</h5>
          </div>
          <!-- <div class="dropdown">
              <a href="javascript:;" class="dropdown-toggle-nocaret options dropdown-toggle"
                data-bs-toggle="dropdown">
                <span class="material-icons-outlined fs-5">more_vert</span>
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="javascript:;">Action</a></li>
                <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
                <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
              </ul>
            </div> -->
        </div>
        <div id="chart5"></div>
        <div
          class="d-flex flex-column flex-lg-row align-items-start justify-content-around border p-3 rounded-4 mt-3 gap-3">
          <div class="d-flex align-items-center gap-4">
            <div class="">
              <p class="mb-0 data-attributes">
                <span
                  data-peity='{ "fill": ["#2196f3", "rgb(255 255 255 / 12%)"], "innerRadius": 32, "radius": 40 }'>{{date('F Y')}}</span>
              </p>
            </div>
            <div class="">
              <p class="mb-1 fs-6 fw-bold">Monthly</p>
              <h2 class="mb-0">{{'₹ ' .$current_month_earning}}</h2>
            </div>
          </div>
          <div class="vr"></div>
          <div class="d-flex align-items-center gap-4">
            <div class="">
              <p class="mb-0 data-attributes">
                <span
                  data-peity='{ "fill": ["#ffd200", "rgb(255 255 255 / 12%)"], "innerRadius": 32, "radius": 40 }'>{{date('F Y', mktime(0, 0, 0, date('m')-1, 1, date('Y')))}}</span>
              </p>
            </div>
            <div class="">
              <p class="mb-1 fs-6 fw-bold">Yearly</p>
              <h2 class="mb-0">{{'₹ ' .$current_year_earning}}</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><!--end row-->


<div class="row">
  <div class="col-12 col-lg-6 col-xxl-4 d-flex">
    <div class="card w-100 rounded-4">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="">
            <h5 class="mb-0">Today's Users</h5>
          </div>
        </div>

        <div class="d-flex flex-column gap-4">

          <!-- Register -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Registerusers.view')}}" class="custom-link">
              <div class="text-white rounded-circle d-flex align-items-center bg-grd-primary justify-content-center" style="width: 55px; height: 55px;">
                <!-- <span class="material-icons"><i class="material-icons-outlined material-icons-outlined fs-6">add</i></span> -->
                <span class="material-icons-outlined fs-1">account_circle</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Registerusers.view')}}" class="custom-link">
                <h6 class="mb-0" style="color:white!important;">Registered Users</h6>
              </a>
              {{-- <p class="mb-0">Total: 152</p> --}}
            </div>
            <div class="text-center">
              <a href="{{route('Registerusers.view')}}" class="custom-link">
                <h6 class="mb-1 text-success">{{$todays_total_user_join}}</h6>
              </a>
              {{-- <p class="mb-0 text-muted">Since yesterday</p> --}}
            </div>
          </div>

          <!-- Active Users -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Registerusers.users_active')}}" class="custom-link">

              <div class="bg-grd-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
                <!-- <span class="material-icons"><i class="fa fa-gamepad"></i></span> -->
                <span class="material-icons-outlined fs-1">people_alt</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Registerusers.users_active')}}" class="custom-link">
                <h6 class="mb-0" style="color:white!important;">Active Users</h6>
              </a>
              {{-- <p class="mb-0">Total: 89</p> --}}
            </div>
            <div class="text-center">
              <a href="{{route('Registerusers.users_active')}}" class="custom-link">
                <h6 class="mb-1 text-success">{{$active_contest_users}}</h6>
              </a>
              {{-- <p class="mb-0 text-muted">Since yesterday</p> --}}
            </div>
          </div>

          <!-- Promoters -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Yoububer.view')}}" class="custom-link">
              <div class="bg-grd-warning text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">

                <span class="material-icons-outlined fs-1"> supervised_user_circle</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Yoububer.view')}}" class="custom-link">
                <h6 class="mb-0" style="color:white!important;">Promoters</h6>
              </a>
              {{-- <p class="mb-0">Total: 34</p> --}}
            </div>
            <div class="text-center">
              <a href="{{route('Yoububer.view')}}" class="custom-link">

                <h6 class="mb-1 text-success">{{$total_promoter}}</h6>
              </a>
              {{-- <p class="mb-0 text-muted">Since yesterday</p> --}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-6 col-xxl-4 d-flex">
    <div class="card w-100 rounded-4">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="">
            <h5 class="mb-0">Today's Pending KYC</h5>
          </div>
        </div>

        <div class="d-flex flex-column gap-4">
          <!-- Pancard -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Registerusers.verify_pan')}}" class="custom-link">
              <div class="bg-grd-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
                <span class="material-icons-outlined fs-2"> contact_phone</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Registerusers.verify_pan')}}" class="custom-link">
                <h6 class="mb-0">Pan Card</h6>
              </a>
            </div>
            <a href="{{route('Registerusers.verify_pan')}}" class="custom-link">
              <div class="text-center">
                <h6 class="mb-1 text-success">{{$user_tota_pan}}</h6>
              </div>
            </a>
          </div>

          <!-- Aadhaar Card -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Registerusers.verify_aadhar_card')}}" class="custom-link">
              <div class="bg-grd-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
                <span class="material-icons-outlined fs-2"> assignment_ind</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Registerusers.verify_aadhar_card')}}" class="custom-link">
                <h6 class="mb-0">Aadhaar Card</h6>
              </a>
            </div>
            <a href="{{route('Registerusers.verify_aadhar_card')}}" class="custom-link">
              <div class="text-center">
                <h6 class="mb-1 text-success">{{$user_tota_aadhar}}</h6>
              </div>
            </a>
          </div>

          <!-- Bank Account -->
          <div class="d-flex align-items-center gap-3">
            <a href="{{route('Registerusers.verify_bank_account')}}" class="custom-link">
              <div class="bg-grd-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
                <span class="material-icons-outlined fs-2"> assured_workload</span>
              </div>
            </a>
            <div class="flex-grow-1">
              <a href="{{route('Registerusers.verify_bank_account')}}" class="custom-link">
                <h6 class="mb-0">Bank Account</h6>
              </a>
            </div>
            <a href="{{route('Registerusers.verify_bank_account')}}" class="custom-link">
              <div class="text-center">
                <h6 class="mb-1 text-success">{{$total_bank}}</h6>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-6 col-xxl-4 d-flex">
    <div class="card w-100 rounded-4">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between mb-3">
          <div class="">
            <h5 class="mb-0">Total Wallets</h5>
          </div>
        </div>

        <div class="d-flex flex-column gap-4">
          <!-- Deposits -->
          <div class="d-flex align-items-center gap-3">
            <div class="bg-grd-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
              <span class="material-icons-outlined fs-3">account_balance_wallet</span>
            </div>
            <div class="flex-grow-1">
              <h6 class="mb-0">Deposits</h6>
            </div>
            <div class="text-center">
              <h6 class="mb-1 text-success">{{'₹ '.$Total_add_cash}}</h6>
            </div>
          </div>

          <!-- Winning -->
          <div class="d-flex align-items-center gap-3">
            <div class="bg-grd-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
              <span class="material-icons-outlined fs-3"> emoji_events</span>
            </div>
            <div class="flex-grow-1">
              <h6 class="mb-0">Winning</h6>
            </div>
            <div class="text-center">
              <h6 class="mb-1 text-success">{{'₹ '.$user_total_winning}}</h6>
            </div>
          </div>

          <!-- Bonus -->
          <div class="d-flex align-items-center gap-3">
            <div class="bg-grd-warning text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
              <span class="material-icons-outlined fs-3">paid</span>
            </div>
            <div class="flex-grow-1">
              <h6 class="mb-0">Bonus</h6>
            </div>
            <div class="text-center">
              <h6 class="mb-1 text-primary">{{round($user_total_bonus)}}</h6>
            </div>
          </div>

          <!-- Coins -->
          <div class="d-flex align-items-center gap-3">
            <div class="bg-grd-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 55px; height: 55px;">
              <span class="material-icons-outlined fs-3"> currency_exchange</span>
            </div>
            <div class="flex-grow-1">
              <h6 class="mb-0">Coins</h6>
            </div>
            <div class="text-center">
              <h6 class="mb-1 text-primary">{{round($user_total_coin)}}</h6> <!-- Assuming coins count stored here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div><!--end row-->


<div class="row">
  <div class="col-12 col-xxl-9 d-flex">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3">
          <h5 class="mb-0">Recent Withdrawal Transactions</h5>
          <a class="btn btn-primary" href="{{ route('Registerusers.withdraw_amount_instant') }}">
            <span class="material-icons-outlined fs-4">view_list</span>
          </a>
        </div>
        <div class="table-responsive">
          <table class="table mb-0 table-dark table-striped">
            <thead>
              <tr>
                <th>SNo.</th>
                <th>Email </th>
                <th>Mobile </th>
                <th>TDS</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody>
           @if(!empty($transactionLast10) && !$transactionLast10->isEmpty())
              @foreach($transactionLast10 as $key=>$val)
              <tr>
                <td>{{$key+1}}</td>
                <td>{{$val->email??'N/A'}}</td>
                <td>{{$val->mobile ?? 'N/A'}}</td>
                <td>{{'₹ '.$key}}</td>
                <td>{{'₹ '.$val->amount}}</td>
              </tr>
              @endforeach
            @else
              <tr>
                <td colspan="5" class="text-center">No Data Available</td>  
              </tr>
            @endif
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-6 col-xxl-3 d-flex flex-column">
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-5">
          <div>
            <p class="mb-1">Launch Matches</p>
            <h3 class="mb-0">{{$liveMatches ?? 0}}</h3>
          </div>
          <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-info">
            <span class="material-icons-outlined fs-5 text-white"><i class="material-icons-outlined">emoji_events</i></span>
          </div>
        </div>
        <div class="progress mb-0" style="height:6px;">
          <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-5">
          <div>
            <p class="mb-1">OTP Consume</p>
            <h3 class="mb-0">15000</h3>
          </div>
          <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-success">
            <span class="material-icons-outlined fs-5 text-white"> <span class="material-icons-outlined fs-3"> password</span></span>
          </div>
        </div>
        <div class="progress mb-0" style="height:6px;">
          <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-5">
          <div>
            <p class="mb-1">Api Hits</p>
            <h3 class="mb-0">45000</h3>
          </div>
          <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-info">
            <span class="material-icons-outlined fs-5 text-white"><span class="material-icons-outlined fs-3"> integration_instructions</span></span>
          </div>
        </div>
        <div class="progress mb-0" style="height:6px;">
          <div class="progress-bar bg-grd-info" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>

    <div class="card rounded-4 w-100">
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-5">
          <div>
            <p class="mb-1">Default Notification Time</p>
            <h3 class="mb-0">3 Minutes</h3>
          </div>
          <div class="wh-42 d-flex align-items-center justify-content-center rounded-circle bg-grd-primary">
            <span class="material-icons-outlined fs-5 text-white"><span class="material-icons-outlined fs-3"> notifications_active</span></span>
          </div>
        </div>
        <!-- <div class="progress mb-0" style="height:6px;">
          <div class="progress-bar bg-grd-primary" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div> -->
      </div>
    </div>




  </div>

</div><!--end row-->

</div>
@php
function formatCurrency($value) {
return isset($value) && !empty($value) ? '₹ ' . $value . ' /-' : '₹ 0 /-';
}
@endphp
@endsection
@section('scripts')
<script>
  var options = {
    chart: {
      type: 'radialBar',
      height: 200,
      sparkline: {
        enabled: true
      }
    },
    series: ['{{$change_percent}}'], // value in percentage
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 135,
        hollow: {
          size: '{{$change_percent}}%',
        },
        track: {
          background: '#1E1E2F', // dark background similar to image
          strokeWidth: '100%'
        },
        dataLabels: {
          show: true,
          name: {
            show: false
          },
          value: {
            fontSize: '22px',
            show: true,
            offsetY: 6,
            color: '#ffffff'
          }
        }
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        gradientToColors: ['#f54291'], // pink
        stops: [0, 100],
        colorStops: [{
            offset: 0,
            color: "#fdd835", // yellow
            opacity: 1
          },
          {
            offset: 100,
            color: "#f54291", // pink
            opacity: 1
          }
        ]
      }
    },
    stroke: {
      lineCap: 'round'
    },
    labels: ['Progress'],
  };

  var chart = new ApexCharts(document.querySelector("#radial-chart"), options);
  chart.render();
</script>
<div id="lineChart" style="min-height: 105px; margin-top: 69px;"></div>

<script>
  var options = {
    chart: {
      type: 'area',
      height: 100,
      sparkline: {
        enabled: true
      }
    },
    series: [{
      name: 'Sales',
      data: @json($challengeWinningChartData) // ← Customize your data here
    }],
    stroke: {
      curve: 'smooth',
      width: 3
    },
    fill: {
      type: 'gradient',
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.4,
        opacityTo: 0.0,
        stops: [0, 90, 100]
      }
    },
    colors: ['#00E396'], // Neon green color
    tooltip: {
      enabled: false
    }
  };

  var chart = new ApexCharts(document.querySelector("#lineChart"), options);
  chart.render();
</script>
<div id="barChart" style="height: 150px;"></div>

<script>
  var options = {
    chart: {
      type: 'bar',
      height: 150,
      sparkline: {
        enabled: true
      }
    },
    series: [{
      name: 'Revenue',
      data: @json($registeredUsersChartData) // Sample data, edit as needed
    }],
    plotOptions: {
      bar: {
        columnWidth: '40%',
        borderRadius: 4,
        endingShape: 'rounded'
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: "vertical",
        gradientToColors: ["#8e2de2"], // purple
        stops: [0, 100]
      }
    },
    colors: ["#ff0080"], // pink
    tooltip: {
      enabled: false
    }
  };

  var chart = new ApexCharts(document.querySelector("#barChart"), options);
  chart.render();
</script>
<div id="lineChart2" style="height: 120px;"></div>

<script>
  var options = {
    chart: {
      type: 'line',
      height: 120,
      sparkline: {
        enabled: true
      }
    },
    series: [{
      name: 'Sales',
      data: @json($challengeWithdrawChartData) // Example data points
    }],
    stroke: {
      curve: 'straight',
      width: 3
    },
    colors: ['#ff0080'],
    markers: {
      size: 6,
      colors: ['#ff0080'], // Marker fill
      strokeColors: '#ffffff', // White border
      strokeWidth: 2,
      hover: {
        size: 8
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: "horizontal",
        gradientToColors: ['#00eaff'], // End color (light blue)
        stops: [0, 100]
      }
    },
    tooltip: {
      enabled: false
    }
  };

  var chart = new ApexCharts(document.querySelector("#lineChart2"), options);
  chart.render();
</script>
<script>
  const chartData = {
    labels: ['Investment', 'Refund', 'Wining'],
    series: [0, 0, 0]
  };

  const options = {
    series: chartData.series,
    chart: {
      type: 'donut',
      height: 300
    },
    labels: chartData.labels,
    colors: ['#007bff', '#dc3545', '#28a745'],
    legend: {
      show: false
    },
    dataLabels: {
      enabled: true
    },
    tooltip: {
      y: {
        formatter: val => `${val}%`
      }
    }
  };

  const chart = new ApexCharts(document.querySelector("#chart6"), options);
  chart.render();

  // chart 5

  var options = {
    series: [{
      name: "Earning",
      data: [14000, 41, 35, 51, 25, 18, 21, 35, 15]
    }],
    chart: {
      foreColor: "#eee",
      height: 200,
      type: 'bar',
      toolbar: {
        show: !1
      },
      sparkline: {
        enabled: !1
      },
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: 2,
      curve: 'smooth'
    },
    plotOptions: {
      bar: {
        columnWidth: "45%",
        endingShape: "rounded"
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        gradientToColors: ['#fff'],
        shadeIntensity: 1,
        type: 'vertical',
        opacityFrom: 0.8,
        opacityTo: 0.1,
        stops: [0, 100, 100, 100]
      },
    },
    colors: ["#fff"],
    grid: {
      show: true,
      borderColor: 'rgba(255, 255, 255, 0.15)',
    },
    xaxis: {
      categories: ['Apr', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
    }
  };

  var chart = new ApexCharts(document.querySelector("#chart5"), options);
  chart.render();
</script>
@endsection