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

@section('title', __('Investment Hostory'))

@section('css')
<style>
.pcoded[layout-type="dark"] .card{
background-color:#fff;

}
.pcoded[layout-type="dark"] .table>thead>tr>th {
       border-bottom: 1px solid #d6dde1;
         padding: 0 10px 0 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #7668fe;
    text-transform: uppercase;
  
}

.pcoded[layout-type="dark"] .table td, .pcoded[layout-type="dark"] .table th {
     border-top: none; 
}
.pcoded[layout-type="dark"] .card-footer {
     background-color: transparent; 
}
.d-xcard{
    min-height:375px;
}
</style>
<style>
    .data-table-plain .data-col {
  padding: 14px 12px 14px 0;
}
.data-table:not(.dt-init) .data-item:last-child .data-col {
  border-bottom: none;
  padding-bottom: 5px;
}
.data-col:last-child {
  padding-right: 0;
}
.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-col .sub {
  font-size: 10px;
  font-weight: 400;
  color: #758698;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding-top: 7px;
  display: block;
}
.data-col .sub-s2 {
  font-size: 12px;
  color: #495463;
  padding-top: 0;
}
.data-col .sub-s2.sub-time {
  font-size: 0.8em;
}
.data-col .sub:first-child {
  padding-top: 0;
}
.data-col .sub [data-toggle="tooltip"] {
  color: #758698;
  font-size: 11px;
}
.data-col.dt-status {
  text-align: center;
}
.data-col-wd-sm {
  width: 100px;
}
.data-col-wd-md {
  width: 120px;
}
.data-col-wd-lg {
  width: 180px;
}
.data-col .text-wrap {
  width: 70px;
}
.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;
}
.data-state {
  height: 30px;
  width: 30px;
  line-height: 28px;
  flex-shrink: 0;
  display: inline-block;
}
.data-state:not(:last-child) {
  margin-right: 12px;
}
.data-state:after {
  display: block;
  font-family: "themify";
  color: #7668fe;
  height: 100%;
  width: 100%;
  font-size: 14px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid;
}
.data-state-sm {
  height: 24px;
  width: 24px;
  line-height: 23px;
}
.data-state-sm:after {
  font-size: 12px;
}
.data-item {
    background: #fff;
    margin-bottom: 3px;
    border-radius: 4px;
    position: relative;
}

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

.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>
@endsection

@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>Transaction History</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="#">ROI</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="card">
            	@if(Session::has('message'))
		        <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-info alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <i class="fa fa-info-circle"></i> {{ Session::get('message') }}
                        </div>
                    </div>
                </div>
                @endif
        </div>
                                    <!-- Inverse table card start -->
                                    <div class="card d-xcard">
                                        
                                        <div class="card-block table-border-style">
                                            <div class="table-responsive">
                                                <table class="table table-inverse">
                                                    <thead>
                                                        <tr>
                                                             <th>ID</th>
                      <th>Plan</th>
                      <th>Amount</th>
                      <th>Type</th>
                      <th>Date</th>
                      <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                      @if(!empty($trans))
                                        @foreach($trans as $tran)
                                        <tr class="data-item tnx-item-72065 odd" >
                                            <td class="data-col">{{$tran->tx_no}}</td>
                                            <td class="data-col">{{$tran->dplan()->name}}</td>
                                            <td class="data-col">{{number_format($tran->amount,2 , '.',',')}}</td>
                                            <td class="data-col">{{$tran->type}}</td>
                                            <td class="data-col">{{\Carbon\Carbon::parse($tran->created_at)->toDayDateTimeString()}}</td>
                                            <td></td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <tr class="odd">
                                            <td valign="top" colspan="6" class="dataTables_empty">No data available in table</td>
                                        </tr>
                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="card-footer-right">
                                                
                                                </div>
                                        </div>
                                    </div>
                                    <!-- Inverse table card end -->
                                 
                                </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                        <div id="styleSelector">

                        </div>
                    </div>
@endsection