@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection
<style>
    .tooltip {
    margin-top: 5px !important; /* Adjust spacing if needed */
}

</style>
@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">

@endsection
@section('breadcrumb-title')
<h3>IB Overview</h3>
@endsection
@section('breadcrumb-items')
<li class="breadcrumb-item">IB Overview</li>
@endsection
@section('content')
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                              <div class="col-md-5 col-sm-5">
                                  <h6 class="me-3 mb-0">Your Referral Link:</h6>
                                  <!-- Display referral link as text -->
                                  <span id="referralLink" class="me-3 text-primary" style="cursor: pointer;">https://example.com/your-referral-link</span>
                                  <!-- Copy button -->
                                  <button class="btn btn-outline-secondary" onclick="copyLink()" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Copy to clipboard">
                                        <i class="fa fa-copy"></i>
                                    </button>

                                  <!-- <small id="copyMessage" class="text-success ms-2" style="display: none;">Link copied to clipboard!</small> -->
                              </div>
                              <div class="col-md-7 col-sm-6 d-flex justify-content-end">
                                <div class="card me-3 p-3 shadow-sm d-flex flex-row align-items-center"  style="width: 15rem; border-radius: 10px;">
                                  <div class="icon-container me-3" style="border-radius: 50%; padding: 8px;">
                                      <i class="fa fa-arrow-up text-success" style="font-size: 20px;"></i>
                                  </div>
                                  <div>
                                      <h4 class="mb-0">0</h4>
                                      <small class="text-success">Total Deposit</small>
                                  </div>
                                </div>
                                <div class="card me-3 p-3 shadow-sm d-flex flex-row align-items-center"  style="width: 15rem; border-radius: 10px;">
                                  <div class="icon-container me-3" style="border-radius: 100%; padding: 8px;">
                                      <i class="fa fa-arrow-down text-danger" style="font-size: 20px;"></i>
                                  </div>
                                  <div>
                                      <h4 class="mb-0">0</h4>
                                      <small class="text-danger">Total Withdraw</small>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="row">
                                <div class="col d-flex justify-content-end ">
                                    <!-- Button 1 -->
                                    <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#userInfoModal">My IB Profile</button>
                                    
                                    <!-- Button 2 -->
                                    <a href="{{ route('ib_summary') }}">
                                        <button class="btn btn-primary me-2">Summary</button>
                                    </a>
                                    <!-- Button 3 -->
                                    <a href="{{ route('ib_statistics') }}">
                                        <button class="btn btn-primary">Statistics</button>
                                    </a>
                                </div>
                            </div>
                            <div class="row  mt-5 mb-5">
                                <div class="col-md-12">
                                <div class="table-responsive">
                                        <table class="display" id="basic-1" role="grid">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Email</th>
                                                    <th>Name</th>
                                                    <th>Level</th>
                                                    <th>Partner IB</th>
                                                    <th>Affiliate Code</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbdoy>                                                                                                                                             </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
      </div>

      <div class="modal fade" id="userInfoModal" tabindex="-1" aria-labelledby="userInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userInfoModalLabel">IB Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- User information content -->
                    <p><strong>IB Name:</strong> John Doe</p>
                    <p><strong>Year(s) of Experience:</strong> 2</p>
                    <p><strong>Average volume per month:</strong> 2</p>
                    <p><strong>No. of existing clients:</strong> 3</p>
                    <!-- Add more user details as needed -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
      </div>


      <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>
// Initialize Bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

// Copy function
function copyLink() {
    // Get the referral link text
    var referralLink = document.getElementById("referralLink").textContent;

    // Create a temporary input to copy the text
    var tempInput = document.createElement("input");
    tempInput.value = referralLink;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    // Show the copy message
    var copyMessage = document.getElementById("copyMessage");
    copyMessage.style.display = "inline";

    // Hide the message after 2 seconds
    setTimeout(function() {
        copyMessage.style.display = "none";
    }, 2000);
}
</script>