@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
@endsection
<style>
.icon-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Custom styling for cards and animation */
.animated-card {
    transition: transform 0.3s ease;
}

.animated-card:hover {
    transform: scale(1.05);
}

/* Card color customization */
.card-earnings {    
    background: linear-gradient(135deg, #28a745, #34d399);
    color: white;
}

.card-lots {
    background: linear-gradient(135deg, #007bff, #6c63ff);
    color: white;
}

/* Count styling */
.count {
    font-size: 2.5rem;
    font-weight: bold;
    color: #f7f7f7; /* White text for better contrast */
}

/* Icon customization with animation */
.card-icon {
    font-size: 3rem;
    color: white;
    animation: bounce 1s infinite alternate;
}


/* Card title styling */
.card-title {
    font-size: 18px;
    color: #f7f7f7; /* White text for readability */
}

.card-body {
    padding: 10px;
    text-align: center;
}
/* Custom styling for the performance message */
.performance-message {
    font-size: 1.25rem;
    font-weight: bold;
    color: #4CAF50; /* Green color for the positive message */
    margin-bottom: 20px;
}

/* Button group styling */
.button-group {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
}

/* Button styling */
.button-group button {
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.button-group button:hover {
    opacity: 0.8;
}

        </style>
@section('breadcrumb-title')
<h3>IB Withdrawal</h3>
@endsection
@section('breadcrumb-items')
<li class="breadcrumb-item">ib Withdrawal</li>
@endsection
@section('content')
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-md-12">
              <div class="card">
                <div class="text-warning text-center mb-4 mt-4" role="alert">
                  <h5>
                    <i class="fa fa-warning"></i>Withdraw your funds carefully!
                  </h5>
                </div>
                <div class="row justify-content-center">
                  <!-- Earned Commission Card -->
                  <div class="col-md-5 mb-3">
                    <div class="card shadow-lg animated-card p-4 text-center card-earnings">
                      <div class="card-body d-flex flex-column align-items-center">
                        <div class="icon-container">
                          <i class="fas fa-dollar-sign card-icon mb-3"></i>
                        </div>
                        <p class="count" id="commissionCount">0.00</p>
                        <h5 class="card-title">Earned Commission</h5>
                      </div>
                    </div>
                  </div>
                  <!-- No. of Lots Card -->
                  <div class="col-md-5 mb-3">
                    <div class="card shadow-lg animated-card p-4 text-center card-lots">
                      <div class="card-body d-flex flex-column align-items-center">
                        <div class="icon-container">
                          <i class="fas fa-chart-bar card-icon mb-3"></i>
                        </div>
                        <p class="count" id="lotsCount">0.00</p>
                        <h5 class="card-title">No. of Lots</h5>
                      </div>
                    </div>
                  </div>
                    <div class="text-center mt-4 mb-4">
                        <p class="performance-message">Muhammad Shoaib, Your performance is great, keep going!</p>
                        <div class="button-group mt-3">
                            <button class="btn btn-success">Withdraw</button>
                            <button class="btn btn-primary">View Details</button>
                        </div>
                    </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- footer start-->
      <script type="text/javascript">
	var session_layout = '{{ session()->get('
	layout ') }}';
</script>
@endsection

@section('script')
<script src="{{ asset('assets/js/clock.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/moment.min.js') }}"></script>
<script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
<script src="{{ asset('assets/js/dashboard/default.js') }}"></script>
<script src="{{ asset('assets/js/notify/index.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.bundle.js') }}"></script>
<script src="{{ asset('assets/js/typeahead/typeahead.custom.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/handlebars.js') }}"></script>
<script src="{{ asset('assets/js/typeahead-search/typeahead-custom.js') }}"></script>
<script src="{{ asset('assets/js/height-equal.js') }}"></script>
<script src="{{ asset('assets/js/animation/wow/wow.min.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
@endsection
      <script>
        function animateCounter(id, start, end, duration) {
          const element = document.getElementById(id);
          let startTime = null;

          function updateCount(currentTime) {
            if (!startTime) startTime = currentTime;
            const progress = Math.min((currentTime - startTime) / duration, 1);
            element.innerText = (progress * (end - start) + start).toFixed(2);
            if (progress < 1) {
              requestAnimationFrame(updateCount);
            }
          }
          requestAnimationFrame(updateCount);
        }
        // Start the counter animation with sample data
        animateCounter("commissionCount", 0, 500.00, 2000);
        animateCounter("lotsCount", 0, 25.00, 2000);
      </script>