@extends('main.layouts.app')
@section('content')
<style>
    /* body, html {
        min-height: 100%;
        overflow-x: hidden;
        background-color: #f8f9fa;
        font-family: 'Inter', sans-serif;
    }

    .container {
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    } */

    .account-balance {
  font-family: 'Segoe UI', sans-serif;
}

.wallet-section {
    border-radius: 20px;
}

.imagcover {
    padding: 10px;
    background: white;
    border-radius: 5px;
    margin-left: 10px;
}

.wallet-section img {
  border-radius: 5px;
}

.bg-purple{
    background-color: #0E194D;
}

    body, html {
            min-height: 100%;
            overflow-x: hidden;
        }
    .date h3 {
        font-size: 11px;
        line-height: 11px;
        color: #1f365c;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .date span {
        font-size: 10px;
    }


    .section .section-header {
        flex-wrap: wrap;
        margin-bottom: 20px !important;
    }


    .br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    .color_box{
        width:10%;
        margin:1px;
        display: flex;
        flex-direction: column;
    }

    .bet_20{
        width:20%;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    .color_cover_box{
        display:flex;
    }

    .bet_head{
        font-size:18px;
        font-weight: 800;
    }
    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .color_box {
            width: 32%;
            margin: 1px;
            display: inline-flex;
        }

        .color_cover_box {
            display: block;
        }
    }

    @media (max-width:540px) {
        .color_box {
            width: 48%;
            margin: 1px;
        }

    }


    h1 {
        font-size: 28px;
        font-weight: 700;
        color: #1f365c;
        text-align: center;
        margin-bottom: 30px;
    }

    .game-section {
        margin-bottom: 40px;
    }

    .game-section h2 {
        font-size: 24px;
        font-weight: 600;
        color: #1f365c;
        margin-bottom: 20px;
        text-align: center;
    }

    .wallets {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .wallet {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 20px;
        width: 100%;
        max-width: 300px;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .wallet:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .wallet h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1f365c;
        margin-bottom: 15px;
    }

    .wallet p {
        font-size: 16px;
        color: #666;
        margin-bottom: 0;
    }

    .wallet span {
        font-size: 20px;
        font-weight: 700;
        color: #1f365c;
    }

    @media (max-width: 767px) {
        .wallet {
            max-width: 100%;
        }

        h1 {
            font-size: 24px;
        }

        .game-section h2 {
            font-size: 20px;
        }

        .wallet h3 {
            font-size: 16px;
        }

        .wallet p {
            font-size: 14px;
        }

        .wallet span {
            font-size: 18px;
        }
    }
</style>


<div class="main-content">
    
    <section class="section">
        <div class="section-header d-block bg_blue_color mb-0">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="dash-text">
                                <h5 class="text-white depo mb-0">
                                    <a href="/admin/dashboard"><img src="/img/homepage.png" alt="image"> </a>
                                    Wallet Manager
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="section-body">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-12 game-prediction">


                <div class="account-balance card p-3" >
                        <div class="mb-3 text-center">
                            <h5 class="mb-1">My Account & Balance</h5>
                            <!-- <h3>₹5,254.50</h3> -->
                        </div>

                        <!-- Wallet Section -->
                        <div class="wallet-section bg-purple  p-2 mb-2 d-flex text-white align-items-center">
                         
                            <div class="w-100">
                            <strong>Total Income Balance</strong>
                            <div class="d-flex justify-content-between ">
                                <h2><span>₹5,254.50</span></h2>
                            </div>
                            </div>
                            <div class="imagcover">
                                <img src="{{asset('assets/image/logo_defaultimage.png')}}" alt="Aviator" style="width: 30px; height: 30px;" class="me-2">
                            </div>
                        </div>
                        <div class="wallet-section bg-purple  p-2 mb-2 d-flex text-white align-items-center">
                            <div class="w-100">
                            <strong>Aviator Wallet</strong>
                            <div class="d-flex justify-content-between ">
                                <span>Winning</span><span>₹{{ number_format($aviator, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Company</span><span>₹{{ number_format($aviator, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Total Income</span><span>₹{{ number_format($aviator, 2) }}</span>
                            </div>
                            </div>
                            <div class="imagcover">
                                <img src="{{asset('assets/image/aeroplane.png')}}" alt="Aviator" style="width: 30px; height: 30px;" class="me-2">
                            </div>
                        </div>


                        <div class="wallet-section bg-purple  p-2 mb-2 d-flex text-white align-items-center">
                            <div class="w-100">
                            <strong>Color Prediction</strong>
                            <div class="d-flex justify-content-between ">
                                <span>Winning</span><span>₹{{ number_format($sumBetAmountCp, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Company</span><span>₹{{ number_format($colorPrediction, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Total Income</span><span>{{ number_format($colorPrediction, 2) }}</span>
                            </div>
                            </div>
                            <div class="imagcover">
                                <img src="{{asset('assets/image/colorprediction.png')}}" alt="Aviator" style="width: 30px; height: 30px;" class="me-2">
                            </div>
                        </div>

                        <div class="wallet-section bg-purple  p-2 mb-2 d-flex text-white align-items-center">
                            <div class="w-100">
                            <strong>Dragon-Tiger</strong>
                            <div class="d-flex justify-content-between ">
                                <span>Winning</span><span>₹{{ number_format($sumBetAmountDt, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Company</span><span>₹{{ number_format($dragonTiger, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between ">
                                <span>Total Income</span><span>₹{{ number_format($dragonTiger, 2) }}</span>
                            </div>
                            </div>
                            <div class="imagcover">
                                <img src="{{asset('assets/image/dragon.png')}}" alt="Aviator" style="width: 30px; height: 30px;" class="me-2">
                            </div>
                        </div>


                        <!-- Buttons -->
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-primary"><span class="mr-1"><i class="fa fa-history"></i></span>History</button>
                            <button class="btn btn-primary"><span class="mr-1"><i class="fa fa-money-bill"></i></span>Top-up</button>
                        </div>
                        </div>



                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-12">

 <div class="card p-3" style="border-radius: 15px;">
  <div class="d-flex justify-content-between align-items-center mb-2">
    <div>
      <h6 class="mb-0">Transaction</h6>
      <small class="text-muted">Sort by <a href="#" class="text-primary">Recently ▼</a></small>
    </div>
    <div>
      <button class="btn btn-sm btn-outline-primary me-1"><span class="mr-1"><i class="fa fa-print"></i></span>Print</button>
      <button class="btn btn-sm btn-primary"><span class="mr-1"><i class="fa fa-share-alt"></i></span>Share</button>
    </div>
  </div>

  <!-- Table -->
  <div class="table-responsive">
    <table class="table table-sm text-center align-middle">
      <thead class="table-dark text-white">
        <tr>
          <th>User</th>
          <th>Date</th>
          <th>Amount</th>
          <th>Debit/Credit</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Ravi</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Vikash</td>
          <td>12/06/2025</td>
          <td class="text-success">300₹</td>
          <td>Credit</td>
          <td>Done</td>
        </tr>
        <tr>
          <td>Admin</td>
          <td>12/06/2025</td>
          <td class="text-danger">3000₹</td>
          <td>Debit</td>
          <td>Done</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Link -->
  <div class="text-center mt-2">
    <a href="#" class="text-primary small">Show All My Transactions</a>
  </div>
</div>


                </div>
            </div>

    <!-- Color Prediction Section -->
    <!-- <div class="game-section">
        <h2>Color Prediction</h2>
        <div class="wallets">
            <div class="wallet">
                <h3>Winning Wallet</h3>
                <p>Balance: <span id="color-winning">{{ number_format($sumBetAmountCp, 2) }}</span> </p>
            </div> 
            <div class="wallet">
                <h3>Company Profit</h3>
                <p>Balance: <span id="color-profit">{{ number_format($colorPrediction, 2) }}</span> </p>
            </div>
           <div class="wallet">
                <h3>Total Income</h3>
                <p>Balance: <span id="color-income">{{ number_format($colorPrediction, 2) }}</span> </p>
            </div>
        </div>
    </div> -->

    <!-- Dragon Tiger Section -->
    <!-- <div class="game-section">
        <h2>Dragon Tiger</h2>
        <div class="wallets">
            <div class="wallet">
                <h3>Winning Wallet</h3>
                <p>Balance: <span id="dragon-winning">{{ number_format($sumBetAmountDt, 2) }}</span> </p>
            </div>
            <div class="wallet">
                <h3>Company Profit</h3>
                <p>Balance: <span id="dragon-profit">{{ number_format($dragonTiger, 2) }}</span> </p>
            </div>
            <div class="wallet">
                <h3>Total Income</h3>
                <p>Balance: <span id="dragon-income">{{ number_format($dragonTiger, 2) }}</span> </p>
            </div>
        </div>
    </div> -->

    <!-- Aviator Section -->
    <!-- <div class="game-section">
        <h2>Aviator</h2>
        <div class="wallets">
            <div class="wallet">
                <h3>Winning Wallet</h3>
                <p>Balance: <span id="aviator-winning">{{ number_format($aviator, 2) }}</span> </p>
            </div>
            <div class="wallet">
                <h3>Company Profit</h3>
                <p>Balance: <span id="aviator-profit">{{ number_format($aviator, 2) }}</span> </p>
            </div>
            <div class="wallet">
                <h3>Total Income</h3>
                <p>Balance: <span id="aviator-income">{{ number_format($aviator, 2) }}</span> </p>
            </div>
        </div>
    </div> -->



    </section>
</div>




<!-- <div class="container">



</div> -->


@endsection