@extends('_layout.layout')

@section('title') Campaigns activity
@endsection

@section('header') 

@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' => 'postCampaignsActivityReport','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-2">
                {!! 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-2">
                {!! Form::text('todate', $toDate->format('M j, Y'), ['class' => 'form-control', 'required' => 'required']) !!}
              </div>

              @if (auth()->user()->role==\App\PlatformUser::ROLE_DEVELOPER
                || auth()->user()->role==\App\PlatformUser::ROLE_PLATFORM_ADMIN
                || auth()->user()->role==\App\PlatformUser::ROLE_PLATFORM_USER
                || auth()->user()->role==\App\PlatformUser::ROLE_PLATFORM_REPORT_MANAGER
              )
              {!! Form::label('company', 'Company', ['class' => 'col-sm-1 control-label']) !!}
              <div class="col-sm-3">
                {!! Form::select('company',$companies->pluck('name','id') ,$company_id, ['class' => 'form-control', 'required' => 'required']) !!}
              </div>
              @endif

              <!-- <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">Campaigns activity report: {{$fromDate}} - {{$toDate}} for {{$companies->where('id','=',$company_id)->first()->name}} </span>
        </div>
        <div class="tools"> </div>
      </div>
      <div class="portlet-body">

                  
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover"><thead>
            <tr>
              <th style="width: 150px">Category</th>
              <th>Subcategory</th>
              <th style="text-align: center; width: 200px">Campaign messages</th>
              <th style="text-align: center; width: 200px">Drips messages</th>
            </tr>
            </thead>
            <tbody>
            @foreach($categories as $category)
                @foreach($category->subcategories as $subcategory)
            <tr>
              <td>{{$category->name}}</td>
              <td>{{$subcategory->name}}</td>
              <td style="text-align: center;">{{$subcategory->campaignMessages}}</td>
              <td style="text-align: center;">{{$subcategory->campaignDripsMessages}}</td>
            </tr>
                @endforeach
            @endforeach
            <tr style="font-weight: bold">
              <td colspan="2">Total</td>
              <td style="text-align: center;">{{$totalCampaignMessages}}</td>
              <td style="text-align: center;">{{$totalCampaignDripsMessages}}</td>
            </tr>
          </tbody></table>
              
            

            <hr>
                        @foreach($categories as $category)
              @foreach($category->subcategories as $subcategory)
        
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover"><thead>
            <tr>
              <th style="width: 150px">Category</th>
              <th style="width: 200px">Subcategory</th>
              <th style="">Campaign name</th>
              <th style="text-align: center; width: 200px">Campaign messages</th>
              <th style="text-align: center; width: 200px">Drips messages</th>
            </tr>
            </thead>
            <tbody>
                @foreach($subcategory->campaigns->sortBy('ord') as $campaign)
            <tr>
              <td>{{$category->name}}</td>
              <td>{{$subcategory->name}}</td>
              <td>{{$campaign->name}}</td>
              <td style="text-align: center;">{{$campaign->campaignMessages}}</td>
              <td style="text-align: center;">{{$campaign->campaignDripsMessages}}</td>
            </tr>
                @endforeach
          </tbody></table>
              @endforeach
            @endforeach





       </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 ' },],
    

  });

</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