<template>
  <div class="container py-4">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header p-3">
            <h5 class="mb-2">Referral Program</h5>
            <p
              class="mb-0"
            >Track and find all the details about our referral program, your stats and revenues.</p>
          </div>
          <div class="card-body p-3">
            <div class="row">
              <div class="col-lg-3 col-6 text-center">
                <div class="border-dashed border-1 border-secondary border-radius-md py-3">
                  <h6 class="text-success text-gradient mb-0">Earnings</h6>
                  <h4 class="font-weight-bolder">
                    <span class="small">$</span>
                    <span id="state1" countto="23980">23,980</span>
                  </h4>
                </div>
              </div>
              <div class="col-lg-3 col-6 text-center">
                <div class="border-dashed border-1 border-secondary border-radius-md py-3">
                  <h6 class="text-success text-gradient mb-0">Customers</h6>
                  <h4 class="font-weight-bolder">
                    <span class="small">$</span>
                    <span id="state2" countto="2400">2,400</span>
                  </h4>
                </div>
              </div>
              <div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
                <div class="border-dashed border-1 border-secondary border-radius-md py-3">
                  <h6 class="text-success text-gradient mb-0">Avg. Value</h6>
                  <h4 class="font-weight-bolder">
                    <span class="small">$</span>
                    <span id="state3" countto="48">48</span>
                  </h4>
                </div>
              </div>
              <div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
                <div class="border-dashed border-1 border-secondary border-radius-md py-3">
                  <h6 class="text-success text-gradient mb-0">Refund Rate</h6>
                  <h4 class="font-weight-bolder">
                    <span id="state4" countto="4">4</span>
                    <span class="small">%</span>
                  </h4>
                </div>
              </div>
            </div>
            <div class="row mt-5">
              <div class="col-lg-5 col-12">
                <h6 class="mb-0">Referral Code</h6>
                <p class="text-sm">Copy the code bellow to your registered provider.</p>
                <div class="border-dashed border-1 border-secondary border-radius-md p-3">
                  <p class="text-xs mb-2">
                    Generated 23 days ago by
                    <span class="font-weight-bolder">softuidash23</span>
                  </p>
                  <p class="text-xs mb-3">
                    <span class="font-weight-bolder">(Used one time)</span>
                  </p>
                  <div class="d-flex align-items-center">
                    <div class="form-group w-70">
                      <div class="input-group bg-gray-200">
                        <input
                          class="form-control form-control-sm"
                          value="soft-ui-dashboard-vmsk392"
                          type="text"
                          disabled
                          onfocus="focused(this)"
                          onfocusout="defocused(this)"
                        />
                        <span
                          class="input-group-text bg-transparent"
                          data-bs-toggle="tooltip"
                          data-bs-placement="top"
                          title
                          data-bs-original-title="Referral code expires in 24 hours"
                          aria-label="Referral code expires in 24 hours"
                        >
                          <i class="ni ni-key-25"></i>
                        </span>
                      </div>
                    </div>
                    <a href="javascript:;" class="btn btn-sm btn-outline-secondary ms-2 px-3">Copy</a>
                  </div>
                  <p class="text-xs mb-1">You cannot generate codes.</p>
                  <p class="text-xs mb-0">
                    <a href="javascript:;">Contact us</a> to generate more referrals link.
                  </p>
                </div>
              </div>
              <div class="col-lg-7 col-12 mt-4 mt-lg-0">
                <h6 class="mb-0">How to use</h6>
                <p class="text-sm">Integrate your referral code in 3 easy steps.</p>
                <div class="row">
                  <div class="col-md-4 col-12">
                    <div class="card card-plain text-center">
                      <div class="card-body">
                        <div
                          class="icon icon-shape bg-gradient-dark shadow text-center border-radius-md mb-2"
                        >
                          <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <p
                          class="text-sm font-weight-bold mb-2"
                        >1. Create &amp; validate your referral link and get</p>
                        <h5 class="font-weight-bolder">
                          <span class="small">$</span>100
                        </h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-12">
                    <div class="card card-plain text-center">
                      <div class="card-body">
                        <div
                          class="icon icon-shape bg-gradient-dark shadow text-center border-radius-md mb-2"
                        >
                          <i class="ni ni-send text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <p class="text-sm font-weight-bold mb-2">2. For every order you make you get</p>
                        <h5 class="font-weight-bolder">
                          10
                          <span class="small">%</span>
                        </h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 col-12">
                    <div class="card card-plain text-center">
                      <div class="card-body">
                        <div
                          class="icon icon-shape bg-gradient-dark shadow text-center border-radius-md mb-2"
                        >
                          <i class="ni ni-spaceship text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                        <p
                          class="text-sm font-weight-bold mb-2"
                        >3. Get other friends to generate link and get</p>
                        <h5 class="font-weight-bolder">
                          <span class="small">$</span>500
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <hr class="horizontal dark" />
            <div class="row mt-4">
              <h6 class="mb-2">Other programs</h6>
              <div class="col-lg-4 col-md-6 col-12">
                <div class="card text-center">
                  <div
                    class="overflow-hidden position-relative border-radius-lg bg-cover p-3"
                    style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/window-desk.jpg')"
                  >
                    <span class="mask bg-gradient-dark opacity-6"></span>
                    <div class="card-body position-relative z-index-1 d-flex flex-column mt-5">
                      <p
                        class="text-white font-weight-bolder"
                      >User #hashtag in a photo on social media and get $10 for each purchase you make.</p>
                      <a
                        class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-4"
                        href="javascript:;"
                      >
                        Read More
                        <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-12 mt-4 mt-lg-0">
                <div class="card text-center">
                  <div
                    class="overflow-hidden position-relative border-radius-lg bg-cover p-3"
                    style="background-image: url('https://demos.creative-tim.com/soft-ui-dashboard-pro/assets/img/office-dark.jpg')"
                  >
                    <span class="mask bg-gradient-dark opacity-6"></span>
                    <div class="card-body position-relative z-index-1 d-flex flex-column mt-5">
                      <p
                        class="text-white font-weight-bolder"
                      >Send the invitation link to 10 friends and get a 50% coupon to use on any purchase.</p>
                      <a
                        class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-4"
                        href="javascript:;"
                      >
                        Read More
                        <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-12 mt-4 mt-lg-0">
                <div class="card border-dashed border-1 text-center h-100">
                  <div class="card-body position-relative z-index-1 d-flex flex-column">
                    <div
                      class="position-relative d-flex align-items-center justify-content-center h-100"
                    >
                      <img
                        class="w-50 position-relative z-index-2"
                        src="../../assets/img/illustrations/rocket-white.png"
                        alt="illustration"
                      />
                    </div>
                    <a
                      class="text-sm text-secondary font-weight-bold mb-0 icon-move-right mt-2"
                      href="javascript:;"
                    >
                      Join rocketship program
                      <i
                        class="fas fa-arrow-right text-sm ms-1"
                        aria-hidden="true"
                      ></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 mt-4">
      <user-card />
    </div>
  </div>
</template>

<script>
import UserCard from "./components/UserCard.vue";

export default {
  name: "referral",
  components: {
    UserCard,
  },
};
</script>
