@extends('layout.marketing_template')

@section('marketingContent')
<div class="titel-head pb-4">
    <h1>Dashboard</h1>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-6 col-xl-6">
        <div class="row">
            @if(Auth::guard('marketing')->user()->role == 'team_manager')
            <div class="col-sm-4">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Total Submanager</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ $totalsubmarketing }}</h1><a
                                    href="{{ url('/marketing/submanagerlist') }}"
                                    class="text-primary">View more</a>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-user"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Total Clients</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ $totalclients }}</h1><a href="{{ url('/marketing/user/userlist') }}"
                                    class="text-primary">View More</a>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-user"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Total IB</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ $totalib }}</h1><a href="{{ url('/marketing/ib/ibuserlist') }}"
                                    class="text-primary">View More</a>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-users"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @if(Auth::guard('marketing')->user()->role != 'team_manager')
            <div class="col-sm-6">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Pending Clients</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ $pendingclients }}</h1><a
                                    href="{{ url('/marketing/user/pendingdocumentlist') }}" class="text-primary">View
                                    More</a>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-file"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Wallet Balance</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ round(Auth::guard('marketing')->user()->wallet_balance, 2) }}</h1>
                                <a href="{{ url('/marketing/transaction/withdraw') }}" class="text-primary">Withdraw
                                    Now</a>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-usd"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="col-sm-6">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Monthly Net Deposit</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ $monthlynetdeposit }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-usd"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Monthly Net Target Deposit</h5>
                        <div class="row">
                            <div class="col">
                                <h1 class="mb-2">{{ round(Auth::guard('marketing')->user()->net_deposit, 2) }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-usd"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-lg-6 col-xl-6 mb-4">
        <div class="bg-dark rounded-3 p-3 borderbx">
            <h5 class="mb-3">Latest Clients</h5>
            <div class="latestclient">
                <div class="row">
                    @foreach ($latestclients as $latest)
                    <div class="col-sm-6 col-md-4">
                        <div class="singleclient text-center">
                            <b>{{ $latest->name }}</b>
                            <p class="text-muted">{{ date('d M Y', strtotime($latest->created_at)) }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="allclient text-center">
                            <a href="{{ url('/marketing/user/userlist') }}" class="text-primary">View All Clients</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-4">
        <div class=" bg-dark rounded-3 p-3 borderbx">
            <div class="refferal-link-box">
                <div class="refferalbx p-3">
                    <p class="my-0" style="word-wrap: break-word;font-size: 18px;">Referral Link :
                        {{ $link }} <button type="button" class="btn btn-xs btn-primary" onclick="copyToClipboard(1)"
                            id="copyBtn_1">Click Here</button></p>
                    <input type="hidden" value="{{ $link }}" id="link_1">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-4">
        <div class=" bg-dark rounded-3 p-3 borderbx">
            <div class="chartbtn text-center">
                <button id="charttransactionbtn" class="btn btn-xs btn-primary">Transaction</button>
                <button id="chartclientsbtn" class="btn btn-xs btn-primary">Clients</button>
            </div>
            <div class="chart">
                <canvas id="WeeklyChart" style="height:300px"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-12 col-xl-12 mb-4">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Daily Deposit</h5>
                                <h1 class="mb-2">{{ $dailydeposit }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-sack-dollar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Weekly Deposit</h5>
                                <h1 class="mb-2">{{ $weeklydeposit }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-sack-dollar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Monthly Deposit</h5>
                                <h1 class="mb-2">{{ $monthlydeposit }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-sack-dollar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Total Deposit</h5>
                                <h1 class="mb-2">{{ $totaldeposit }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-sack-dollar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Daily Withdraw</h5>
                                <h1 class="mb-2">{{ $dailywithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Weekly Withdraw</h5>
                                <h1 class="mb-2">{{ $weeklywithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Monthly Withdraw</h5>
                                <h1 class="mb-2">{{ $monthlywithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Total Withdraw</h5>
                                <h1 class="mb-2">{{ $totalwithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Daily IB Withdraw</h5>
                                <h1 class="mb-2">{{ $dailyibwithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill-transfer"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Weekly IB Withdraw</h5>
                                <h1 class="mb-2">{{ $weeklyibwithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill-transfer"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Monthly IB Withdraw</h5>
                                <h1 class="mb-2">{{ $monthlyibwithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill-transfer"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card bg-dark rounded-3 mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h5 class="card-title">Total IB Withdraw</h5>
                                <h1 class="mb-2">{{ $totalibwithdraw }}</h1>
                            </div>
                            <div class="col-auto">
                                <div class="stat text-primary">
                                    <i class="fa fa-money-bill-transfer"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- container End -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script>
    $(function () {
        var ctx = document.getElementById("WeeklyChart").getContext('2d');
        var transaction = {
            type: 'line',
            data: {
                labels: null,
                datasets: [{
                    label: @json(__('Deposit')),
                    data: null,
                    fill: false,
                    borderColor: '#f37b4c',
                    backgroundColor: '#f37b4c',
                    borderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 8
                },
                {
                    label: @json(__('Withdraw')),
                    data: null,
                    fill: false,
                    borderColor: '#7ca40a',
                    backgroundColor: '#7ca40a',
                    borderWidth: 1,
                    borderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 8
                },
                {
                    label: @json(__('IB Withdraw')),
                    data: null,
                    fill: false,
                    borderColor: '#4CAF50',
                    backgroundColor: '#4CAF50',
                    borderWidth: 1,
                    borderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 8
                }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        };
        var clients = {
            type: 'line',
            data: {
                labels: null,
                datasets: [{
                    label: @json(__('Clients')),
                    data: null,
                    fill: false,
                    borderColor: '#888888',
                    backgroundColor: '#888888',
                    borderWidth: 1,
                    borderWidth: 2,
                    pointRadius: 5,
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        };
        var myChart = new Chart(ctx, transaction);
        $("#charttransactionbtn").on("click", function () {
            myChart.destroy();
            myChart = new Chart(ctx, transaction);
        });
        $("#chartclientsbtn").on("click", function () {
            myChart.destroy();
            myChart = new Chart(ctx, clients);
        });
    });

    function copyToClipboard(elem) {
        var ttcpy = document.getElementById('link_' + elem).value;
        var input = document.createElement('input');
        input.setAttribute('value', ttcpy);
        document.body.appendChild(input);
        input.select();
        var result = document.execCommand('copy');
        $('#copyBtn_' + elem).animate({
            'opacity': 0
        }, 300, function () {
            $(this).text('Copied!');
        }).animate({
            'opacity': 1
        }, 1500);
        $('#copyBtn_' + elem).animate({
            'opacity': 0
        }, 200, function () {
            $(this).text(@json(__('Click Here')));
        }).animate({
            'opacity': 1
        }, 500);
        document.body.removeChild(input)
        return result;
    }
</script>
@endsection