@extends('_layout.layout')

@section('title') Campaigns
@endsection

@section('modals')
@include('_layout.partials.deletemodal')
@endsection

@section('header')
<h1> <a href="{{route('getCompanyDetails',$company->id)}}">{{$company->name}}</a> <small>Campaigns</small></h1>
@endsection


@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="portlet box green">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-th-large"></i>
          <span class="caption-subject bold uppercase"> Campaigns list</span>
        </div>
        <div class="actions">
          <a id="sortButton" class="btn btn-warning btn-sm">Enable sorting</a>
          <a href="{{route('getCreateCampaign',$company->id)}}" class="btn btn-circle white"><i class="icon-plus"></i> Create campaign </a>
        </div>
      </div>
      <div class="portlet-body">
            @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="vertical-align:middle; text-align: center; width: 100px">Order</th>
              <th style="vertical-align:middle;">Campaign name</th>
              <th style="vertical-align:middle;">Campaign message</th>
              <th style="vertical-align:middle;">Category</th>
              <th style="vertical-align:middle;">Subcategory</th>
              <th style="vertical-align:middle; text-align: center; width: 150px">Drips count</th>
              <th style="vertical-align:middle; text-align: center; width: 150px">Clicks count</th>
              <th style="vertical-align:middle; text-align: center; width: 200px">Actions</th>
            </tr>
            </thead>
            <tbody>
                @foreach($subcategory->campaigns->sortBy('ord') as $campaign)
            <tr>
              <td style="text-align: center;" class="index" data-item-id="{{$campaign->id}}">{{$campaign->ord}}</td>
              <td><a href="{{route('getEditCampaign',$campaign->id)}}">{{$campaign->name}}</a></td>
              <td>{{$campaign->message}}</td>
              <td>{{$category->name}}</td>
              <td>{{$subcategory->name}}</td>
              <td style="text-align: center;">{{$campaign->drips->count()}}</td>
              <td style="text-align: center;">{{($clickCount = $linkClicks->where('code',$campaign->link_code)->first())?$clickCount['clicks']:0}}</td>
              <td style="text-align: center;">
                <a href="{{route('getEditCampaign',$campaign->id)}}" class="btn btn-outline btn-circle green btn-sm purple"><i class="fa fa-edit"></i> Edit </a>
                {{ Form::open(['route' => ['deleteCampaign',$campaign->id],'class' => 'form-inline inline deleteItemForm',
                    'id' => 'deleteItemForm'.$campaign->id, 'data-item-id' => $campaign->id, 'data-item-data' => $campaign->name.'  from '.$category->name.' - '.$subcategory->name ]) }}
                  {{Form::hidden('_method','DELETE')}}
                  <button type="submit" class="btn btn-outline btn-circle dark btn-sm black"><i class="fa fa-trash-o"></i> Delete </a>
                {{ Form::close() }}
              </td>
            </tr>
                @endforeach
          </tbody></table>
              @endforeach
            @endforeach
        </div>
      </div>
    </div>
  </div>
</div>



      

@endsection

@section('page-script')
<script src="{{asset('assets/js/jquery-ui.min.js')}}" type="text/javascript"></script>
<script>
  $(".deleteItemForm button").on('click', function (e) {
      e.preventDefault();
      $('#deleteModal .modal-title').text('Confirm delete the campaign:  '+$(this).parent().data('item-data'));
      $('#deleteModal .modal-body').html('Are you sure you want to delete the campaign?<br/>Warning: the campaign will be removed from all the company users.');
      $('#deleteModal-confirmButton').data('item-id',$(this).parent().data('item-id'));
      $('#deleteModal').modal('show');
  });

  $('#deleteModal-confirmButton').on('click', function (e) {
    $("#deleteItemForm"+$(this).data('item-id')).submit();
  });


  var sortable=false;

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
};
var updateIndex = function(e, ui) {
    console.log("changed");
    var items = [];
    var values = [];

    $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
            items.push($(this).data('item-id'));
            values.push(i + 1);
        });

        $.ajax({
                url: '{!! route("postOrderCampaigns",$company->id) !!}',
                type: 'POST',
                data: {items: items, order:values},
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(result) { 
                    //console.log(result);
                } || $.noop
            });
    };

$("#sortButton").on('click', function (e) {
    e.preventDefault();
    if (sortable) {
        $(".table tbody").sortable('disable');
        $(".table tbody").css("cursor","default");
        $(".table tbody").enableSelection();
        sortable=false;
        $('#sortButton').html('Enable sorting');
    }
    else
    {
        $(".table tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex,
            disabled:false
        });
        $(".table tbody").css("cursor","move");
        $(".table tbody").disableSelection();
        sortable=true;
        $('#sortButton').html('Disable sorting');
    }
});
</script>


@endsection

@section('page-css')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection