@extends('admin.layout')

@section('content')
<style type="text/css">
  .modal-body {

    padding: 5rem 4rem;

    text-align: center;

}
.modal-footer .btn-primary:hover{
  background: transparent;
  border-color: transparent;
}

.dropdown-toggle::after{
    display: none;
}
.modal-body {

    font-size: 16px;

}



.modal-content {

    min-height: auto;

}



.modal-title {

    padding-left: 0;

}





.modal-body p {

    margin-bottom: 0;

    font-size: 24px;

    font-weight: 600;

}
.ecom-btn-border1{
      min-width: 125px;
          padding: 3px 9px;
}
.bg-beauty-green{
  background: #4CAF50 !important;
}
.container-custom01{
  max-width: 1900px;
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
}

.content-wrapper.close-wrapper {
    margin-left: 300px!important;
}


.content-wrapper {
    margin-left: 0px!important;
}

.sidenav {
    width: 0px;
}
table#example1 thead tr th{
    color: #fff !important;
}

table#example1 thead tr {
    background-color: #7460ee;
}
</style>

<div class="content-wrapper"> 


  <!-- Main content -->

  <section class="content"> 

    <!-- Info boxes --> 

    

    <!-- /.row -->

<div class="container-custom01">

    <div class="row">

      <div class="col-md-12">


            <div class="row">

              <div class="col-xs-12">

                  @if (count($errors) > 0) @if($errors->any())

                  <div class="alert alert-success alert-dismissible" role="alert">

                      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                      {{$errors->first()}}

                  </div>

                  @endif @endif

              </div>

          </div>

            <div class="row">

              <div class="col-md-12">
              
                <div class="" style="text-align: right;margin-bottom: 20px;">
                  <!-- <a class="btn-blue"  href="javascript:void();"  data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> Add Plan</a> -->
                </div>

                <!-- <pre>
                                  </pre> -->

                <table id="example1" class="table">

                  <thead>

                    <tr>

                      <th>Staff ID</th>

                      <th>Service</th>

                      <th> Buy Ecoin</th>

                      <th>Service + Buy Ecoin - 4000</th>
                      <th>Use Ecoin</th>
                      <th>Product</th>
                      <th>Refund Sales</th>
                      <th>Total Sales</th>
                      <th>Compensate</th>
                      <th>Action</th>

                    </tr>

                  </thead>
                  <tbody>
                                        

                  </tbody>

                </table>

                <div class="col-xs-12 text-right">


                </div>

               

              </div>

            </div>

          </div>

          <!-- /.box-body --> 

        </div>

        <!-- /.box --> 

      </div>

      <!-- /.col --> 

    </div>

    <!-- /.row --> 

    
  </section>
  <script src="{!! asset('resources/nassets/assets/libs/jquery/dist/jquery.min.js') !!}"></script>

    <!-- Bootstrap tether Core JavaScript -->

    <script src="{!! asset('resources/nassets/assets/libs/popper.js/dist/umd/popper.min.js') !!}"></script>

    <script src="{!! asset('resources/nassets/assets/libs/bootstrap/dist/js/bootstrap.min.js') !!}"></script>
    <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"type="text/javascript"></script>

    <script type="text/javascript">
        
        jQuery(document).ready( function () {
        var id=jQuery('.table').id;
        jQuery('#'+id).DataTable( {

       } );
     });

      jQuery('table').dataTable({searching: true});
    </script>


  <!-- /.content --> 

</div>

@endsection