@extends('layouts.app-2')
@section('title')
   Kordinator Wallet
@endsection
@section('content')

   <!-- Content Header (Page header) -->
   <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Kordinator Wallet</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item">Kordinator</li>
              <li class="breadcrumb-item active">Wallet</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
   </div>
    <!-- /.content-header -->

   <section class="content">
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-3">

               <!-- Profile Image -->
               <div class="card  card-outline">
                  <div class="card-body box-profile">
                     <div class="text-center">
                     <img style=" object-fit:cover; height:95px;width:95px" class="profile-user-img img-circle img-fluid"
                           src="{{asset('lte/dist/img/profil.png')}}"
                           alt="User profile picture">
                     </div>

                     <h3 class="profile-username text-center">Nama Kordinator</h3>

                     <p class="text-muted text-center">Area</p>

                     

                  </div>
                  <!-- /.card-body -->
               </div>
               <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
               <div class="small-box bg-success">
                  <div class="inner">
                    <h3>Rp. 3,400,000<sup style="font-size: 20px"></sup></h3>
    
                    <p>Saldo</p>
                  </div>
                  <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                  </div>
                  <a href="#" class="small-box-footer">
                    More info <i class="fas fa-arrow-circle-right"></i>
                  </a>
                </div>
            </div>
            <!-- /.col -->
         </div>
         <!-- /.row -->
      </div><!-- /.container-fluid -->
   </section>
@endsection

@push('datatables')
<script>
   $(function () {
     $("#example1").DataTable({
       "responsive": true,
       "autoWidth": false,
     });
     $('#example2').DataTable({
       "paging": true,
       "lengthChange": false,
       "searching": false,
       "ordering": true,
       "info": true,
       "autoWidth": false,
       "responsive": true,
     });
   });
 </script>
@endpush