@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','User Creditcard List')
{{-- vendor styles --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/buttons.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/sweetalert2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/animate/animate.css')}}">
@endsection
{{-- page styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-users.css')}}">
@endsection
@section('content')

<!-- users list start -->
<section class="users-list-wrapper">
  <div class="users-list-filter px-1">

    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-lg-12">
        <h2><i class="fa fa-users" aria-hidden="true"></i> Subscriber Management</h2>
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{{url(env('ADMIN_BASE').'/dashboard/ecommerce')}}">Dashboard</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{{url(env('ADMIN_BASE').'/app/subscribers/list')}}">Subscriber List</a>
          </li>
          <li class="breadcrumb-item active">
            <span class="label label-success float-right all_backgroud">Creditcard List</span>
          </li>
        </ol>
      </div>
    </div>
    @csrf
    <!-- datatable start -->
    <div class="table-responsive mt-4">
      <table id="users-list-datatable" class="table">
        <thead>
          <tr>
            <th>No</th>
            <th class="text-uppercase">Credit Card Number</th>
            <th class="text-uppercase">Card Expire</th>
            <th class="text-uppercase">Card Type</th>
            <th class="text-uppercase">First Name</th>
            <th class="text-uppercase">Last Name</th>
            <th class="text-uppercase">Address</th>
            <th class="text-uppercase">State</th>
            <th class="text-uppercase">City</th>
            <th class="text-uppercase">Country</th>
            <th class="text-uppercase">Zip Code</th>
            <th>UPDATED AT</th>
          </tr>
        </thead>
        <tbody>
          @for ($i = 0; $i < count($cards); $i++) <tr>
            <td>{{$cards[$i]->id}}</td>
            <td>
              @php echo "xxxx-xxxx-xxxx-" . substr($cards[$i]->card_number, -4) @endphp
            </td>
            <td>{{$cards[$i]->card_expire}} </td>
            <td>{{$cards[$i]->card_name}}</td>
            <td>{{$cards[$i]->first_name}}</td>
            <td>{{$cards[$i]->last_name}}</td>
            <td>{{$cards[$i]->address_line_1}} <br/>{{$cards[$i]->address_line_2}}</td>
            <td>{{$cards[$i]->state}}</td>
            <td>{{$cards[$i]->city}}</td>
            <td>{{$cards[$i]->country_name}} </td>
            <td>{{$cards[$i]->zip_code}}</td>
            <td>{{$cards[$i]->updated_at}}</td>
            </tr>
            @endfor

        </tbody>
      </table>
    </div>
    <!-- datatable ends -->
  </div>
  </div>
  </div>
</section>
<!-- users list ends -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/tables/datatable/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/polyfill.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/pages/app-users.js')}}"></script>
<script src="{{asset('js/scripts/pages/delete-alerts.js')}}"></script>
@endsection
@section('scripts')
<script>
</script>
@endsection