@component('mail::message')
<div id="main">
<div id="list">
@foreach($tasksByUser as $user => $tasks)
<a href="#{{str_replace(' ', '', $user)}}">{{ $user }}</a><br>
@endforeach
</div>
<div id="list-user">
<!-- <strong>Worklog Report</strong> -->
<!-- user -->
@foreach($tasksByUser as $user => $data)

<div class="user" id="{{str_replace(' ', '', $user)}}">
<div style="margin-bottom: 15px; display: flex; align-items: center;">
<img src="{{ $data['user']['avatarUrls']['24x24'] }}" style="margin-right: 5px; width: 30px; height: 30px; border-radius: 50%;"/>
<strong>{{ $user }}</strong>
</div>
<div class="list-task">
<!-- status -->
@foreach($data['allStatus'] as $status => $tasks)
<div class="task {{ strtolower(str_replace(' ', '', $status)) }}">
{{ $status }}<br>

<!-- task -->
@foreach($tasks as $task)
<div class="issue">
<strong>{{ $task['summary'] }}</strong><br>
<div style="display: flex; align-items: center;">
<img src="{{ $task['project']['avatarUrls']['24x24'] }}" style="margin-right: 5px; width: 15px; height: 15px; border-radius: 50%;"/>
<span>Project: {{ $task['project']['name'] }}</span>
</div>
Estimate: {{ (int)$task['estimate']/60/60 }}h<br>
Total time spent: {{ (int)$task['totalTimeSpent'] }}h<br>
<!-- worklogs -->
@foreach($task['worklogs'] as $worklog)

<div class="worklog">
Time spent: {{ $worklog['timeSpent'] }}<br>
Start date: {{ $worklog['started'] }}<br>
{{ isset($worklog['comment']) && isset($worklog['comment']['content'][0]['content'][0])&& isset($worklog['comment']['content'][0]['content'][0]['text']) ? 'Comment: ' . $worklog['comment']['content'][0]['content'][0]['text'] : "" }}
</div>

<br>

@endforeach <!-- worklogs end -->
</div>
@endforeach <!-- task end -->
</div>

@endforeach <!-- status end -->
</div>
<strong>ASSIGNMENT</strong><br>
<div class="assignment">
@foreach($data['assignment']['issues'] as $issue => $task)<!-- assign -->
<div class="issue" style="width: 100%;">
<strong>{{ $task['fields']['summary'] }}</strong><br>
<div style="display: flex; align-items: center;">
<img src="{{ $task['fields']['project']['avatarUrls']['24x24'] }}" style="margin-right: 5px; width: 15px; height: 15px; border-radius: 50%;"/>
<span>Project: {{ $task['fields']['project']['name'] }}</span>
</div>
Estimate: {{ (int)$task['fields']['timeoriginalestimate']/60/60 }}h<br>
Time spent: {{ (int)$task['fields']['timespent']/60/60 }}h<br>
</div>
@endforeach  <!-- assign end -->
</div>
</div>

@endforeach  <!-- user end -->
</div>
</div>

Thanks,<br>
{{ config('app.name') }}
@endcomponent
<style>
    #main{
        position: relative;
        display: flex;
        width: 1700px;
        font-size: 13px;
    }
    #list{
        position: sticky;
        top: 10px;
        left: 10px;
        z-index: 1000;
        width: 10%;
        font-size: 13px;
    }
    
    #list-user{
        z-index: 100;
        width: 90%;
        max-height: 700px;
        overflow: auto;
        font-size: 13px;
    }
    .user{
        border: solid 2px gray;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
        font-size: 13px;
        
    }

    .list-task{
        display: flex;
        width: 100%;
        font-size: 13px;
    }

    .task{
        width: 100%;
        margin-bottom: 5px;
        padding: 10px;
        border-radius: 5px;
        border: solid 1px gray;
        margin-right: 5px;
        font-size: 13px;
    }
    
    .issue{
        margin-bottom: 5px;
        padding: 10px;
        border-radius: 5px;
        border: solid 2px;
        background-color: white;
        font-size: 13px;
    }

    .task.done {
        background-color: #e0ffe0;
    }
    .task.inprogress {
        background-color: #fff8e0;
    }

    .task.backlog {
        background-color: #EEEEEE;
    }

    .task.todo {
        background-color: #c5effd7a;
    }

    .task.closed {
        background-color: #ecdeff;
    }

    .worklog{
        border: solid 1px gray;
        border-radius: 5px;
        padding: 10px;
        font-size: 13px;
    }

    .assignment{
        display: flex;

    }
</style>
