@extends('template.coin.layouts.base')

@section('title', __('Referral'))

@section('css')
<style>
.pcoded[layout-type="dark"] .card-white{
background-color:#fff !important;
color: #000;
}
.guttar-15px {
    margin-left: -7.5px !important;
    margin-right: -7.5px !important;
}
.card-title {
    color: #342d6e;
    font-size: 1.3em;
    font-weight: 500;
    margin: 0;
}
.content-area .card-head {
    padding-bottom: 10px;
}


}
.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}

.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}
.token-calc {
    display: flex;
    padding-bottom: 10px;
}
.token-pay-amount {
    position: relative;
    align-self: center;
    width: 140px;
}

.input-bordered {
    border-radius: 4px;
    border: 1px solid #d2dde9;
    width: 100%;
    padding: 10px 15px;
    line-height: 20px;
    font-size: 0.9em;
    color: rgba(73, 84, 99, 0.7);
    transition: all 0.4s;
}

.input-with-hint {
    padding-right: 70px;
}
.token-pay-currency {
    position: absolute;
    right: 0;
    top: 9px;
    transform: translate(0);
    z-index: 1;
    padding: 0 10px;
    border-left: 1px solid #d2dde9;
}
.token-pay-currency .input-hint {
    position: static;
    border: 0;
    padding: 2px;
    font-size: 0.8em;
}
.ucap {
    text-transform: uppercase;
}
.pay-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 11px 0;
}
.btn-primary {
    background: #14013e;
    border-color: #14013e;
}
.mgt-1-5x {
    margin-top: 15px;
}

.font-mid {
    font-weight: 500;
}
.modal-content {
  position: relative;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0px 10px 55px 0px rgba(0, 0, 0, 0.2);
  border: 0;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: inline-block;
}
.modal-close .ti {
  font-size: 13px;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  color: #495463;
  text-shadow: none;
  display: block;
  transition: all 0.4s;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 576px) {
  .modal-dialog {
    margin: 35px auto;
  }
  .modal-dialog-sm {
    min-width: 500px;
  }
  .modal-dialog-md {
    min-width: 90%;
  }
  .modal-dialog-lg {
    min-width: 540px;
  }
  .modal-dialog-bottom {
    min-height: calc(100% - (1.75rem * 2));
  }
}
@media (min-width: 768px) {
  .modal-dialog-md {
    min-width: 620px;
  }
  .modal-dialog-lg {
    min-width: 740px;
  }
  .modal-close {
    top: -22px;
    right: -22px;
  }
  .modal-close .ti {
    font-size: 20px;
    height: 44px;
    width: 44px;
    line-height: 44px;
  }
}
@media (min-width: 992px) {
  .modal-dialog-lg {
    min-width: 880px;
  }
}

