@extends( (auth()->user()->user_type!=='staff') ? 'admin.layouts.app' : 'employee.layouts.app')
@section('title',get_setting('site_name').' Notice')
@section('content')
    <style>
        .custom-design {
            background: #fff;
            padding: 20px 15px 20px 20px;
            border-radius: 10px;
            border-left: 5px solid #615DAD;
            box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.15);
            width: 430px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px !important;
        }


    </style>
    <div class="card " id="">
        <div class="card-header">
            <h5>Notification</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mx-auto">
                    <ul class="mx-auto mb-2 notice_reload">
                        @foreach($notice as $notify)

                            <li class="list-inline-item dropdown notification-list custom-design mb-2">
                                <a href="javascript:void(0);" class="dropdown-item notify-item"
                                   onclick="Notification_read({{$notify->id}})">
                                    <div class="notify-icon bg-primary"><i class="mdi mdi-alarm-light"></i></div>
                                    <p class="notify-details"><b>{{$notify->type}}</b><small
                                            class="text-muted">{{$notify->content}}</small></p>
                                </a>

                                <div class="text-right">
                                    <a href="javascript:void(0)"
                                       onclick="Notification_read({{$notify->id}})"><i
                                            style="color: #f56161;font-size: 18px"
                                            class="fas fa-window-close"></i></a>
                                </div>
                            </li>

                        @endforeach
                    </ul>
                </div>
            </div>

        </div>
    </div>

@endsection