@extends('layouts.usermaster')

@section('title')
Voice Sync: My Network
@endsection

@section('content.header.title')
My Network
@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.css') }}">
@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            @isset($totals)
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Transactions groups">
              <div class="btn-group mr-2" role="group" aria-label="Groups">
                <a class="btn btn-primary" href="{{ route('user-network') }}"
                  role="button">All</span>
                </a>
                @foreach($totals as $id => $total)
                <a class="btn btn-primary" href="{{ route('user-network', ['id' => $id]) }}"
                  role="button">Tier
                  {{ $id }}
                  <span class="badge badge-light">{{ $total }}</span>
                </a>
                @endforeach
                <a class="btn btn-warning"
                  href="{{ route('user-network-download') }}"
                  role="button">Download</span>
                </a>
              </div>
            </div>
            @endisset
          </div>
          <div class="card-body table-responsive p-0">
            <div class="clearfix">
              <p></p>
            </div>
            <table id="trans" class="table table-bordered table-striped table-hover">
              <thead class="thead-dark">
                <tr>
                  <th>Tier #</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Account Type</th>
                  <th>Date Joined</th>
                </tr>
              </thead>
              <tbody>
                @isset($refs)
                @foreach($refs as $ref)
                <tr>
                  <td>{{ $ref->ref_level }}</td>
                  <td>{{ $ref->ref_first_name }}</td>
                  <td>{{ $ref->ref_last_name }}</td>
                  <td>{{ $ref->account_name }}</td>
                  <td>{{ \Carbon\Carbon::parse($ref->created_at)->format('m/d/Y')}}</td>
                </tr>
                @endforeach
                @endisset
              </tbody>
              <tfoot>
              </tfoot>
            </table>
          </div>
          <!-- /.card-body -->
        </div>

      </div>
    </div>
    <!-- /.row -->
  </div><!-- /.container-fluid -->
</section>
@endsection('content')

@section('javascript')
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!-- 

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
-->
<script src="{{ asset('js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

@endsection
@section('page_script')
<script>
  $(document).ready(function () {
    var table = $('#trans').DataTable();
    table.on('draw', function () {
      $('[data-toggle="popover"]').popover();
    });

    $(function () {
      $('[data-toggle="popover"]').popover()
    })

  });
</script>
@endsection