.popup-header {
  padding: 10px 18px 25px;
  border-bottom: 1px solid #e6effb;
}
.popup-body {
  padding: 15px 20px 16px;
  font-size: 13px;
}
.popup-body-innr {
  padding-left: 18px;
  padding-right: 18px;
}
.popup-body-full {
  padding-left: 0;
  padding-right: 0;
}
.popup-body-lg {
  padding: 14px 18px 7px;
}
.popup-body p {
  font-weight: 400;
}
.popup-body .lead strong,
.popup-body .lead span {
  color: #5e55b8;
}
.popup-body form:last-child {
  margin-bottom: 0;
}
.popup-body .copy-address {
  font-size: 13px;
}
.popup-title {
  color: #342d6e;
  font-weight: 500;
  padding-right: 40px;
  margin-bottom: 12px;
  font-size: 1.3em;
}
.popup-title .ti {
  font-size: 70%;
  color: #6e81a9;
}
.popup-title small {
  color: #758698;
}
.popup-title-action {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: 2px;
  transform: translateY(-50%);
}
.popup-subtitle {
  text-transform: uppercase;
  font-weight: 500;
  color: #6e81a9;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  font-size: 12px;
  margin-bottom: 10px;
}
.popup-subtitle-s2 {
  color: #495463;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}
.popup-footer {
  padding: 15px 18px 0;
}
@media (min-width: 480px) {
  .popup-title-action {
    margin-top: 0;
  }
  .popup-header {
    padding: 30px 40px 25px;
  }
  .popup-body {
    padding: 34px 45px 38px;
  }
  .popup-body-innr {
    padding-left: 40px;
    padding-right: 40px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body-md {
    padding: 30px 30px 34px;
  }
  .popup-footer {
    padding: 30px 40px;
  }
}
@media (min-width: 768px) {
  .popup-body {
    font-size: 14px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body .copy-address {
    font-size: 13px;
  }
}
.guttar-12px {
    margin-left: -6px !important;
    margin-right: -6px !important;
}
.guttar-12px > li, .guttar-12px > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.pay-list {
    display: flex;
    flex-wrap: wrap;
}
.popup-body .lead strong, .popup-body .lead span {
    color: #5e55b8;
}
.popup-body p {
    font-weight: 400;
}
.mgb-1-5x {
    margin-bottom: 15px;
}
.text-light {
    color: #758698 !important;
}
.font-italic {
    font-style: italic!important;
}
.pay-option-label {
  width: 100%;
  background: #e6effb;
  border: 2px solid #e6effb;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
  margin-bottom: 15px;
}
.pay-option-label:after {
  position: absolute;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #7668fe;
  content: "";
  top: 0;
  right: -5px;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
}
.pay-option-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-option-check:checked ~ label {
  border-color: #7668fe;
}
.pay-option-check:checked ~ label:after {
  transform: translate(-50%, -50%) scale(1);
}
.pay-list {
  display: flex;
  flex-wrap: wrap;
}
.pay-item {
  width: 100%;
}
.pay-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-check-label {
  position: relative;
  padding: 15px 50px 15px 46px;
  border: 1px solid #d2dde9;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
  height: calc(100% - 8px);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
}
.pay-check-label:before {
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid #d2dde9;
  content: "";
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s ease;
}
.pay-check-label:after {
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #7668fe;
  content: "";
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s ease;
}
.pay-check-text {
  font-weight: 700;
  font-size: 13px;
  color: #495463;
}
.pay-check-img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 24px;
}
.pay-check.error ~ .error {
  position: absolute;
  right: 8px;
  top: -26px;
  bottom: auto;
  background: #ff6868 !important;
  color: #fff !important;
  font-size: 11px;
  line-height: 18px;
  padding: 2px 10px;
  border-radius: 2px;
  transform: translate(0, 0);
}
.pay-check.error ~ .error:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid #ff6868;
  border-bottom: 5px solid transparent;
  bottom: -5px;
  right: 6px;
}
.pay-check.error ~ .error:before {
  display: none;
}
.pay-check:checked ~ label {
  border-color: #7668fe;
}
.pay-check:checked ~ label:before {
  border-color: #7668fe;
}
.pay-check:checked ~ label:after {
  opacity: 1;
}
.pay-amount {
  display: block;
}
.pay-icon {
  padding-right: 10px;
  font-size: 11px;
  line-height: 30px;
  width: 40px;
  text-align: center;
}
.pay-icon.cf-ltc {
  font-size: 18px;
}
.pay-icon.ikon {
  font-size: 30px;
}
.pay-icon.ikon:before {
  margin-left: -5px;
  margin-right: -5px;
}
.pay-title {
  display: inline-flex;
  align-items: center;
}
.pay-cur {
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
}
.pay-info-list li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pay-info-list li span {
  color: #758698;
}
.pay-status .ti {
  display: inline-block;
  height: 90px;
  width: 90px;
  line-height: 82px;
  text-align: center;
  border: 2px solid;
  border-radius: 50%;
  font-size: 36px;
}
.pay-status-success .ti {
  border-color: #00d285;
  color: #00d285;
}
.pay-status-warning .ti {
  border-color: #ffc100;
  color: #ffc100;
}
.pay-status-error .ti {
  border-color: #ff6868;
  color: #ff6868;
}
.pay-button {
  width: 100%;
  padding: 10px 0;
}
.pay-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 0;
}
.pay-button:first-child {
  padding-left: 0;
}
.pay-button:last-child {
  padding-right: 0;
}
.pay-button-sap {
  width: 100%;
  text-align: center;
  font-weight: 500;
  color: #758698;
  text-transform: uppercase;
}
.pay-notes {
  margin-top: 14px;
  padding-top: 30px;
  border-top: 1px solid #eef2f8;
  line-height: 1.5;
  padding-bottom: 5px;
}
@media (min-width: 480px) {
  .pay-option-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
  }
}
@media (min-width: 620px) {
  .pay-item {
    width: 50%;
  }
  .pay-item:only-child {
    width: 100%;
  }
  .pay-item:last-child:not(:nth-child(even)) {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .pay-button {
    width: auto;
    padding: 10px 20px;
  }
  .pay-button:first-child {
    padding-left: 0;
  }
  .pay-button:last-child {
    padding-right: 0;
  }
  .pay-button-sap {
    width: auto;
  }
}
.card-title-lg {
    font-size: 1.5em;
}
.gaps-1x {
    height: 10px;
}
.referral-form {
    margin: 20px 0;
}
.card-title-sm {
    font-size: 1.09em;
    padding-top: 2px;
}
.card-innr > div:last-child:not(.input-item):not(.row):not(.step-head):not(.tile-footer):not(.tab-content):not(.progress-bar):not(.chart-tokensale):not(:only-child) {
    margin-bottom: 5px;
}

.sap.sap-gap {
    margin-top: 30px;
    margin-bottom: 30px;
}
.sap {
    width: 100%;
    border-bottom: 1px solid #e6effb;
}
table.dataTable {
    width: 100%;
    overflow-x: scroll;
}
.data-item {
    background: #fff;
    margin-bottom: 3px;
    border-radius: 4px;
    position: relative;
}
.data-head .data-col {
    padding: 0 10px 0 0;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #7668fe;
    text-transform: uppercase;
    border-bottom: none;
}
table.dataTable th > span {
    position: relative;
    display: inline-block;
}
.pcoded[layout-type="dark"] table.dataTable tbody tr {
     background-color: #fff !important; 
}

.data-col {
    padding: 14px 15px 14px 0;
    border-bottom: 1px solid #e6effb;
    color: #000;
    font-size: 13px;
}

.data-col .lead {
    font-size: 12px;
    font-weight: 600;
    color: #495463;
    letter-spacing: 0.01em;
    line-height: 1.2;
    display: block;
    margin-top: 0;
}

.data-item .lead {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
 .data-item .lead {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .data-item .sub {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding-top: 7px;
  }
  .data-item .sub-s2 {
    font-size: 13px;
    color: #495463;
  }
  .data-details-info {
    font-size: 13px;
  }
  .data-details > div {
    margin-bottom: 0;
  }
  .data-details-head {
    font-size: 14px;
  }
  .data-details-docs > li {
    width: 100%;
  }
  .data-col .text-wrap {
    width: 150px;
  }
  .data-col-wd-sm {
    width: 120px;
  }
  .data-col-wd-md {
    width: 160px;
  }
  .data-col-wd-lg {
    width: 200px;
  }

</style>
@section('content')
<div class="page-header card">
                              <div class="row align-items-end">
                                  <div class="col-lg-8">
                                      <div class="page-header-title">
                                          <i class="feather icon-credit-card bg-c-blue"></i>
                                          <div class="d-inline">
                                              <h5>Referral</h5>
                                             
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-lg-4">
                                      <div class="page-header-breadcrumb">
                                          <ul class=" breadcrumb breadcrumb-title">
                                              <li class="breadcrumb-item">
                                                  <a href="/dashboard"><i class="feather icon-home"></i></a>
                                              </li>
                                             
                                              <li class="breadcrumb-item">
                                                  <a href="#">Referral</a>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          
                           <div class="pcoded-inner-content">
                        <!-- Main-body start -->
                        <div class="main-body">
                            <div class="page-wrapper">
                                <!-- Page-body start -->
                                <div class="page-body">
                                    <div class="row d-flex justify-content-center">
                                       <div class="col-md-8 ">
                                           
                                           <div class="content-area content-area-mh card card-white user-account-pages page-referral">
                    <div class="card-innr">
                        <div class="card-head">
                            <h2 class="card-title card-title-lg">Referral</h2>
                        </div>
                        <div class="card-text">
                            <p>Invite your friends and family to get 10% of everything they invest.</p>
                            <p>We Imagine giving your unique referral link to your friend and he or she register and invest using your link, the bonus will be sent to your account automatically.</p>
                            <p>The strategy is simple: the more referral links you send to your colleagues, family and friends - the more bonus you earn!</p>
                        </div>

                        <div class="gaps-1x"></div>
                        <div class="referral-form">
                            <h4 class="card-title card-title-sm">Referral URL</h4>
                            <div class="copy-wrap mgb-1-5x mgt-1-5x">
                                <span class="copy-feedback"></span>
                                <em class="copy-icon fas fa-link"></em>
                                <input type="text" class="copy-address" value="{{get_user_referal_link($user->username)}}" disabled="" />
                                <button class="copy-trigger copy-clipboard" data-clipboard-text="{{get_user_referal_link($user->username)}}"><em class="ti ti-files"></em></button>
                            </div>
                            <p class="text-light mgmt-1x">
                                <em><small>Use above link to refer your friend and get referral bonus.</small></em>
                            </p>
                        </div>
                        <div class="sap sap-gap"></div>
                        <div class="card-head">
                            <h4 class="card-title card-title-sm">Referral Lists</h4>
                        </div>
                        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div>
                                <table class="data-table dt-init refferal-table dataTable no-footer" data-items="10" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
                                    <thead>
                                        <tr class="data-item data-head" role="row">
                                            <th class="data-col refferal-name sorting_disabled" rowspan="1" colspan="1"><span>User Name</span></th>
                                            <th class="data-col refferal-tokens sorting_disabled" rowspan="1" colspan="1"><span>Earnings</span></th>
                                            <th class="data-col refferal-date sorting_disabled" rowspan="1" colspan="1"><span>Register Date</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($referrals->isNotEmpty())
                                        @foreach($referrals as $refer)
                                        <tr class="data-item odd" role="row">
                                            <td class="data-col">{{$refer->username}}</td>
                                            <td class="data-col"></td>
                                            <td class="data-col">{{\Carbon\Carbon::parse($refer->created_at)->toDayDateTimeString()}}</td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <tr class="data-item odd" role="row">
                                            <td class="data-col">No one join yet!</td>
                                            <td class="data-col"></td>
                                            <td class="data-col"></td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-sm-6 text-left"></div>
                                <div class="col-sm-6 text-sm-right"><div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">1 -1 of 1</div></div>
                            </div>
                        </div>
                    </div>
                </div>
                                       </div> 
                                    </div>
                                     
                                     </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                       
                    </div>
@endsection