@extends('application.layouts.admin')

@section('content')
<link rel="stylesheet" href="{{ asset('/assets/css/lib/bootstrap-sweetalert/sweetalert.css') }}">
<style type="text/css">
    #enroll_badge {
        border-color: transparent;
        background-color: rgba(11, 1, 70, 0.2);
        color: rgba(11, 1, 70, 1);
        padding: .5rem .7rem !important;
        border-radius: 30px;
        font-size: 14px !important;
    }
    .mark_as_btn{
        padding: 0px 12px !important;
        height: 24px;
        background-color: #2e58a6 !important;
        border-width: 1px !important;
        border-color: #2e58a6 !important;
        color: #fff !important;
        border-radius: 30px !important;
        padding: 0 12px !important;
    }
    .mark_as_btn:hover {
        background-color: #fff !important;
        border-color: #2e58a6 !important;
        color: #2e58a6 !important;
    }
</style>

<div class="page-content pr-0">
    <div class="container-fluid">
        {{-- <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>All Notifications</h2>
                        <div class="subtitle"></div>
                    </div>
                </div>
            </div>
        </header> --}}
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-8">
                <div class="row mb-3">
                    <div class="col-lg-9">
                        <h5 class="mb-0"><span class="badge badge-primary" id="enroll_badge">All Notifications</span></h5>
                    </div>
                    <div class="col-lg-3 text-right">
                        <button class="btn btn-info btn-sm mark_as_btn" onclick="markAllAsRead();">Mark all as read</button>
                    </div>
                </div>
                <ul class="exp-timeline" id="notification_load">

                </ul>
            </div>
            <div class="col-lg-2"></div>
        </div>
    </div><!--.container-fluid-->
</div>
<input type="hidden" id="base" value="{{url('/')}}">
<script src="{{ asset('/assets/js/lib/bootstrap-sweetalert/sweetalert.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        load_page();
    });

    function load_page(){
        var base = $('#base').val();
        $('#notification_load').load(base+'/admin/notifications/get-notifications-partial');
    }

    function markAllAsRead(){
        var base = $('#base').val();
        swal({
            title: "Are you sure?",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-success",
            confirmButtonText: "Yes, sure!",
            cancelButtonText: "No, cancel!",
        });

        $('button.confirm').one('click',function(f){
          f.preventDefault();
          window.location.replace(base+'/admin/notifications/mark-all-as-read');
        });
    }
</script>
@endsection