@include('components/header')
@include('components/sidebar')
<style>
    .activity-box {
        position: relative;
    }

    .activity-box .activity-list {
        list-style: none;
        position: relative;
        padding-left: 0px;
    }

    .activity-box .activity-list::before {
        content: "";
        width: 2px;
        background: #dddddd;
        position: absolute;
        top: 8px;
        bottom: 0;
        left: 23px;
    }

    .activity-box .activity-list li {
        background-color: #ffffff;
        position: relative;
        border: 1px solid #ededed;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
        margin: 0 0 10px;
        padding: 10px;
    }

    .activity-box .activity-list li::before {
        background: #dddddd;
        bottom: 0;
        content: "";
        width: 2px;
        position: absolute;
        top: 12px;
        left: 22px;
    }

    .activity-box .activity-list li .activity-user {
        height: 32px;
        width: 32px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 12px;
        left: 8px;
    }

    .activity-box .activity-list li .activity-content {
        position: relative;
        margin: 0 0 0 40px;
        padding: 0;
    }

    .activity-box .activity-list li .activity-content .timeline-content {
        color: #9e9e9e;
    }

    .activity-box .activity-list li .time {
        color: #bdbdbd;
        display: block;
        font-size: 13px;
    }
    .circle-div{
        width: 20px;
    height: 20px;
    border-radius: 50%;
    background: grey;
    margin-left: 6px;
    }
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Notification</h2>
    </div>
    <div class="layout-px-spacing layout-top-spacing">
        <div class="row">
            <div class="col-md-12">
                <div class="activity">
                    <div class="activity-box">
                        <ul class="activity-list">
                            @foreach($user->notifications as $key => $n)
                                @if(isset($n->data['name']['title']))
                                    @if($n->data['name']['title'] == 'Leave Apply')
                                        <li>
                                            <div class="activity-user">
                                                <a href="#" title="" data-bs-toggle="tooltip" class="avatar" data-bs-original-title="Lesley Grauer">
                                                    <div class="circle-div"></div>
                                                </a>
                                            </div>
                                            <div class="activity-content">
                                                <a href="">
                                                    <div class="timeline-content">
                                                        <span>{{$n->data['name']['title']}}</span>
                                                        <p>{{$n->data['name']['msg']}}</p>
                                                        <!-- <span class="time">4 mins ago</span> -->
                                                    </div>
                                                </a>
                                            </div>
                                        </li>
                                    @elseif($n->data['name']['title'] == 'Jobsheet Apply')
                                        <li>
                                            <div class="activity-user">
                                                <a href="#" title="" data-bs-toggle="tooltip" class="avatar" data-bs-original-title="Lesley Grauer">
                                                    <div class="circle-div"></div>
                                                </a>
                                            </div>
                                            <div class="activity-content">
                                                <a href="">
                                                    <div class="timeline-content">
                                                        <span>{{$n->data['name']['title']}}</span>
                                                        <p>{{$n->data['name']['msg']}}</p>
                                                        <!-- <span class="time">4 mins ago</span> -->
                                                    </div>
                                                </a>
                                            </div>
                                        </li>
                                    @elseif($n->data['name']['title'] == 'WFH Apply')
                                        <li>
                                            <div class="activity-user">
                                                <a href="#" title="" data-bs-toggle="tooltip" class="avatar" data-bs-original-title="Lesley Grauer">
                                                    <div class="circle-div"></div>
                                                </a>
                                            </div>
                                            <div class="activity-content">
                                                <a href="">
                                                    <div class="timeline-content">
                                                        <span>{{$n->data['name']['title']}}</span>
                                                        <p>{{$n->data['name']['msg']}}</p>
                                                        <!-- <span class="time">4 mins ago</span> -->
                                                    </div>
                                                </a>
                                            </div>
                                        </li>
                                    @endif
                                @else
                                    <li>
                                        <div class="activity-user">
                                            <a href="profile.html" title="" data-bs-toggle="tooltip" class="avatar"
                                                data-bs-original-title="Lesley Grauer">
                                                <div class="circle-div"></div>
                                            </a>
                                        </div>
                                        <div class="activity-content">
                                            @if(isset($n->data['name']['wishes']))
                                                <span>{{$n->data['name']['name']}}</span>
                                                <p>{{$n->data['name']['wishes']}}</p>
                                                <!-- <span class="time">Now</span> -->
                                            @endif
                                        </div>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





@include('components/footer')