@extends('adminlte::page')

@section('title', 'My Campaigns')

@section('content_header')
<div class="row">
  <div class="col-6">
  </div> <!-- /.col -->
  <div class="col-6">
  </div> <!-- /.col -->
</div> <!-- /.row -->
@stop

@section('content')

@include('notifications')

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">My Campaigns</h3>
      </div> <!-- /.card-header -->
      <div class="card-body table-responsive">
        <table id="CampaignsTable" class="table table-hover">
          <thead>
            <tr>
              <th width="10%">Campaign</th>
              <th></th>
              <th>Link</th>
              <th width="10%">Category</th>
              <th width="10%">Target Country</th>
              <th width="10%">Traffic Source</th>
              <th width="8%"></th>
              <th width="8%"></th>
              <!--<th width="8%"></th>-->
            </tr>
          </thead>
          <tbody>
            @foreach( $campaigns as $campaign )
            <tr>
              <td>
                {{-- <img src="{{ $blog->getFirstMediaUrl('featured-image', 'thumb') }}" alt="{{ $blog->title }}" />
                --}}
                @if( $campaign->getFirstMediaUrl('image') != null )
                <img src="{{ $campaign->getFirstMediaUrl('image') }}" alt="{{ $campaign->title }}" width="150px" />
                @else
                <img src="{{ URL::to('/') }}/images/no-image.jpg" alt="{{ $campaign->title }}" width="150px" />
                @endif
              </td>
              <td>
                {{ $campaign->title }}
                <br>
                ID #{{ $campaign->id }}
              </td>
              <td>
                {{ $campaign->pivot->shortURL->default_short_url }}
                <br><br>
                <a href="#" id="url_{{ $campaign->id }}" onclick="copyLink(event); return false;"
                  data-clipboard-text="{{ $campaign->pivot->shortURL->default_short_url }}"
                  class="btn btn-sm btn-flat btn-outline-info"><i class="fas fa-copy"></i> Copy Link</a>

                <a href="#" id="content_{{ $campaign->id }}" onclick="copyLink(event); return false;"
                  data-clipboard-text="{{ $campaign->content }} {{ $campaign->pivot->shortURL->default_short_url }}"
                  class="btn btn-sm btn-flat btn-outline-info"><i class="fas fa-copy"></i> Copy Content</a>

                <a href="{{ $campaign->getFirstMediaUrl('image') }}" id="image_{{ $campaign->id }}"
                  download="{{ $campaign->title }}" class="btn btn-sm btn-flat btn-outline-info"><i
                    class="fas fa-download"></i> Download Image</a>
              </td>
              <td>{{ str_replace( array('[',']','"'), '', $campaign->categories()->pluck('name') ) }}</td>
              <td>
                Country
              <td>
                Traffic Source
              </td>
              <td>
                <a href="/campaign/{{ $campaign->id }}" target="_blank" class="btn btn-flat btn-block btn-primary"><i
                    class="fas fa-external-link-alt"></i> View</a>
              </td>
              <td>
                <a href="/campaign/{{ $campaign->id }}" class="btn btn-flat btn-block btn-warning"><i
                    class="fas fa-chart-line"></i> Report</a>
              </td>
              <!--
              <td>
                <form action="/members/add-campaign" method="post">
                  {{ csrf_field() }}
                  <input type="hidden" name="campaign_id" value="{{ $campaign->id }}">
                  <button type="submit" class="btn btn-flat btn-block btn-danger"><i class="far fa-trash-alt"></i>
                    Remove</a>
                </form>
              </td>
              -->
            </tr>
            @endforeach
          </tbody>
          <tfoot>
            <tr>
              <th width="10%">Campaign</th>
              <th></th>
              <th>Link</th>
              <th width="10%">Category</th>
              <th width="10%">Target Country</th>
              <th width="10%">Traffic Source</th>
              <th width="8%"></th>
              <th width="8%"></th>
              <!--<th width="8%"></th>-->
            </tr>
          </tfoot>
        </table>
      </div> <!-- /.card-body -->
    </div> <!-- /.card -->
  </div> <!-- /.col -->
</div> <!-- /.row -->
@stop

@section('adminlte_js')
<script>
  function copyLink(e) {
    e.preventDefault();    
    var clipboard = new ClipboardJS('#' + e.currentTarget.id);
    clipboard.on('success', function(e) {          
      console.log(e);
    });
    clipboard.on('error', function(e) {          
      console.log(e);
    });
  }


  $(function () {
    $('#CampaignsTable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false,
      "columnDefs": [{
        "targets": [0,6,7],
        "orderable": false
      }]
    })

    
    var clipboard = new ClipboardJS('#copyLink{{ $campaign->id }}');
                  clipboard.on('success', function(e) {
                      console.log(e);
                  });
                  clipboard.on('error', function(e) {
                      console.log(e);
                  });
    

  })
</script>
@stop
@section('plugins.jQuery-UI', true)
@section('plugins.Datatables', true)
@section('plugins.Clipboard', true)