@extends('layouts.app')
@section('content')
<style>
.inactive-users
{
  color:green;
  
}
.active-users
{
  color:red!important;
}
</style>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Custom Notifications</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
            <li class="breadcrumb-item active">Custom Notifications</li>
        </ol>
    </div>

</div>

<div class="row">
    <div class="btn-block pull-right" style="margin-right:30px;margin-bottom:10px;">
        <a href="{{route('custom-notifications.create')}}" class="btn btn-success waves-effect waves-light pull-right">Add Notification</a>
    </div>
</div>

<div class="container-fluid">

<div class="row justify-content-center">

<div class="col-md-12">
<div class="card">
<div class="card-body">

<table class="table table-bordered table-striped" id="Customerlist" width="100%">
   <thead>
      <tr>
        <th width="5%">S.No.</th>
         <th>Notification Title</th>
         <th width="15%">Image</th>
         <th width="12%">Notification Status</th>
         {{--<th>Description</th>--}}
         <th width="12%">Created Date</th>
         <th width="12%">Status</th>
         <th width="10%">Action</th>
      </tr>
   </thead>
   <tbody>
    @php $sno=1; @endphp
    @forelse($data as $key=>$notification)
        <tr>
        <td>{{$sno++}}</td>
        <td>{{$notification->title}}</td>
        <td>@if($notification->image!="")<a href="{{asset('/uploads/notifications/'.$notification->image)}}" target="_blank"><img src="{{asset('/uploads/notifications/'.$notification->image)}}" width="100"></a>@else - @endif</td>
        <td>@if($notification->notification_status==1) Sent @else Pending @endif</td>
        {{--<td>{!!$notification->description!!}</td>--}}
        <td>{{date("d-m-Y",strtotime($notification->created_at))}}</td>
        <td>{{$status_text}}</td>
        <td>
            @if($notification->notification_status!=1)
            <a href="{{ route('custom-notifications.edit',$notification->id) }}"><i class="fa fa-edit"></i></a>
            @endif
            <a href="javascript:void(0);" class="view-notification" data-id="{{$notification->id}}"><i class="fa fa-eye"></i></a>
            <a href="javascript:void(0);" data-id="{{$notification->id}}" class="delete-notifications" title="Are you sure do you want to delete?"><i class="fa fa-trash"></i></a>
        </td>
    </tr>
    @empty
        <tr><td colspan="7" style="text-align:center;">No custom notifications found</td></tr>
    @endforelse

</tbody>
</table>
</div>

<div class="modal" id="ajax-notifications-modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title" id="NotificationsModal">Custom Notification</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                    <div class="col-lg-4">
                        <p class="font-medium">Notification Title : 
                        <p>
                    </div>
                    <div class="col-lg-8">
                        <p id="title"></p>
                    </div>
                    <div class="col-lg-4">
                        <p class="font-medium">Image : 
                        <p>
                    </div>
                    <div class="col-lg-8">
                        <p id="image"></p>
                    </div>
                    <div class="col-lg-4">
                        <p class="font-medium">Description : 
                        <p>
                    </div>
                    <div class="col-lg-8">
                        <p id="description"></p>
                    </div>
                    <div class="col-lg-4">
                        <p class="font-medium">Notification Status : 
                        <p>
                    </div>
                    <div class="col-lg-8">
                        <p id="notification_status"></p>
                    </div>
                    <div class="col-lg-4">
                        <p class="font-medium">Created Date & Time : </p>
                    </div>
                    <div class="col-lg-8">
                        <p id="created_at"></p>
                    </div>
                    <div class="col-lg-4">
                        <p class="font-medium">Status : </p>
                    </div>
                    <div class="col-lg-8">
                        <p id="status"></p>
                    </div>
                    <div class="col-lg-6">
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
</div>
</div>
</div>

</div>
</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
{
    $('#Customerlist').DataTable();

    $('body').on('click', '.view-notification', function ()
    {
      var id = $(this).data('id');
      $.get("{{ url('custom-notifications/')}}/"+id, function (result)
      {
          $('#NotificationsModal').html("Custom Notification");
          $('#ajax-notifications-modal').modal('show');
          $('#title').html(result.data.title);
          $('#image').html(result.data.image);
          $('#description').html(result.data.description);
          if(result.data.notification_status==1){result.data.notification_status ="Sent"}else{result.data.notification_status ="Pending"}
          $('#notification_status').html(result.data.notification_status);
          $('#created_at').html(result.data.created_at);
          if(result.data.status==1){result.data.status ="Active"}else{resultdata.status ="InActive"}
          $('#status').html(result.data.status);
      })
   });

    $('body').on('click', '.delete-notifications', function ()
    {
        var id = $(this).data("id");
        if(confirm("Are You Sure do you want delete?"))
        {
          $.ajax({
              type: "POST",
              data: {
                id: id,
                '_token': '{{ csrf_token() }}'
              },
              url: "{{ url('/delete-custom-notification') }}",
              success: function (data)
              {
                if(data.success==1)
               {
                    toastr.success(data.msg);
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
               }
               if(data.success==0)
               {
                    toastr.error(data.msg);
               }
              },
              error: function (data)
              {
                    if(data.success==0)
                    {
                    toastr.error(data.msg);
                    }
              }
          });
        }
    });
});
</script>
@endsection