@extends('backend.layouts.master')
@section('title') Newsletter Subscribers @endsection
@section('main-content')
@include('backend.layouts.notification')

<div class="breadcrumbs">
  <div class="col-sm-4">
      <div class="page-header float-left">
          <div class="page-title">
              <h1>Newsletter Subscribers</h1>
          </div>
      </div>
  </div>
  <div class="col-sm-8">
      <div class="page-header float-right">
          <div class="page-title">
              <ol class="breadcrumb text-right">
                <li><a href="{{ route('admin')}}">Dashboard</a></li>
                @if(auth()->check() && auth()->user()->canCreate())
                <li><a href="{{ route('newsletter.create')}}">Add Subscriber</a></li>
                @endif
                <li class="active">Newsletter Subscribers</li>
              </ol>
          </div>
      </div>
  </div>
</div>

<div class="content mt-3">
  <div class="animated fadeIn">
      <div class="row">

          <!-- Statistics Cards -->
          <div class="col-md-12 mb-4">
              <div class="row">
                  <div class="col-md-2">
                      <div class="card bg-primary text-white">
                          <div class="card-body">
                              <h4>{{ $stats['total'] }}</h4>
                              <p>Total Subscribers</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-2">
                      <div class="card bg-success text-white">
                          <div class="card-body">
                              <h4>{{ $stats['active'] }}</h4>
                              <p>Active</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-2">
                      <div class="card bg-warning text-white">
                          <div class="card-body">
                              <h4>{{ $stats['inactive'] }}</h4>
                              <p>Inactive</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-2">
                      <div class="card bg-info text-white">
                          <div class="card-body">
                              <h4>{{ $stats['today'] }}</h4>
                              <p>Today</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-2">
                      <div class="card bg-secondary text-white">
                          <div class="card-body">
                              <h4>{{ $stats['this_week'] }}</h4>
                              <p>This Week</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-2">
                      <div class="card bg-dark text-white">
                          <div class="card-body">
                              <h4>{{ $stats['this_month'] }}</h4>
                              <p>This Month</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="col-md-12">
              <div class="card">
                  <div class="card-header">
                      <strong class="card-title">Newsletter Subscribers</strong>
                      <div class="float-right">
                          {{-- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sendArticleModal">
                              <i class="fa fa-paper-plane"></i> Send Article
                          </button> --}}
                          <a href="{{ route('newsletter.export') }}" class="btn btn-success btn-sm">
                              <i class="fa fa-download"></i> Export CSV
                          </a>
                      </div>
                  </div>
                  <div class="card-body">
                    @if(count($subscribers)>0)
                      {{-- <form id="bulk-form" method="POST" action="{{ route('newsletter.bulk') }}"> --}}
                          {{-- @csrf
                          <div class="mb-3">
                              <select name="action" class="form-control d-inline-block" style="width: auto;" required>
                                  <option value="">Bulk Actions</option>
                                  <option value="activate">Activate</option>
                                  <option value="deactivate">Deactivate</option>
                                  <option value="delete">Delete</option>
                              </select>
                              <button type="submit" class="btn btn-primary btn-sm" onclick="return confirm('Are you sure?')">
                                  Apply
                              </button>
                          </div> --}}
                          
                          <table id="bootstrap-data-table-export" class="table table-striped table-bordered">
                              <thead>
                                  <tr>
                                    {{-- <th><input type="checkbox" id="select-all"></th> --}}
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Subscribed At</th>
                                    <th>Created By</th>
                                    <th>Actions</th>
                                  </tr>
                              </thead>
                              <tbody>
                                @foreach($subscribers as $subscriber)
                                  <tr>
                                    {{-- <td><input type="checkbox" name="subscriber_ids[]" value="{{ $subscriber->id }}"></td> --}}
                                    <td>{{ $subscriber->email }}</td>
                                    <td>
                                        @if($subscriber->status=='active')
                                            <span class="badge badge-success">{{ $subscriber->status }}</span>
                                        @else
                                            <span class="badge badge-warning">{{ $subscriber->status }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $subscriber->subscribed_at ? $subscriber->subscribed_at->format('M d, Y H:i') : '-' }}</td>
                                    <td>{{ optional($subscriber->creator)->name ?? 'System' }}</td>
                                    <td>
                                        @if(auth()->check() && auth()->user()->canEdit())
                                        <a href="{{route('newsletter.edit',$subscriber->id)}}" class="btn btn-primary btn-sm float-left mr-1" style="height:30px; width:30px;border-radius:50%" data-toggle="tooltip" title="edit" data-placement="bottom"><i class="fa fa-edit"></i></a>
                                        @endif
                                        @if(auth()->check() && auth()->user()->canDelete())
                                        <button class="btn btn-danger btn-sm dltBtn" data-toggle="modal" data-target="#modal-delete{{$subscriber->id}}" data-id={{$subscriber->id}} style="height:30px; width:30px;border-radius:50%" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa fa-trash"></i></button>
                                        <div class="modal fade"  id="modal-delete{{$subscriber->id}}" tabindex="-1" aria-labelledby="modal-new-address" aria-hidden="true">
                                            <div class="modal-dialog  modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h6 class="modal-title" id="staticBackdropLabel">
                                                        </h6>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                          <span aria-hidden="true">×</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{route('newsletter.destroy',$subscriber->id)}}" method="post">
                                                            @csrf
                                                            @method('DELETE')
                                                        <div class="row gy-3">
                                                            <div class="col-xl-6">
                                                                <H2>Are you Sure ?</H2>
                                                                <p>You won't be able to revert this!</p> 
                                                            </div>                                       
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-danger">Yes, Delete It</button>
                                                    </div>
                                                </form>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </td>
                                  </tr>
                                  @endforeach
                              </tbody>
                          </table>
                      {{-- </form> --}}
                      @else
                      <h6 class="text-center">No newsletter subscribers found!!!</h6>
                    @endif
                  </div>
              </div>
          </div>

       </div>
   </div><!-- .animated -->
 </div><!-- .content -->

