@extends('admin.layout.app')
@section('title', 'Newsletter Subscribers')
@section('content')
    <style>
        .sub-stat-pill {
            background: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 13px;
            color: #666;
        }

        .btn-send-newsletter {
            background: #1471C7;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 9px 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
        }

        .btn-send-newsletter:hover {
            background: #1471C7;
        }

        .sub-table-wrap {
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 12px;
            overflow: hidden;
        }

        .sub-table {
            border-collapse: collapse;
        }

        .sub-table th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #999;
            font-weight: 500;
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }

        .sub-table td {
            padding: 13px 16px;
            border-bottom: 1px solid #f7f7f7;
            vertical-align: middle;
        }

        .sub-table tbody tr:last-child td {
            border-bottom: none;
        }

        .sub-table tbody tr:hover {
            background: #fafafa;
        }

        .sub-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #E6F1FB;
            color: #0C447C;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .sub-remove-btn {
            background: none;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 5px 12px;
            font-size: 12px;
            color: #888;
            cursor: pointer;
            transition: all .15s;
        }

        .sub-remove-btn:hover {
            border-color: #E24B4A;
            color: #A32D2D;
            background: #FCEBEB;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">

                            {{-- Top Bar --}}
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
                                <div class="d-flex align-items-center gap-3">
                                    <h1 class="admin-title mb-0">Newsletter Subscribers</h1>
                                    <span class="sub-stat-pill">
                  <span class="fw-bold">{{ $subscribers->total() }}</span> total
                </span>
                                </div>
                                <button class="btn-send-newsletter" data-bs-toggle="modal"
                                        data-bs-target="#sendNewsletterModal">
                                    <i class="fas fa-paper-plane me-2"></i> Send Newsletter
                                </button>
                            </div>

                            {{-- Table --}}
                            <div class="sub-table-wrap">
                                <table class="sub-table w-100">
                                    <thead>
                                    <tr>
                                        <th>Subscriber</th>
                                        <th>Joined</th>
                                        <th>Time ago</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($subscribers as $sub)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div
                                                        class="sub-avatar">{{ strtoupper(substr($sub->email, 0, 1)) }}</div>
                                                    <span style="font-size:14px;">{{ $sub->email }}</span>
                                                </div>
                                            </td>
                                            <td class="text-muted"
                                                style="font-size:13px;">{{ $sub->created_at->format('M d, Y') }}</td>
                                            <td class="text-muted"
                                                style="font-size:13px;">{{ $sub->created_at->diffForHumans() }}</td>
                                            <td>
                                                <form action="{{ route('admin.newsletter.destroy', $sub->id) }}"
                                                      method="POST"
                                                      onsubmit="return confirm('Remove this subscriber?')">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="sub-remove-btn">Remove</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5 text-muted">
                                                <i class="far fa-envelope-open mb-2"
                                                   style="font-size:36px;display:block;"></i>
                                                No subscribers yet.
                                            </td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{-- Pagination --}}
                            @if($subscribers->hasPages())
                                <div class="tfcl-pagination paging-navigation clearfix mt-4">
                                    @if($subscribers->onFirstPage())
                                        <span class="prev page-numbers disabled"><i
                                                class="far fa-angle-left"></i></span>
                                    @else
                                        <a class="prev page-numbers" href="{{ $subscribers->previousPageUrl() }}"><i
                                                class="far fa-angle-left"></i></a>
                                    @endif

                                    @foreach($subscribers->getUrlRange(1, $subscribers->lastPage()) as $page => $url)
                                        @if($page == $subscribers->currentPage())
                                            <span class="page-numbers current">{{ $page }}</span>
                                        @else
                                            <a class="page-numbers" href="{{ $url }}">{{ $page }}</a>
                                        @endif
                                    @endforeach

                                    @if($subscribers->hasMorePages())
                                        <a class="next page-numbers" href="{{ $subscribers->nextPageUrl() }}"><i
                                                class="far fa-angle-right"></i></a>
                                    @else
                                        <span class="next page-numbers disabled"><i
                                                class="far fa-angle-right"></i></span>
                                    @endif
                                </div>
                            @endif

                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    {{-- Send Newsletter Modal --}}
    <div class="modal fade" id="sendNewsletterModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Send Newsletter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('admin.newsletter.send') }}" method="POST">
                    @csrf
                    <div class="modal-body" style="padding: 30px !important;">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Subject</label>
                            <input type="text" name="subject" class="form-control" placeholder="Email subject..."
                                   required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold">Message</label>
                            <textarea name="message" class="form-control" rows="6"
                                      placeholder="Write your newsletter content..." required></textarea>
                        </div>
                        <p class="text-muted" style="font-size:13px;">
                            <i class="fas fa-info-circle me-1"></i>
                            Will be sent to all <strong>{{ $subscribers->total() }}</strong> subscribers.
                        </p>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-orange fw-bold">
                            <i class="fas fa-paper-plane me-1"></i> Send Now
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection