@extends('layouts.app')
@section('title', 'Notifications | ')
@section('content')

<style type="text/css">
    
    .notify-status-active {
    background-color: transparent;
    border: 1px solid #5bdd69;
    color: #5bdd69;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
}
 .notify-status-expired {
    background-color: transparent;
    border: 1px solid #e80f0f;
    color: #e80f0f;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
}
.notific-footer-edit ul {list-style-type: none; display: flex;padding: 2px 5px;background: #e6e6e6;}
.notific-footer-edit ul li{padding: 10px 5px;}

</style>
    <!-- Page Content -->
    <div class="content container-fluid">                                                
                            
        <div class="row">
        
        <div class="col-md-8 offset-md-2">
        <!-- Page Header -->
        <div class="page-header" style="margin: 20px 0;">
            <div class="row align-items-center">
                <div class="col" style="padding-left: 20px;">
                    <h3 class="page-title">Notifications</h3>                               
                </div>

                <div class="col-auto float-right ml-auto">
                    @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3)
                    <a href="{{ route('notifications/create') }}" class="btn add-btn" ><i class="fa fa-plus"></i> Add New</a>
                    @endif
                </div>
            </div>
        </div>
        <!-- /Page Header -->

        @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 )

            <!-- notice list -->
            @if(count($result) > 0)
            @foreach($result as $item)  
            <div class="col-md-12" style="margin-bottom: 20px;">                
                <span class="job-list" style="margin-bottom: 0px;" >
                                       
                    <div class="job-list-det">
                        <div class="job-list-desc">
                            <h3 class="job-list-title">{{str_limit(ucfirst($item->subject),40)}}</h3>
                            <h4 class="job-department">{!! ucfirst(strip_tags((str_limit($item->text,190)))) !!} </h4> 
                        </div>
                        <div class="job-type-info">
                            @if( strtotime($item->end_date) >  strtotime(date('Y-m-d')) )
                                <span class="notify-status-active">Active</span> 
                                @else
                                <span class="notify-status-expired">Expired</span> 
                            @endif
                        </div>
                    </div>
                    
                    <div class="job-list-footer">
                        <ul>
                            <li><i class="fa fa-user"></i> Publish by: {{$item->first_name.' '.$item->last_name }}  </li>
                            <li><i class="fa fa-calendar"></i> Publish at: {{ date('d, M-Y h:i A', strtotime($item->start_date))}}</li>                           
                        </ul>
                    </div>                    
                </span>
                @if( auth()->user()->role_id == 1 || $item->created_by == auth()->user()->id )
                <div class="notific-footer-edit">
                        <ul>
                            <li><a href="{{URL('/')}}/notification/edit/{{base64_encode($item->id)}}"><i class="fa fa-pencil"></i> Edit </a> </li>
                            <li><a href="javascript:;" class="removeItem" data="{{base64_encode($item->id)}}"><i class="fa fa-remove text-danger"></i> Delete </a></li>
                        </ul>
                </div>
                @endif
                <!--  -->
            </div>
           <!-- ./row -->
           @endforeach
           @else
           <div class="col-md-12">
                <div class="card">
                <div class="card-body">
                    <h3 class="">You have not a notifications</h3> 
                </div>
                </div>
            </div>
           @endif
        @endif
        <!-- employee -->
        @if( auth()->user()->role_id == 4 || auth()->user()->role_id == 5 )

            <!-- notice list -->
            @if(count($result) > 0)
            @foreach($result as $item)  


            <div class="col-md-12" style="margin-bottom: 20px;">                
                <span class="job-list" style="margin-bottom: 0px;" >
                                       
                    <div class="job-list-det">
                        <div class="job-list-desc">
                            <h3 class="job-list-title">{{str_limit(ucfirst($item->subject),40)}}</h3>
                            <h4 class="job-department">{!! ucfirst(strip_tags((str_limit($item->text,190)))) !!} </h4> 
                        </div>
                        <div class="job-type-info">
                            
                                                                        
                        </div>
                    </div>
                    
                    <div class="job-list-footer">
                        <ul>
                            <li><i class="fa fa-user"></i> Publish by: {{$item->first_name.' '.$item->last_name }}  </li>
                            <li><i class="fa fa-calendar"></i> Publish at: {{ date('d, M-Y h:i A', strtotime($item->start_date))}}</li>                           
                        </ul>
                    </div>                    
                </span>
               
                <!--  -->
            </div>
           <!-- ./row -->

           @endforeach
           @else
           <div class="col-md-12">
                <div class="card">
                <div class="card-body">
                    <h3 class="">You have not a notifications</h3> 
                </div>
                </div>
            </div>
           @endif
        <!-- ./emp -->
        @endif
        </div>
    </div>
</div>
    <!-- /Page Content -->
                
<!-- Delete Notice Modal -->
<div class="modal custom-modal fade" id="delete_project" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-header">
                    <h3>Remove Notice</h3>
                    <p>Are you sure want to remove?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <a href="javascript:void(0);" class="btn btn-primary continue-btn">Delete</a>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Delete Project Modal -->
  
<script type="text/javascript">
$(function(){
    
//view leave detail and perform action
$('.removeItem').click(function(){
    
    if(confirm("Are you sure to delete?")){
    var id = $(this).attr('data');

    $.ajax({
        url:"{{route('removeNotice')}}",
        type:'POST', 
        data:{"_token": "{{ csrf_token() }}","id":id},                 
        success: function(data) 
            {
                if(data.fail == false){
                     location.reload(true);
                }
            }
        });
        return false;
    }
});
});
</script>
@endsection