<!-- Send Article Modal -->
<div class="modal fade" id="sendArticleModal" tabindex="-1" role="dialog" aria-labelledby="sendArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sendArticleModalLabel">Send Article to Newsletter Subscribers</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="sendArticleForm" method="POST" action="{{ route('newsletter.send-article') }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="post_id">Select Article</label>
                        <select name="post_id" id="post_id" class="form-control" required>
                            <option value="">Loading articles...</option>
                        </select>
                        <small class="form-text text-muted">Select an article to send to all active newsletter subscribers.</small>
                    </div>
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle"></i>
                        <strong>Note:</strong> This will send the selected article to all <strong>{{ $stats['active'] }}</strong> active newsletter subscribers.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="sendArticleBtn">
                        <i class="fa fa-paper-plane"></i> Send to All Subscribers
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
{{-- load jquery first --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // Load articles when modal opens
    $('#sendArticleModal').on('show.bs.modal', function () {
        loadArticles();
    });

    function loadArticles() {
        const select = document.getElementById('post_id');
        select.innerHTML = '<option value="">Loading articles...</option>';
        
        fetch('{{ route("newsletter.recent-articles") }}')
            .then(response => response.json())
            .then(articles => {
                select.innerHTML = '<option value="">Select an article...</option>';
                articles.forEach(article => {
                    const option = document.createElement('option');
                    option.value = article.id;
                    option.textContent = article.title + ' (' + new Date(article.created_at).toLocaleDateString() + ')';
                    select.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error loading articles:', error);
                select.innerHTML = '<option value="">Error loading articles</option>';
            });
    }

    // Handle form submission
    document.getElementById('sendArticleForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const postId = document.getElementById('post_id').value;
        if (!postId) {
            alert('Please select an article to send.');
            return;
        }

        if (!confirm('Are you sure you want to send this article to all newsletter subscribers?')) {
            return;
        }

        const submitBtn = document.getElementById('sendArticleBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Sending...';
        submitBtn.disabled = true;

        const formData = new FormData(this);
        
        fetch('{{ route("newsletter.send-article") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.text())
        .then(() => {
            // Reload the page to show success message
            window.location.reload();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while sending the article.');
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
</script>
@endpush