@include('includes.admin.header')
@include('includes.admin.sidebar')
<link rel="stylesheet" href="/datepicker/dist/css/default/zebra_datepicker.min.css">
<script src="/datepicker/dist/zebra_datepicker.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/date-dd-MMM-yyyy.js"></script>
<script>
    $(document).ready(function(){
        $('#user-menu').addClass('active');
    });
</script>
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Payment List
            <small>From users</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Users</a></li>
            <li class="active">Payment List</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">Payment List</h3>
                </div><!-- /.box-header -->
                <div class="box-body table-responsive">
                    <div class="col-xs-12 hcenter" id="loading">
                        <img src="/images/loading.gif" class="col-xs-12"/>
                    </div>
               
                
                
                    <div class="col-xs-12" id="main-container" style="display:none">

                        <div class="col-xs-12">
                            <div class="col-xs-12 well">
                                <label>
                                    User
                                </label>
                                <div class="col-xs-12">
                                    <select class="form-control" id="user_id">
                                        <option value="">---Select User---</option>
                                            @if (!empty($users))
                                                @foreach ($users AS $user)
                                                <option value="{{$user->UUID}}">{{$user->name}}({{$user->email}})</option>
                                                @endforeach
                                            @endif
                                    </select>
                                </div>
                            </div>
                            <table class="table table-striped table-datatable" id="existing_votes_container">
                                <thead>
                                    <tr>
                                        <th>
                                            SI
                                        </th>
                                        <th>
                                            No. of Votes
                                        </th>
                                        <th>
                                            Expiry Date
                                        </th>
                                        <th>
                                            Payment Date
                                        </th>
                                        <th>
                                            User
                                        </th>
                                        <th>
                                            Phone
                                        </th>
                                        <th>
                                            Email
                                        </th>
                                        <th>
                                            Country
                                        </th>
                                        <th>
                                            Added Through
                                        </th>
                                        <th>
                                            Price
                                        </th>
                                        <th>
                                           Description
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td id="total_price">
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="9">
                                             <nav class="pull-left" aria-label="Page navigation example">
                                                <ul class="pagination">
                                                    <li class="page-item"><a class="page-link" href="#" id="btn-prev">Previous</a></li>
                                                    <li class="page-item"><a class="page-link" href="#" id="btn-next">Next</a></li>
                                                </ul>
                                            </nav>
                                            <div class="pull-right" id="page_no">
                                                
                                            </div>
                                        </td>
                                    </tr>
                                   
                                </tfoot>
                            </table>
                        </div>

                    </div>
                </div>
              </div><!-- /.box -->

             
            </div><!-- /.col -->
            
          </div><!-- /.row -->
          
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->
      
      <script>
          var page = 0;
            $(document).ready(function(){
                
                jQuery('.datetimepicker').datetimepicker({
                    format : 'd M Y H:i:s',
                    step : 15
                });
                $('.datepicker').Zebra_DatePicker({
                    format : 'd M Y'
                });
                getPayments();
                $('#btn-prev').click(function(){
                    if(page < 1)
                    {
                        return;
                    }
                    page--;
                    
                    getPayments();
                });
                
                $('#btn-next').click(function(){
                    page++;
                    getPayments();
                });
                
                $('#user_id').change(function(){
                    page = 0;
                    getPayments();
                });
                
            });
            
            function getPayments()
            {
                $('#loading').show();
                $('#main-container').hide();
                var userID = $('#user_id').val();
                $(".table-datatable").dataTable().fnDestroy()
                $.get('/admin/user/payments/all/page/' + page,{userID:userID}, function(res){
                    var html = '';
                    $('#loading').hide();
                    $('#main-container').show();
                    var count  = 1;
                    var total = 0;
                    $(res).each(function(i, value){
                        var paymentDateFormatted = value.payment_date_formatted;
                        var formatDate = value.payment_date;
                        if(value.payment_date_formatted == null)
                        {
                            paymentDateFormatted = value.created_at_formatted;
                            formatDate = value.created_at;
                        }
                        html+=  '<tr><td>' + count++ + '</td><td>' + value.no_of_votes + '</td>';
                        html+=  '<td><span style="display:none">' + value.expiry_date + '</span>' + value.expiry_date_formatted + '</td>';
                        html+=  '<td><span style="display:none">' + formatDate + '</span>' + paymentDateFormatted + '</td>';
                        html+=  '<td>' + value.main_user_name + '</td>';
                        html+=  '<td>' + value.main_user_phone + '</td>';
                        html+=  '<td>' + value.main_user_email + '</td>';
                        html+=  '<td>' + value.country + '</td>';
                        html+=  '<td>' + value.type;
                        if(value.admin_user_name != null)
                        {
                            html+= '<br/>Added By : ' + value.admin_user_name + ' (' + value.admin_email + ')';
                        }
                        html+=  '</td>';
                        
                        html+=  '<td>' + value.payment_gross + '</td>';
                        html+=  '<td>' + value.description + '</td></tr>';
                        total+= Number(value.payment_gross);
                    });
                    $('#existing_votes_container').find('tbody').html(html);
                    // $(function () {
                    
                    
                    $(".table-datatable").DataTable(
                    {
                        dom: 'Bfrtip',
                        buttons: [

                            'excelHtml5',
                            'csvHtml5',
                            'pdfHtml5',
                           'print'
                        ],
                        "bPaginate": false,
                        paging: false,
                        searching: false,
                       
                    });
                    
                    $('#page_no').text('Page No.: ' + Number(Number(page) + Number(1)));
                    $('#total_price').text('Total Price: ' + total);
                }, 'json');
            }
           
        </script>
@include('includes.admin.footer')