<script>
    $(document).ready(function () {
        $('#example').dataTable({
            dom: 'lBfrtip',
            buttons: [
                { extend: 'excel', className: 'download-buttons' },
                { extend: 'pdf', className: 'download-buttons' },
            ]
        });

    });
    var o = document.getElementsByClassName("or");
    for (var i = 0; i < o.length; i++) {
        o[i].innerHTML = (i+1)+".";
    }
</script>
<style>
    #example th, td {
        text-align: left;
        padding: 5px;
    }
    #example tr:hover {background-color: #d4d8f8;}
</style>
<div class="error" style="text-align: center;">On this Window, You can view a List of All Available Emails for: {!! $group->name !!}</div>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>

<table id="example" class="display" style="width:100%; border-collapse: collapse">
    <thead>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Email Address</th>
        <th>Email Type</th>
        <th>Created By</th>
        <th>Date Created</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
    @foreach($group->groupEmails  as $row)
        <tr class="cart-row">
            <td class="or"></td>
            <td><b class="error">{!! $row->email !!}</b></td>
            <td><b>{!! $row->email_type !!}</b></td>
            <td>
                @if($row->user)
                    {!! $row->user->firstName." ".$row->user->lastName !!}
                @endif
            </td>
            <td>{!! date('d/m/Y H:i:s a', strtotime($row->created_at)) !!}</td>
            <td><i onclick="deleteEmailAddress('{{$row->id}}')" class="fa fa-trash error" style="cursor: pointer"></i></td>
        </tr>
    @endforeach
    </tbody>
    <tfoot>
    <tr style="background-color: #a1b5d3">
        <th>No</th>
        <th>Email Address</th>
        <th>Email Type</th>
        <th>Created By</th>
        <th>Date Created</th>
        <th>Delete</th>
    </tr>
    </tfoot>
</table>
