@extends('_layout.layout')

@section('title') Customers activity
@endsection

@section('header') 
    {{-- <h1>Customers activity</h1> --}}
@endsection

@section('content')

<div class="row">
  <div class="col-md-12">
    <div class="portlet box blue-hoki">
      <div class="portlet-title">
        <div class="caption">
          <i class="icon-tools"></i>
          <span class="caption-subject bold uppercase"> Filters</span>
        </div>
      </div>
      <div class="portlet-body">
        {!! Form::open(['route' => 'postCustomersActivityReport','class' => 'form-horizontal']) !!}
            <div class="row" style="padding-right: 20px">
              {!! Form::label('fromdate', 'From', ['class' => 'col-sm-1 control-label']) !!}
              <div id="datePicker_fromdate" class="col-sm-3">
                {!! Form::text('fromdate', $fromDate->format('M j, Y'), ['class' => 'form-control', 'required' => 'required']) !!}
              </div>
              {!! Form::label('todate', 'To', ['class' => 'col-sm-1 control-label']) !!}
              <div id="datePicker_todate" class="col-sm-3">
                {!! Form::text('todate', $toDate->format('M j, Y'), ['class' => 'form-control', 'required' => 'required']) !!}
              </div>
              <!-- <div class="col-sm-2"> -->
                <button type="submit" class="btn blue-hoki pull-right">Generate</button>
            <!-- </div> -->
          </div>
        {!! Form::close() !!}
      </div>
    </div>
  </div>
</div>



<div class="row">
  <div class="col-md-12">
    <div class="portlet box green">
      <div class="portlet-title">
        <div class="caption">
          <span class="caption-subject bold uppercase">Customer activity report: {{$fromDate}} - {{$toDate}} ({{$periodDays}} days)</span>
        </div>
        <div class="tools"> </div>
      </div>
      <div class="portlet-body">
            <table id="usersTable" class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" role="grid"><thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Twilio number</th>
                    <th style="text-align: center">Messages Sent</th>
                    <th style="text-align: center">Messages Parts Sent</th>
                    <th style="text-align: center">Messages Purchased</th>
                    <th style="text-align: center">Valid licence days</th>
                    <th>Valid licence %</th>
                </tr>
                </thead>

                <tbody>
                @foreach($users as $user)
                <tr>
                    <td>{{$user->id}}</td>
                    <td><a href="{{route('getApiUserDetails',$user->id)}}">{{$user->fullname}}</a></td>
                    <td>{{$user->email}}</td>
                    <td>{{$user->twilio_number}}</td>
                    <td style="text-align: center">{{$user->messagesSentCount}}</td>
                    <td style="text-align: center">{{$user->messagesPartsSentCount}}</td>
                    <td style="text-align: center">{{$user->messagesPurchasedTimes}}</td>
                    <td style="text-align: center">{{$user->licenceDays}}</td>
                    <td><div class="progress" style="margin-bottom: 0px"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{$user->licenceDaysPercent}}" aria-valuemin="0" aria-valuemax="100" style="color: #000;width: {{$user->licenceDaysPercent}}%">{{$user->licenceDaysPercent}}%</div></div></td>

                </tr>
                @endforeach
            </tbody></table>
       </div>
    </div>
  </div>
</div>


@endsection


@section('page-script')
<script src="{!!asset('assets/js/bootstrap-datepicker.min.js')!!}"></script>
<script src="{!!asset('assets/js/jquery.datatables.min.js')!!}"></script>
<script src="{!!asset('assets/js/datatables.bootstrap.js')!!}"></script>
<script src="{!!asset('assets/js/datatables.buttons.min.js')!!}"></script>
<script src="{!!asset('assets/js/buttons.html5.min.js')!!}"></script>
<script src="{!!asset('assets/js/jszip.min.js')!!}"></script>

<script type="text/javascript">
$('#datePicker_fromdate input').datepicker({
    startView: 0,
    maxViewMode: 2,
    orientation: "bottom auto",
    todayHighlight: true,
    format:'M d, yyyy'

});

$('#datePicker_todate input').datepicker({
    startView: 0,
    maxViewMode: 2,
    orientation: "bottom auto",
    todayHighlight: true,
    format:'M d, yyyy'
});


  $('#usersTable').DataTable({
    lengthMenu: [[50, 100, -1], [50, 100, "All"]],
    "dom": "<'row' <'col-sm-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
    buttons: [{ extend: 'excel',text: 'Excel export', className: 'btn default ' },],
    "columnDefs": [
            {
              //(832) 259-6473
                "render": function ( data, type, row ) {
                    if (!data)
                      return data;
                    return '('+data.substring(2, 5)+') '+data.substring(5, 8)+'-'+data.substring(8);
                },
                "targets": 3
            },
        ]

  });

</script>
@endsection

@section('page-css') 

    <link rel="stylesheet" href="{!!asset('assets/css/bootstrap-datepicker3.min.css')!!}">
    <link rel="stylesheet" href="{!!asset('assets/css/datatables.min.css')!!}">
    <link rel="stylesheet" href="{!!asset('assets/css/datatables.bootstrap.css')!!}">
    <style type="text/css">
      button.dt-button,
      div.dt-button,
      a.dt-button {
        background-image: none !important;
        padding: 6px 12px !important; }
        button.dt-button:last-child,
        div.dt-button:last-child,
        a.dt-button:last-child {
          margin-right: 0; }

      .dataTables_wrapper .dt-buttons {
        float: right; }
        .portlet.light .dataTables_wrapper .dt-buttons {
          margin-top: -64px; }
        .portlet.box .dataTables_wrapper .dt-buttons {
          margin-top: -50px; }
      
    </style>
@endsection