@extends('Template::layouts.master')

@section('content')
    <!-- Dashboard -->
    <section class="dashboard-section pt-80 pb-80">
        <div class="container">
            <div class="notice"></div>

            <div class="mb-4">
                <div class="input-group">
                    <input type="text" value="{{ route('home') }}?referral={{ $user->username }}" class="form-control form--control bg--section" id="refLink" readonly="">
                    <button type="button" class="input-group-text border-0 form--control text--white custom--bg copyBtn">
                        <i class="lar la-copy"></i>
                    </button>
                </div>
            </div>

            <div class="mb-4">
                <div class="row justify-content-center g-4">
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.transactions') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-money-bill-wave"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ getAmount($user->balance) }}">{{ showAmount($user->balance, currencyFormat: false) }}</h3>
                                        &nbsp; <h6 class="title"> {{ __(gs('cur_text')) }}</h6>
                                    </div>
                                    <div>@lang('Balance')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.credit.history') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-coins"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ getAmount($user->credit) }}">{{ getAmount($user->credit) }}</h3>
                                    </div>
                                    <div>@lang('Credit')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.transactions') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-exchange-alt"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ $totalTransaction }}">{{ $totalTransaction }}</h3>
                                    </div>
                                    <div>@lang('Transaction')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.promotion.my') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-ad"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ $totalAd }}">{{ $totalAd }}</h3>
                                    </div>
                                    <div>@lang('Created Promotion')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.credit.history') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-history"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ $totalCreditHis }}">{{ $totalCreditHis }}</h3>
                                    </div>
                                    <div>@lang('Credit History')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <div class="dashboard__item">
                            <span class="dashboard__icon">
                                <i class="las la-file-contract"></i>
                            </span>
                            <div class="cont">
                                <div class="dashboard__header">
                                    <h6 class="">{{ __(@$plan->name) }}</h6>
                                    <h3 class="title"></h3>
                                </div>
                                <div>@lang('Name of Plan')</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <a href="{{ route('user.downlines') }}" class="w-100">
                            <div class="dashboard__item">
                                <span class="dashboard__icon">
                                    <i class="las la-street-view"></i>
                                </span>
                                <div class="cont">
                                    <div class="dashboard__header">
                                        <h3 class="title rafcounter" data-counter-end="{{ $downLine }}">{{ $downLine }}</h3>
                                    </div>
                                    <div>@lang('Downline')</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-lg-4 col-xxl-3">
                        <div class="dashboard__item">
                            <span class="dashboard__icon">
                                <i class="las la-clone"></i>
                            </span>
                            <div class="cont">
                                <div class="dashboard__header">
                                    <h6 class=""> {{ $upline != null ? strLimit($upline->fullname, 15) : 'N/A' }} </h6>
                                </div>
                                <div>@lang('Upline')</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h5 class="title mb-3">@lang('Latest Transaction Logs')</h5>
            <table class="table cmn--table">
                <thead>
                    <tr>
                        <th>
                            @lang('Date')
                        </th>
                        <th>
                            @lang('Trx')
                        </th>
                        <th>
                            @lang('Amount')
                        </th>
                        <th>
                            @lang('Charge')
                        </th>
                        <th>
                            @lang('Post Balance')
                        </th>
                        <th>
                            @lang('Details')
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                        <tr>
                            <td>
                                {{ showDateTime($log->created_at) }}
                            </td>
                            <td>
                                {{ __($log->trx) }}
                            </td>
                            <td>
                                {{ __($log->trx_type) }}
                                {{ showAmount($log->amount) }}
                            </td>
                            <td>
                                {{ showAmount($log->charge) }}
                            </td>
                            <td>
                                {{ showAmount($log->post_balance) }}
                            </td>
                            <td>
                                {{ __($log->details) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%" class="justify-content-center custom--label text--title"> @lang('No results found')</td>
                        </tr>
                    @endforelse

                </tbody>
            </table>
        </div>
    </section>
    <!-- Dashboard -->
@endsection

@push('script')
    <script>
        "use strict";
        const copyToClipboard = () => {
            var textBox = document.getElementById("refLink");
            textBox.select();
            document.execCommand("copy");
        }

        $('.copyBtn').on('click', copyToClipboard);
    </script>
@endpush

@push('style')
    <style>
        #refLink {
            font-weight: bold;
        }

        .dashboard__header~div {
            color: #777;
        }

        #refLink {
            word-break: break-all;
        }
    </style>
@endpush