@extends('index-left-sidebar')

@section('content')
<div id="krik-single-event-emails">
    <div class="panel krik-panel">
        <div class="panel-heading">
            <h3 class="krik-single-event-reports-title">{{ $singleEvent->name }}</h3>
            <h4 class="krik-single-event-reports-info">
              @php
                $event_start = new DateTime($singleEvent->start_ts);
                $event_end = new DateTime($singleEvent->end_ts);
                $event_days_diff = $event_start->diff($event_end)->d;
              @endphp
              @if($singleEvent->type_by_venue == 'physical')
                @if ($event_days_diff > 0)
                  {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($singleEvent->end_ts)) . ', ' . $singleEvent->venue_name }}
                @else
                 {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ', ' . $singleEvent->venue_name }}
                @endif
              @else
                @if ($event_days_diff > 0)
                  {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) . ' - ' . date("d.m.Y. H:i", strtotime($singleEvent->end_ts)) }}
                @else
                  {{ date("d.m.Y. H:i", strtotime($singleEvent->start_ts)) }}
                @endif
              @endif
            </h4>
        </div>
    </div>

    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="pull-left">
                    <h3 class="panel-title">People e-mailed</h3>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped" id="krik-emailed-table" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th style="max-width: 10px !important;">#</th>
                        <th>Lead name</th>
                        <th>E-mail</th>
                        <th>Activity Name</th>
                        <th>Activity Type</th>
                        <th>E-mail Sent</th>
                        <th>E-mail Opened</th>
                        <th>Opt-out</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <script>
                var table = $('#krik-emailed-table').DataTable({
                    processing: true,
                    serverSide: false,
                    ajax: {
                        url: '{!! route('people-emailed.data') !!}',
                        data: {
                            event_code: '{{ $event_code }}'
                        },
                        type: 'POST',
                        headers: {
                          'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    },
                    scrollCollapse: true,
                    searching: true,
                    info: false,
                    bSort: false,
                    autoWidth: true,
                    columns: [
                        {
                          orderable: false,
                          searchable: false,
                          className: 'no-reorder',
                          render: function() { return ''; }
                        },
                        { data: 'name', name: 'name' },
                        { data: 'lead_email', name: 'leads.email' },
                        { data: 'activity_name', name: 'mailing_activities.name' },
                        { data: 'activity_type', name: 'mailing_types.name' },
                        {
                          name: 'mailing_sent',
                          render: function(data, type, full, meta) {
                            if(full.mailing_sent == '1970-01-01 00:00') {
                              return 'Skipped';
                            } else {
                              return full.mailing_sent;
                            }
                          }
                        },
                        {
                          name: 'mailing_opened',
                          render: function(data, type, full, meta) {
                            if(full.mailing_opened == null || full.mailing_opened == '') {
                              return 'Unknown';
                            } else {
                              return full.mailing_opened;
                            }
                          }
                        },
                        { data: 'opt_out', name: 'opt_out' }
                    ],
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search",
                        lengthMenu: "_MENU_",
                        processing: "Loading data, please wait...",
                        zeroRecords: "No data to display",
                        buttons: {
                          colvis: 'Columns'
                        }
                    },
                    paging: true,
                    pagingType: 'simple_numbers',
                    ordering: true,
                    orderClasses: false,
                    stateSave: true,
                    // deferRender: true,
                    colReorder: true,
                    pageLength: 10,
                    lengthMenu: [[ 10, 20, 50, 100, -1 ], [ 10, 20, 50, 100, 'All' ]],
                    order: [[5, 'desc']],
                    select: {
                      style: 'multi'
                    },
                    dom: 'Bfrtilp',
                    bInfo: true,
                    buttons: [
                      {
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                          {
                            extend: 'copyHtml5',
                            text: 'Copy (all entries from current page)',
                            exportOptions: {
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'copyHtml5',
                            text: 'Copy (selected entries from current page)',
                            exportOptions: {
                              modifier: {
                                selected: true
                              },
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'print',
                            text: 'Print (all entries from current page)',
                            exportOptions: {
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'print',
                            text: 'Print (selected entries from current page)',
                            exportOptions: {
                              modifier: {
                                selected: true
                              },
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'excelHtml5',
                            text: 'Excel (all entries from current page)',
                            exportOptions: {
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'excelHtml5',
                            text: 'Excel (selected entries from current page)',
                            exportOptions: {
                              modifier: {
                                selected: true
                              },
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'csvHtml5',
                            text: 'CSV (all entries from current page)',
                            exportOptions: {
                              columns: [1,2,3,4,5,6,7]
                            }
                          },
                          {
                            extend: 'csvHtml5',
                            text: 'CSV (selected entries from current page)',
                            exportOptions: {
                              modifier: {
                                selected: true
                              },
                              columns: [1,2,3,4,5,6,7]
                            }
                          }
                        ]
                      },
                      'colvis'
                    ],
                    createdRow: function () {
                        table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                            cell.innerHTML = i+1;
                        });
                    }
                });
                
                 table.on('order.dt search.dt column-reorder', function () {
                    table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                        cell.innerHTML = i+1;
                    });
                }).draw();
            </script>
        </div>
    </div>
</div>
@endsection