@extends("layouts.layout")

@section("content")

<div class="affiliate">

<div class="affiliate-info">

    <p><!--Please read our affiliates terms <b>here</b>-->Create your referral code and get promotional information here. Users that have not redeemed a code before can use your code and get a free 250 credits.</p>

    <div class="promo-info">

        <label for="aff_new_promocode">Promo Code:</label>
        <div v-if="!user.affiliates.promocode" class="promo-box">
            <input type="text" id="aff_new_promocode" name="promo" placeholder="no code yet">
            <button class="btn btn-sm btn-success" id="aff_np_save">SAVE</button>
        </div>
        <div v-else class="promo-box">
            <input type="text" id="aff_new_promocode2" name="promo" placeholder="no code yet" :value="user.affiliates.promocode">
            <button class="btn btn-sm btn-success" id="aff_copy2"><i class="fas fa-copy"></i></button>
        </div>

        <label for="aff_new_promocode">Affiliate Link:</label>
        <div v-if="user.affiliates.promocode" class="promo-box">
            <input readonly style="cursor: not-allowed;" id="aff_ref_link" type="text" name="promo" :value="'https://vgobounty.com/aff?code=' + user.affiliates.promocode">
            <button class="btn btn-sm btn-success" id="aff_copy"><i class="fas fa-copy"></i></button>
        </div>
    </div>

    <h4>Current Affiliate Statistics</h4>

    <div class="affiliate-progress">
      <div class="level">
        <div class="level-progress" :style="'width: ' + user.affiliates.affcollected % 100 + '%'">
        </div>
        <div class="level-text" v-html="'Level ' + parseInt(user.affiliates.affcollected/100) + ': ' + user.affiliates.affcollected % 100 + '/100'"></div>
      </div>
    </div>

    <div class="statistics">

        <div class="stat-box">
            <h3>Level</h3>
            <div class="stat-wrap" v-html="parseInt(user.affiliates.affcollected/100) || 0"></div>
        </div>

        <div class="stat-box">
            <h3>Referrals</h3>
            <div class="stat-wrap" v-html="user.affiliates.affs || 0"></div>
        </div>

        <div class="stat-box">
            <h3>Depositors</h3>
            <div class="stat-wrap" v-html="user.affiliates.affdepositors || 0"></div>
        </div>

        <div class="stat-box">
            <h3>Life Earnings</h3>
            <div class="stat-wrap" v-html="user.affiliates.affcollected || 0"></div>
        </div>

    </div>

        <div class="current-stat">
            <h3>Current Earnings</h3>
            <div class="current" v-html="user.affiliates.affamount || '0' + `<img src='/vendor/img/icon-coins.png' alt='Icon'>`"></div>
            <button type="button" class="btn btn-success" id="aff_collect_earnings">Collect Earnings</button>
        </div>

</div>


</div>

@endsection