@include('includes.header')


<div class="container-fluid mt-3">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
          <ul class="pull-right d-inline-flex" style="list-style: none;">
            <li class="btn-sm">
                <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;"> All Account</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 110px; text-align: center; color: white;"> Pending</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;"> All History</a>
            </li>
          </ul><br>
          <b style="color: #009688;">Total Report</b>
      </div>
  </div>
  <hr/>
  <!-- Request Statistic Starts -->
   <div class="container-fluid">
          <table class="table table-striped account-table" style="margin-left: -1%;">
              <tr>
                  <th>Service</th>
                  <th>Success</th>
                  <th style="color: rgb(184, 47, 47)">Refunded</th>
              </tr>
              <tr>
                  <td>TopUp</td>
                  <td style="color: rgb(6, 211, 6)">{{ $totalReport->total_topup_complete }}</td>
                  <td style="color: rgb(184, 3, 3)">{{ $totalReport->total_topup_refunded }}</td>
              </tr>
              <tr>
                <td>Remittance</td>
                <td style="color: rgb(6, 211, 6)">{{ $totalReport->total_remittance_complete }}</td>
                <td style="color: rgb(184, 3, 3)">{{ $totalReport->total_remittance_refunded }}</td>
              </tr>
          </table>
  <!--Ends-->
  </div>
  <div id="sidebar" class="users p-chat-user showChat" style="display: none">
    <div class="had-container">
      <div class="p-fixed users-main">
        <div class="user-box">
          <div class="chat-search-box">
            <a class="back_friendlist">
              <i class="feather icon-x"></i>
            </a>
            <div class="right-icon-control">
              <div class="input-group input-group-button">
                <input type="text" id="search-friends" name="footer-email" class="form-control"
                  placeholder="Search Friend">
                <div class="input-group-append">
                  <button class="btn btn-primary waves-effect waves-light" type="button"><i
                      class="feather fa fa-search"></i></button>
                </div>
              </div>
            </div>
          </div>
          <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 561px;">
            <div class="main-friend-list" style="overflow: hidden; width: auto; height: 561px;">
              <div class="media userlist-box waves-effect waves-light" data-id="1" data-status="online"
                data-username="Josephin Doe">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius img-radius" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}"
                    alt="Generic placeholder image ">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="chat-header chatboxuser">Josephin Doe</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="2" data-status="online"
                data-username="Lary Doe">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/66cab5457cc25Muhammad Nasarullah.jpeg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Lary Doe</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="3" data-status="online"
                data-username="Alice">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assest/image/66cabd10e43aacustomer5.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-success"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Alice</div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="4" data-status="offline"
                data-username="Alia">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/66cabd4c5f08dcustomer7.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-default"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Alia<small class="d-block text-muted">10 min ago</small></div>
                </div>
              </div>
              <div class="media userlist-box waves-effect waves-light" data-id="5" data-status="offline"
                data-username="Suzen">
                <a class="media-left" href="#!">
                  <img class="media-object img-radius" src="{{url('assets/image/team-1-4.jpg')}}"
                    alt="Generic placeholder image">
                  <div class="live-status bg-default"></div>
                </a>
                <div class="media-body">
                  <div class="f-13 chat-header">Suzen<small class="d-block text-muted">15 min ago</small></div>
                </div>
              </div>
            </div>
            <div class="slimScrollBar"
              style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px;">
            </div>
            <div class="slimScrollRail"
              style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div class="showChat_inner " style="display:none">
      <div class="media chat-inner-header" style="position: relative;">
        <a class="back_chatBox">
            Josephin Doe
        </a>
        <button type="button" class="close close-chat" aria-label="Close" style="position: absolute; top: 1; right: 2;">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
      <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 486px;"><div class="main-friend-chat" style="overflow: hidden; width: auto; height: 486px;">
      <div class="media chat-messages">

      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">I'm just looking around. Will you tell me something about yourself?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <div class="media-body chat-menu-reply">
      <div class="">
      <p class="chat-cont">Ohh! very nice</p>
      </div>
      <p class="chat-time">8:22 a.m.</p>
      </div>
      </div>
      <div class="media chat-messages">
      <a class="media-left photo-table" href="#!">
      <img class="media-object img-radius img-radius m-t-5" src="{{url('assets/image/66caa59ab09b21717478001.jpg')}}" alt="Generic placeholder image">
      </a>
      <div class="media-body chat-menu-content">
      <div class="">
      <p class="chat-cont">can you come with me?</p>
      </div>
      <p class="chat-time">8:20 a.m.</p>
      </div>
      </div>
      </div>
      <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 486px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div></div>
      <div class="chat-reply-box py-3">
      <div class="right-icon-control">
      <div class="input-group input-group-button">
      <input type="text" class="form-control" placeholder="Write hear . . " style="border-top: 0; border-right: 0; border-left: 0;">
      <i class="fa fa-paper-plane mt-1 fa-2x" aria-hidden="true"></i>
      </div>
      </div>
      </div>
    </div>
  <br/>
  <br/>


@include('includes.footer')