@extends('loader')
@extends('layouts.app')
@extends('layouts.master')
<style>
#packageList thead tr {
  cursor: pointer;
  outline: none;
}
#packageList thead tr th::after { 
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
#packageList #no-sort::after { 
  content: '';
}
</style>
@section('content')
<div class="main-panel dashboard"> 
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="row">
                    <div class="col-md-4">
                        <!-- <form method="get" class="search_form_keys" id="search_form_keys" action=""> -->
                          <div class="input-group rounded-bar">
                              <div class="input-group-prepend hover-cursor" id="navbar-search-icon">
                                <button type="submit"><span class="input-group-text" id="search">
                                  <i class="ti-search"></i>
                                </span></button>
                                
                              </div>
                              <input type="text" name="search" class="form-control search_key" id="navbar-search-input" placeholder="{{ trans('language.search') }}" aria-label="search" aria-describedby="search" value="">
                            </div>
                          <!-- </form> -->
                        
                    </div>
                     <div class="col-md-3">
            <div class="form-group">
                       
                          <select class="form-control"  id="status">
                              <option value="">{{ trans('language.all') }}</option>
                              <option value="pending">{{ trans('language.pending') }}</option>
                              <option value="success">{{ trans('language.success') }}</option>
                              <option value="failed">{{ trans('language.failed') }}</option>
                          </select>
                      </div></div>

                      <div class="col-md-5">
                        <button class="btn btn-primary btn-icon-text" onclick="search()">
                                <i class="ti-search btn-icon-prepend"></i>{{ trans('language.submit') }}
                        </button>
                        <button class="btn btn-primary btn-icon-text trans_export">
                        {{ trans('language.export_csv') }}
                        </button>
                    </div>
            
        </div>
        <div class="row">
        <div class="col-md-6">
        <label>{{trans('language.subscribed_on')}}</label>
        </div>
        <div class="col-md-6">
        <label>{{trans('language.subscription_ends')}}</label>
        </div>
        </div>
                <div class="row">
                    

                      <div class="col-md-3">
            <div class="form-group">
                        
                        <label>{{trans('language.from_date')}}</label>
                        <div class="input-group" id="">
                            <input  type="text" class="form-control" name="from_plan_startdate" id="from_plan_startdate"/>
                            <div class="input-group-addon input-group-append">
                                <div class="input-group-text">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                </div>
                            </div>
                      </div>
</div>
                    </div>
                    <div class="col-md-3">
            <div class="form-group">
                        
                        <label>{{trans('language.to_date')}}</label>
                        <div class="input-group " id="">
                            <input   type="text" class=" form-control" name="to_plan_enddate" id="to_plan_enddate"/>
                            <div class="input-group-addon input-group-append">
                                <div class="input-group-text">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                </div>
                            </div>
                      </div>
</div>
                    </div>
                    <div class="col-md-3">
            <div class="form-group">
                        
                        <label>{{trans('language.from_date')}}</label>
                        <div class="input-group " id="">
                            <input  type="text" class=" form-control" name="plan_enddate" id="subplan_startdate"/>
                            <div class="input-group-addon input-group-append">
                                <div class="input-group-text">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                </div>
                            </div>
                      </div>
</div>
                    </div>
                    <div class="col-md-3">
            <div class="form-group">
                        
                        <label>{{trans('language.to_date')}}</label>
                        <div class="input-group " id="">
                            <input  type="text" class="date form-control" name="plan_startdate" id="subplan_enddate"/>
                            <div class="input-group-addon input-group-append">
                                <div class="input-group-text">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                </div>
                            </div>
                      </div>
