@extends('layouts.admin')

@section('page-header', 'Email History')

@section('styles')

<style>
      div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
    .overflow_content_email {
        width: 100%;
        height: 73px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

   .dataTables_filter{
    display: none !important;
   }
   #example {
  max-width: 500px; /* Set the maximum width of the table */
  overflow-x: auto; /* Enable horizontal scrolling */
}

#example th, #example td {
  white-space: nowrap; /* Prevent the text from wrapping to the next line */
}
</style>
@endsection

@section('content')
    <div class="white-component">

<div style="width: 100%;overflow-x: auto;">
<table id="example" class="table table-striped table-bordered  mx-auto" style="width:100%">
     <thead>

            <th>No</th>
            <th>Subject</th>
            <th>Message</th>
            <th>Tag</th>
            <th>count</th>
            <th>Members </th>
            <th>Date</th>
            <th>Status</th>
        </thead>
        <tbody>
        @forelse ($logs as $log)

            <tr>
                <td > 00{{$log->id}}</td>
                <td > {{$log->subject}}</td>
                <td>
                <div style="        
                width: 100%;
                height: 73px;
                overflow-y: scroll;
                display: flex;
                flex-direction: column;
                align-items: flex-start;" 
                >
                {!! $log->message !!}
                </div>
                </td>
                <td >  
                    <div>
                        @foreach(json_decode($log->getTags()) as $tag)
                                <a href="#" class="badge badge-light">{{ $tag }}</a>
                            @endforeach
                    </div>
                </td>
                <td>{{ $log->getSenders()->count() }}</td>
                <td > 
                    <div style="        
                    width: 100%;
                    height: 73px;
                    overflow-y: scroll;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;">
                        @foreach(json_decode($log->getSenders()) as $email)
                                <a href="#" class="badge badge-light">{{ $email }}</a>
                            @endforeach
                    </div>
                </td>
                <td> 
                    <div style="width:100px">
                        {{ $log->created_at }}
                    </div>
                    
                </td>
                <td >   @if($log->status)
                            Sent
                        @else
                            Pennding
                        @endif
                </td>

            </tr>

        </div>
        @empty
            <tr>
                <td><div class="no-data">No Members</div></td>
            </tr>
        @endforelse
        </tbody>

    </table>
</div>
@endsection
@section('scripts')
<script type="text/javascript">

$('#location').selectize({
     plugins: ['restore_on_backspace'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

$(document).ready(function() {
  $('#example').DataTable({
    columnDefs: [
    {bSortable: false, targets: [0,1,2,3,4,5,6,7,8]}
  ],
  "bPaginate": false
  });
} );
</script>
<script>
@endsection