@extends('layouts.appUi')

@section('title')
    การแจ้งเตือน
@endsection

@section('customStyle')
    <style>
        /* #appCapsule {
            padding: 30px 0 !important;
        } */
    </style>
@endsection

@section('header')
<div class="appHeader">
    <div class="left">
        <a href="javascript:;" onclick="goBack()" class="headerButton goBack">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </a>
    </div>
    <div class="pageTitle">
        การแจ้งเตือน
    </div>
</div>
@endsection

@section('content')
<div class="section full">
    <ul class="listview image-listview flush">
        @foreach ($notifications as $notification)
        <li class="">
            <a href="javascript:;" class="item">
                <div class="icon-box bg-{{ $notification->type }}">
                    {!! ($notification->type == 'success' ? '<ion-icon name="checkmark"></ion-icon>':'<ion-icon name="close"></ion-icon>') !!}
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>{{ $notification->title }}</strong></div>
                        <div class="text-small mb-05">{{ ($notification->type == 'danger' ? 'หมายเหตุ: ':'') }} {{ $notification->text }}</div>
                        <div class="text-xsmall">{{ THdatetime($notification->created_at) }}</div>
                    </div>
                    {{-- <span class="badge badge-primary badge-empty"></span> --}}
                </div>
            </a>
        </li>
        @endforeach
        {{-- <li class="active">
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-success">
                    <ion-icon name="arrow-forward-outline" role="img" class="md hydrated" aria-label="arrow forward outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>Money has been sent</strong></div>
                        <div class="text-small mb-05">The money you sent to John was successfully sent.</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                    <span class="badge badge-primary">3</span>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-danger">
                    <ion-icon name="key-outline" role="img" class="md hydrated" aria-label="key outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>Password changed</strong></div>
                        <div class="text-small mb-05">Your password has been changed</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-warning">
                    <ion-icon name="chatbubble-outline" role="img" class="md hydrated" aria-label="chatbubble outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>New Messages</strong></div>
                        <div class="text-small mb-05">You have new messages from John</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-primary">
                    <ion-icon name="arrow-down-outline" role="img" class="md hydrated" aria-label="arrow down outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>Payment Received</strong></div>
                        <div class="text-small mb-05">John sent you <b>$ 50</b></div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-success">
                    <ion-icon name="arrow-forward-outline" role="img" class="md hydrated" aria-label="arrow forward outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>Money has been sent</strong></div>
                        <div class="text-small mb-05">The money you sent to John was successfully sent.</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-danger">
                    <ion-icon name="key-outline" role="img" class="md hydrated" aria-label="key outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>Password changed</strong></div>
                        <div class="text-small mb-05">Your password has been changed</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="app-notification-detail.html" class="item">
                <div class="icon-box bg-warning">
                    <ion-icon name="chatbubble-outline" role="img" class="md hydrated" aria-label="chatbubble outline"></ion-icon>
                </div>
                <div class="in">
                    <div>
                        <div class="mb-05"><strong>New Messages</strong></div>
                        <div class="text-small mb-05">You have new messages from John</div>
                        <div class="text-xsmall">5/3/2020 10:30 AM</div>
                    </div>
                </div>
            </a>
        </li> --}}
    </ul>
</div>

@endsection

@section('footer')
    
@endsection

@section('bottomNav')
    
@endsection

@section('script')
    <script>
        function readNotification()
        {
            $.post(`{{ route('appUi.notification.read') }}`, {}, function () {  }, 'json');
        }

        $(function () {
            readNotification();
        });
    </script>
@endsection