</div>
                    </div>
                </div>
      
                    <br>
        <div class="row">
            <div class="col-md-3 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex">
                  
                  <p class="card-title text-md-center text-xl-left">{{ trans('language.total_amount') }} &nbsp;&nbsp;&nbsp;</p>
                  </div>
                  <div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
                    <h2 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0"><a href="javascript:void(0)"  style="color: black;"></a></h2>
                  </div>    
                  
                </div>
              </div>
            </div>
            
            <div class="col-md-3 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex">
                  
                  <p class="card-title text-md-center text-xl-left">{{ trans('language.total_transaction_count') }}</p>
                  </div>
                  <div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
                    <h2 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0"><a href="javascript:void(0)"  style="color: black;"></a></h2>
                
                  </div>  
                </div>
              </div>
            </div>
            

          </div>
                <!-- list div -->
            <div class="row" id="tableBody"></div>
            <!-- list div ends -->
    </div>
</div>

<div class="modal fade" id="groupview" tabindex="-1"  role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content-wrapper">
<div class="modal-content">
<div class="modal-header clearfix text-left">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i>
</button>
<h5 style="padding-right: 800px;"><span class="semi-bold">{{ trans('language.view') }}</span></h5>

</div>
<div class="modal-body" id="viewgroup">

</div>
</div>
</div>

</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

var page=1; // initial page in the list
var sortorder = "DESC";
var sortcolumn = "start_datetime";
var tab = "";

$( function() {
    $( "#from_plan_startdate" ).datepicker();
  } );

  $( function() {
    $( "#to_plan_enddate" ).datepicker();
  } );

  $( function() {
    $( "#subplan_startdate" ).datepicker();
  } );

  $( function() {
    $( "#subplan_enddate" ).datepicker();
  } );
  
$(".trans_export").click(function(){
  

  $("#TransactionList").table2csv({
  filename: 'TransactioList.csv'
});

});
$(document).ready(function(){

$('#packageModalTitle').html("{{trans('language.add_package')}}");
$('#actionurl').prop("action","{{url('/addpackage')}}");
fetchTransaction();

// event for catching click on pagination links
$(document).on('click', '.pagination a', function(event){

    event.preventDefault(); 
    page = $(this).attr('href').split('page=')[1];
    fetchTransaction(page,sortcolumn,sortorder);

});
// event for catching click on pagination links ends

});

// ajax function to fetch package data
function fetchTransaction(page=1,field="created_at",sort="DESC"){
        
        sortcolumn = field;
        sortorder = sort;
        showorhideloader();

        $.ajax({
            url:"{{url('/getTransactionAjax')}}",
            data:{'page':page,'field_to_sort':field,'sort':sort,'search' : $('#navbar-search-input').val(),
            'status':$('#status').val(),'from_plan_startdate':$('#from_plan_startdate').val(),
            'to_plan_enddate':$('#to_plan_enddate').val(),'subplan_startdate':$('#subplan_startdate').val(),
            'subplan_enddate':$('#subplan_enddate').val()},
            success:function(data) 
            {
               if(data == ""){
                window.location = "{{url('/login')}}";
               }
                $('#tableBody').html(data);
                showorhideloader('hide');
            },error: function (responseData, textStatus, errorThrown) {
                console.log(responseData+" "+textStatus+" "+errorThrown);
            },
        });
        
    }
    // ajax function to fetch package data ends

    $("body").on("click",'.groupid', function(){    
      
    
      var groupid = $(this).data("groupid");
      
      var url = baseurl+'/viewgroup/'+groupid;

      //alert(url);

      $.ajax({url: url, success: function(result){
      
       $("#viewgroup").html(result);
          
      $('#groupview').modal('show'); 
          
     
   
}});

});

function sortorderchange(field,sort){
  if(sort == "ASC"){
    sort = "DESC";
  }
  else{
    sort = "ASC";
  }
  fetchTransaction(page,field,sort);
}

// search submit button click handler function
function search(){
        page =1;
        // var sortcolumn = getSortColumn('areasortcolumn');
        fetchTransaction(page,sortcolumn,sortorder);
    }
     // search submit button click handler function ends

</script>
@endsection