@extends('layouts.app')
@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/tags/bootstrap-tagsinput.css')}}">
@endsection

<div class="card box-shadow-1">
  <div class="card-header">
    <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
  </div>

  <div class="card-body collapse in">
    <div class="card-block card-dashboard">
      @include('validation.success')

      <table class="table table-hover table-bordered dom-jQuery-events">
        <thead>
          <tr>
            <th>Id</th>
            <th>Email</th>
            <th>Status</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          @if(isset($newsletter) && !empty($newsletter))
          @foreach($newsletter as $row)
          <tr>
            <td>{{ $row->id }}</td>
            <td>{{ $row->email }}</td>
            <td>
              @if($row->subscribe == 1)
              <button class="btn btn-success changestatus status{{$row->id}}" data-id="{{$row->id}}"
                data-status="{{$row->subscribe}}">Subscribe</button>
              @else
              <button class="btn btn-danger changestatus status{{$row->id}}" data-id="{{$row->id}}"
                data-status="{{$row->subscribe}}">UnSubscribe</button>
              @endif
            </td>
            <td>
              {{date('d-M-Y', strtotime($row->created_at))}}
              <br>
              {{date('h:i A', strtotime($row->created_at))}}
            </td>
          </tr>
          @endforeach
          @endif
        </tbody>
      </table>
    </div>
  </div>
</div>

@section('js')
<script src="{{asset('assets/admin/vendors/js/tables/jquery.dataTables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/tables/datatables/datatable-advanced.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/forms/tags/bootstrap-tagsinput.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
  $(".changestatus").on('click', function (event) {

    event.preventDefault();
    var id = $(this).data("id");
    var status = $(this).data("status");
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
      type: 'POST',
      url: '{{route("statusNewsletter")}}',
      data: {
        status: status,
        id: id,
        _token: CSRF_TOKEN
      },
      beforeSend: function () {
        $('.status' + id).attr('disabled', true);
        $('.status' + id).html('<i class="fa fa-spinner fa-pulse"></i>');
      },
      success: function (response) {
        if (response == 0) {
          $(".status" + id).removeClass("btn-success");
          $(".status" + id).addClass("btn-danger");
          $(".status" + id).data("status", 0);
          $(".status" + id).html("UnSubscribe");
          $(".status" + id).attr('disabled', false);
        } else {
          $(".status" + id).removeClass("btn-danger");
          $(".status" + id).addClass("btn-success");
          $(".status" + id).data("status", 1);
          $(".status" + id).html("Subscribe");
          $(".status" + id).attr('disabled', false);
        }
      }
    });
  });
</script>

@endsection
@endsection