<style>
    table {
        font-size: 10px;
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
    }

    th,
    td {
        border: 1px solid black;
    }

    th,
    td {
        padding: 4px;
        text-align: left;
        /* border: 1px solid #ddd; */
    }

    th {
        text-align: left;
    }

    .page-break {
        page-break-after: always;
    }

    .header {
        font-size: 22px;
        text-align: center;
        margin-bottom: 20px;
    }

    .logo {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
</style>

<div class="header">
    {{-- <img src="{{ asset('assets/images/logo.png') }}" alt="logo" class="logo"> --}}
    <h2>{{ $general->site_name }}</h2>
</div>

<h3>{{ $pageTitle }}</h3>

<table>

    <tr>
        <th>{{ trans('User Id') }}</th>
        <th>{{ trans('Name') }}</th>
        <th>{{ trans('Email') }}</th>
        <th>{{ trans('Mobile') }}</th>
        <th>{{ trans('Position') }}</th>
        <th>{{ trans('Rank') }}</th>
        <th>{{ trans('Size Of network') }}</th>
        <th>{{ trans('Active Network Size') }}</th>
        <th>{{ trans('Network Activated') }}</th>
        <th>{{ trans('Level') }}</th>
    </tr>

    @foreach ($network as $key => $item)
        <tr>
            <td> {{ $item->system_id }} </td>
            <td> {{ $item->username }} </td>
            <td>{{ $item->email }}</td>
            <td>{{ $item->mobile }}</td>
            <td>{{ $item->position }}</td>
            <td>{{ $item->rank }}</td>
            <td>{{ $item->network_size }}</td>
            <td>{{ $item->active_network_size }}</td>
            <td>{{ $item->network_activated_at ? $item->network_activated_at->format('d-M-Y') : 'N/A' }}
            </td>
            <td>{{ $item->distance }}</td>
        </tr>
    @endforeach

</table>
