@extends('layouts.client_template')
@section('content')
    <style>
        .chart-light {
            padding: 22px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .custom-box {
            background-color: var(--color-white);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 3px 3px 15px 2px rgb(0 0 0 / 27%);
        }
    </style>
    @include('layouts.client_common')


    <main>
        <section class="container boxes">
            <div class="row main_boxes justify-content-center">
                <div class="col-lg-3 col-sm-6">
                    <div class=" box"> <a href="{{ url('client/ibwithdraw') }}" class="d-flex">
                            <div class="box_icon mx-2 withdrawal_i">
                                <svg version="1.1" class="doller_blue" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21 37"
                                    style="enable-background:new 0 0 21 37;" xml:space="preserve">
                                    <path class="st0" d="M9,4.1L8.8,1L12,0l0.2,3.1L9,4.1z M8.8,36.6v-4l3.4,0v3.9H8.8z M10.5,33.2c-0.8,0-1.6,0-2.4-0.1
                            c-0.8,0-1.6-0.1-2.5-0.2c-0.8-0.1-1.6-0.2-2.4-0.3c-0.7-0.1-1.4-0.3-2-0.4v-4.7c0.8,0.1,1.7,0.1,2.7,0.2c1,0.1,2.1,0.1,3.2,0.1
                            c1.1,0,2.1,0,3.1,0c1,0,1.9-0.1,2.6-0.2c0.7-0.2,1.3-0.5,1.7-0.9c0.4-0.5,0.6-1.1,0.6-1.8v-1.1c0-0.9-0.3-1.5-0.8-2
                            c-0.5-0.5-1.2-0.7-2.2-0.7H9.6c-2.8,0-5-0.6-6.5-1.8c-1.5-1.3-2.2-3.4-2.2-6.4v-1.4c0-2.9,0.8-5,2.5-6.3c1.7-1.3,4-2,7.1-2
                            c1.1,0,2.2,0.1,3.2,0.2c1.1,0.1,2.1,0.2,3.1,0.4c1,0.1,1.9,0.3,2.6,0.4v4.7c-1.2-0.1-2.6-0.2-4.1-0.2c-1.5-0.1-2.9-0.1-4.2-0.1
                            c-0.9,0-1.7,0.1-2.4,0.3C7.9,8.9,7.4,9.2,7,9.7c-0.4,0.5-0.6,1.2-0.6,2v0.8c0,1,0.3,1.8,0.9,2.2c0.6,0.5,1.5,0.7,2.6,0.7h2.9
                            c1.8,0,3.3,0.3,4.4,1c1.2,0.6,2,1.5,2.6,2.7c0.6,1.1,0.9,2.5,0.9,3.9v1.7c0,2.3-0.4,4.1-1.3,5.3c-0.9,1.2-2.1,2.1-3.6,2.5
                            C14.3,33,12.5,33.2,10.5,33.2z" />
                                </svg>
                            </div>
                            <div class="box_contant ps-3">
                                <h3>$ {{ $withdrawcommission }}</h3>
                                <p>Withdraw Commision</p>
                            </div>
                        </a> </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="active box"> <a href="{{ url('client/ibdashboard') }}" class="d-flex">
                            <div class="box_icon mx-2 deposit_i">
                                <svg version="1.1" class="doller_green" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 21 37"
                                    style="enable-background:new 0 0 21 37;" xml:space="preserve">
                                    <path class="st0" d="M9,4.1L8.8,1L12,0l0.2,3.1L9,4.1z M8.8,36.6v-4l3.4,0v3.9H8.8z M10.5,33.2c-0.8,0-1.6,0-2.4-0.1
                                c-0.8,0-1.6-0.1-2.5-0.2c-0.8-0.1-1.6-0.2-2.4-0.3c-0.7-0.1-1.4-0.3-2-0.4v-4.7c0.8,0.1,1.7,0.1,2.7,0.2c1,0.1,2.1,0.1,3.2,0.1
                                c1.1,0,2.1,0,3.1,0c1,0,1.9-0.1,2.6-0.2c0.7-0.2,1.3-0.5,1.7-0.9c0.4-0.5,0.6-1.1,0.6-1.8v-1.1c0-0.9-0.3-1.5-0.8-2
                                c-0.5-0.5-1.2-0.7-2.2-0.7H9.6c-2.8,0-5-0.6-6.5-1.8c-1.5-1.3-2.2-3.4-2.2-6.4v-1.4c0-2.9,0.8-5,2.5-6.3c1.7-1.3,4-2,7.1-2
                                c1.1,0,2.2,0.1,3.2,0.2c1.1,0.1,2.1,0.2,3.1,0.4c1,0.1,1.9,0.3,2.6,0.4v4.7c-1.2-0.1-2.6-0.2-4.1-0.2c-1.5-0.1-2.9-0.1-4.2-0.1
                                c-0.9,0-1.7,0.1-2.4,0.3C7.9,8.9,7.4,9.2,7,9.7c-0.4,0.5-0.6,1.2-0.6,2v0.8c0,1,0.3,1.8,0.9,2.2c0.6,0.5,1.5,0.7,2.6,0.7h2.9
                                c1.8,0,3.3,0.3,4.4,1c1.2,0.6,2,1.5,2.6,2.7c0.6,1.1,0.9,2.5,0.9,3.9v1.7c0,2.3-0.4,4.1-1.3,5.3c-0.9,1.2-2.1,2.1-3.6,2.5
                                C14.3,33,12.5,33.2,10.5,33.2z" />
                                </svg>
                            </div>
                            <div class="box_contant ps-3">
                                <h3 class="text-white">$ {{ $availablecommission }}</h3>
                                <p>Available Commision</p>
                            </div>
                        </a> </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="box"> <a href="{{ url('client/mycommission') }}" class="d-flex">


                            <div class="box_icon mx-2 wallet_i">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 22"
                                    style="enable-background:new 0 0 25 22;" xml:space="preserve">
                                    <path class="st0"
                                        d="M0,3.1c0-0.8,0.3-1.6,0.9-2.2C1.5,0.3,2.3,0,3.1,0h21.1c0.2,0,0.4,0.1,0.6,0.2C24.9,0.4,25,0.6,25,0.8
                            c0,0.2-0.1,0.4-0.2,0.6s-0.3,0.2-0.6,0.2h-0.8v3.1c0.4,0,0.8,0.2,1.1,0.5C24.8,5.5,25,5.9,25,6.3v13.4c0,0.6-0.2,1.2-0.7,1.7
                            c-0.4,0.4-1,0.7-1.7,0.7H3.9c-1,0-2-0.4-2.8-1.2C0.4,20.1,0,19.1,0,18.1V3.1z M1.6,5.9v12.2c0,0.6,0.2,1.2,0.7,1.7
                            c0.4,0.4,1,0.7,1.7,0.7h18.7c0.2,0,0.4-0.1,0.6-0.2c0.1-0.1,0.2-0.3,0.2-0.6V6.3H3.1C2.6,6.3,2,6.1,1.6,5.9z M1.6,3.1
                            C1.6,3.6,1.7,4,2,4.3c0.3,0.3,0.7,0.5,1.1,0.5h18.8V1.6H3.1C2.7,1.6,2.3,1.7,2,2C1.7,2.3,1.6,2.7,1.6,3.1z" />
                                </svg>
                            </div>

                            <div class="box_contant ps-3">
                                <h3>{{ $totallot }}</h3>
                                <p>Total Volume</p>
                            </div>
                        </a> </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="box"> <a href="{{ url('client/myclients') }}" class="d-flex">
                            <div class="box_icon mx-2 account_i">
                                <svg version="1.1" class="user_pink" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26 30"
                                    style="enable-background:new 0 0 26 30;" xml:space="preserve">
                                    <path class="st0"
                                        d="M1.7,27.8v-1.4c0-4.7,3.8-8.5,8.5-8.5h5.7c4.7,0,8.5,3.8,8.5,8.5v1.4" />
                                    <path class="st0"
                                        d="M13,13.6c-3.1,0-5.7-2.5-5.7-5.7c0-3.1,2.5-5.7,5.7-5.7c3.1,0,5.7,2.5,5.7,5.7C18.7,11,16.1,13.6,13,13.6z" />
                                </svg>
                            </div>

                            <div class="box_contant ps-3">
                                <h3>{{ $total_clients }}</h3>
                                <p>Total Clients</p>
                            </div>
                        </a> </div>
                </div>
            </div>
        </section>


        <section class="container dash_new_withdrawal">
            <div class="mb-5 mt-5 main_withdrawal justify-content-center">
                <div class=" Withdrawal_title">
                    <h2 class="text-black">
                        <h4>Monthly <strong>Commission</strong></h4>
                    </h2>
                </div>
                <div class="dash_img row">
                    <div class="col-md-7 text-center">
                        <div class="chart-light">
                            <canvas id="MonthlyCommissionChart" style="height:280px"></canvas>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="chart-light">
                            <canvas id="TransactionChart" style="height:280px"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="container dash_new_withdrawal">
            <div class="mb-5 mt-5 main_withdrawal justify-content-center">
                <div class="row">
                    <div class="col-md-3 ">
                        <div class="custom-box ">
                            <div class="row">
                                <div class="col-md-4 d-flex align-items-center justify-content-center">
                                    <img src="{{ asset('images/active-trader.png') }}" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 style="margin-bottom:0px;" class="text-black">{{ $activetraders }}</h2>
                                    <p class="text-muted">Active traders</p>
                                </div>
                            </div>

                        </div>
                        <div style="margin-top:20px;" class="custom-box ">
                            <div class="row">
                                <div class="col-md-4 d-flex align-items-center justify-content-center">
                                    <img src="{{ asset('images/active-subib.png') }}" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 style="margin-bottom:0px;" class="text-black">{{ $activesubib }}</h2>
                                    <p class="text-muted">Active subIB</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="TableBox">
                            <div class="table_title d-flex justify-content-between align-items-center pe-3">
                                <div class="inlinettlbtn">
                                    <div class="inlinettl">
                                        <h4>Top 5 Earnings of subIBs</h4>
                                    </div>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="table_filed table-responsive">
                                <table id="topsubibearn" class="table table1 text-center">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Name </th>
                                            <th>Email</th>
                                            <th>Total Lots</th>
                                            <th>Commision Earned </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (count($top5subiblist) > 0)
                                            @foreach ($top5subiblist as $top5subib)
                                                <tr>
                                                    <td>{{ $loop->index + 1 }}</td>
                                                    <td>{{ $top5subib->name }}</td>
                                                    <td>{{ $top5subib->email }}</td>
                                                    <td>{{ $top5subib->totallots }}</td>
                                                    <td>{{ $top5subib->totalcomm }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



    </main>





    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
    <script>
        $(function() {

            var ctx = document.getElementById("MonthlyCommissionChart").getContext('2d');
            var transaction = {
                type: 'bar',
                data: {
                    labels: null,
                    datasets: [{
                        label: @json(__('Commission')),
                        data: null,
                        fill: false,
                        borderColor: '#f37b4c',
                        backgroundColor: '#f37b4c',
                        borderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    legend: {
                        labels: {
                            fontColor: "black",
                            fontSize: 16
                        }
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                fontColor: "black",
                                fontSize: 16,
                                beginAtZero: true
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontColor: "black",
                                fontSize: 16,
                                beginAtZero: true
                            }
                        }]
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                }
            };
            var myChart = new Chart(ctx, transaction);

            var ctx1 = $("#TransactionChart");
            var data1 = {
                labels: [@json(__('Total Deposit')), @json(__('Total Withdraw'))],
                datasets: [{
                    label: @json(__('Transaction')),
                    data: null,
                    backgroundColor: [
                        "#f37b4c",
                        "#7ca40a",
                        "#DC143C",
                        "#F4A460",
                        "#2E8B57"
                    ],
                    borderColor: [
                        "#CDA776",
                        "#989898",
                        "#CB252B",
                        "#E39371",
                        "#1D7A46"
                    ],
                    borderWidth: [1, 1, 1, 1, 1]
                }]
            };
            var options1 = {
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    position: "top",
                    text: @json(__('My Client Transaction')),
                    fontSize: 16,
                    fontColor: "#646f7a"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };
            var chart1 = new Chart(ctx1, {
                type: "doughnut",
                data: data1,
                options: options1
            });
            /**********/

        });
    </script>
@endsection