@extends('layouts.affiliate.index')
@section('title', $label)

@section('content')
@if (empty(Auth::user()->email_verified_at))
    <div class="card mb-4">
        <div class="card-body p-2">
            <div class="alert alert-info mb-0">
                <h5>Verifikasi Email</h5>
                Kami sudah mengirim link verifikasi melalui email Anda, Silahkan cek inbox pada email Anda.
                Jika link verifikasi tidak ada atau sudah tidak berlaku, klik tombol dibawah ini untuk kirim ulang.

                <div class="mt-2" id="form-verify-email">
                    @if ($resend_email_verify)
                        <a href="javascript:void(0)" id="btn-verify-email">
                            <u>Kirim Ulang Link Verifikasi</u>
                        </a>
                    @else
                        <span class="text-muted">
                            Kirim Ulang Link Verifikasi
                        </span>
                        <small>( Tunggu s/d {{ $resend_email_verify_at }} WIB untuk kirim ulang )</small>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-md-6">
        <div class="card border border-secondary">
            <div class="card-body p-0">
                <div class="clearfix">
                    <div class="float-left p-3 mr-3">
                        <img src="{{ asset('images/avatar.jpg') }}" class="rounded-circle" style="height: 130px;border: 5px solid #dceaf5;" />
                    </div>

                    <div class="p-3">
                        <table class="table-padding">
                            <tr>
                                <td><b>Nama</b></td>
                                <td class="divide"></td>
                                <td>{{ Auth::user()->name }}</td>
                            </tr>
                            <tr>
                                <td><b>Email</b></td>
                                <td class="divide"></td>
                                <td>{{ Auth::user()->affiliator->email }}</td>
                            </tr>
                        </table>
                    </div>

                    <div style="background: #dceaf5;">
                        <b>Link Afiliasi</b>
                        <table>
                            <tr>
                                <td class="text-info">
                                    <b><u>{{ Auth::user()->affiliator->link }}</u></b>
                                </td>
                                <td class="pl-2">
                                    <a href="javascript:void(0)" id="btn-copy" class="set-tooltip" title="Copy Link" data-clipboard-text="{{ Auth::user()->affiliator->link }}">
                                        <i class="mdi mdi-content-copy"></i>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 stretch-card grid-margin">
        <div class="card bg-success card-img-holder text-white" style="height: 161px;">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-wallet-bifold card-icon float-right"></i>
                    <b>Saldo</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="{{ $affiliator->balance }}" data-number="{{ number_format($affiliator->balance, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    Total saldo saat ini
                </h6>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="card bg-info card-img-holder text-white">
                    <div class="card-body p-3">
                        <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                        <h4 class="font-weight-normal mb-3">
                            <i class="mdi mdi-account-circle card-icon float-right"></i>
                            <b>Affiliate Level 1</b>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="{{ $affiliator->member }}" data-number="{{ number_format($affiliator->member, 0, '', '.') }} <span style='font-size: 14px;'>Member</span>"></h2>
                    </div>
                </div>

                <div class="table-responsive mt-2">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">No</th>
                                <th>Nama</th>
                                <th style="width: 135px;">Tgl. Bergabung</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($entity->lv1 as $index => $e)
                                <tr>
                                    <td class="text-center">{{ ($index + 1) }}</td>
                                    <td>{{ $e->name }}</td>
                                    <td>{{ Common::dateFormat($e->created_at, 'dd mmm yyyy') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <a href="{{ route('affiliate.report.member', 1) }}">
                                        Detail<i class="mdi mdi-chevron-right"></i>
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="card bg-dark card-img-holder text-white">
                    <div class="card-body p-3">
                        <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                        <h4 class="font-weight-normal mb-3">
                            <i class="mdi mdi-account-circle card-icon float-right"></i>
                            <b>Affiliate Level 2</b>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="{{ $affiliator->member_child }}" data-number="{{ number_format($affiliator->member_child, 0, '', '.') }} <span style='font-size: 14px;'>Member</span>"></h2>
                    </div>
                </div>

                <div class="table-responsive mt-2">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">No</th>
                                <th>Nama</th>
                                <th style="width: 135px;">Tgl. Bergabung</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($entity->lv2 as $index => $e)
                                <tr>
                                    <td class="text-center">{{ ($index + 1) }}</td>
                                    <td>{{ $e->name }}</td>
                                    <td>{{ Common::dateFormat($e->created_at, 'dd mmm yyyy') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <a href="{{ route('affiliate.report.member', 2) }}">
                                        Detail<i class="mdi mdi-chevron-right"></i>
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="card bg-warning card-img-holder text-white">
                    <div class="card-body p-3">
                        <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                        <h4 class="font-weight-normal mb-3">
                            <i class="mdi mdi-account-circle card-icon float-right"></i>
                            <b>Affiliator Level 2</b>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="{{ $affiliator_lv2_count }}" data-number="{{ number_format($affiliator_lv2_count, 0, '', '.') }} <span style='font-size: 14px;'>Affiliator</span>"></h2>
                    </div>
                </div>

                <div class="table-responsive mt-2">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">No</th>
                                <th>Nama</th>
                                <th style="width: 135px;">Tgl. Bergabung</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($affiliator_lv2 as $index => $a)
                                <tr>
                                    <td class="text-center">{{ ($index + 1) }}</td>
                                    <td>{{ $a->name }}</td>
                                    <td>{{ Common::dateFormat($a->created_at, 'dd mmm yyyy') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <a href="{{ route('affiliate.report.affiliator') }}">
                                        Detail<i class="mdi mdi-chevron-right"></i>
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/clipboard.min.js') }}"></script>
<script src="{{ asset('js/jquery-countTo.js') }}"></script>

<script>
let verify_email = false

$(document).ready(function() {
    setCounter()

    const clipboard = new ClipboardJS("#btn-copy")
    clipboard.on("success", function(e) {
        $(e.trigger).html(`<i class="mdi mdi-check-circle"></i>`)

        setTimeout(function(){
            $(e.trigger).html(`<i class="mdi mdi-content-copy"></i>`)
        }, 1000)
    })

    $("#btn-verify-email").click(function() {
        if (verify_email)
            return false

        const btn = $(this)
        const formData = { _token: token }

        btn.html("Sending Email...").css({ "cursor": "default" })
        verify_email = true

        $.ajax({
            type: "POST",
            url: "{{ route('auth.store.verify-email') }}",
            data: formData,
            dataType: "json",
            success: function (response) {
                $("#form-verify-email").html(`<span class="text-muted">
                        Kirim Ulang Link Verifikasi
                    </span>
                    <small>( Tunggu s/d ${response.data.resend_at} WIB untuk kirim ulang )</small>`)

                setNotifsuccess(response.message, false)
            },
            error: function (xhr, ajaxOptions, thrownError) {
                btn.html("Kirim Ulang Link Verifikasi").css({ "cursor": "pointer" })
                ajaxError(xhr.status)
            }
        })
    })
})
</script>
@endpush