@extends('admin.layouts.admin')

@section('page-title','Newsletter Subscribers')

@section('content')

{{-- ================= ACTION BAR ================= --}}
<div class="d-flex justify-content-between align-items-center mb-3">

    <div class="d-flex gap-2">
        <a href="{{ route('admin.newsletters.export') }}"
           class="btn btn-sm btn-outline-primary">
            📤 Export CSV
        </a>

        <button id="sendSelectedBtn"
                class="btn btn-sm btn-outline-success"
                disabled
                data-bs-toggle="modal"
                data-bs-target="#sendEmailModal">
            📧 Send Email to Selected
        </button>

        <a href="#"
           class="btn btn-sm btn-outline-warning">
            🧠 AI Segmentation
        </a>
    </div>

    <span class="text-muted small">
        Total Subscribers: <strong>{{ $subscribers->total() }}</strong>
    </span>
</div>

{{-- ================= GROWTH ANALYTICS ================= --}}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <h6 class="text-muted">Today</h6>
                <h4 class="fw-bold">{{ $stats['today'] }}</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <h6 class="text-muted">This Week</h6>
                <h4 class="fw-bold">{{ $stats['week'] }}</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <h6 class="text-muted">This Month</h6>
                <h4 class="fw-bold">{{ $stats['month'] }}</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <h6 class="text-muted">Unsubscribed</h6>
                <h4 class="fw-bold text-danger">{{ $stats['unsubscribed'] }}</h4>
            </div>
        </div>
    </div>
</div>

{{-- ================= SUBSCRIBERS TABLE ================= --}}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">

        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th width="40">
                        <input type="checkbox" id="selectAll">
                    </th>
                    <th>Email</th>
                    <th>Source</th>
                    <th>IP</th>
                    <th>Subscribed</th>
                    <th>Status</th>
                    <th class="text-end">Action</th>
                </tr>
            </thead>

            <tbody>
            @forelse($subscribers as $sub)
                <tr>
                    <td>
                        @if($sub->is_active)
                            <input type="checkbox"
                                   class="subscriber-checkbox"
                                   value="{{ $sub->email }}">
                        @endif
                    </td>

                    <td>{{ $sub->email }}</td>
                    <td>{{ $sub->source ?? 'website' }}</td>
                    <td>{{ $sub->ip_address }}</td>
                    <td>{{ $sub->created_at->format('d M Y') }}</td>

                    <td>
                        @if($sub->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Unsubscribed</span>
                        @endif
                    </td>

                    <td class="text-end">
                        @if($sub->is_active)
                        <form method="POST"
                              action="{{ route('admin.newsletters.unsubscribe',$sub->id) }}"
                              class="d-inline">
                            @csrf
                            @method('PATCH')
                            <button class="btn btn-sm btn-outline-danger">
                                🔕 Unsubscribe
                            </button>
                        </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center text-muted py-4">
                        No subscribers found
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>

    </div>
</div>

<div class="mt-3">
    {{ $subscribers->links() }}
</div>

{{-- ================= SEND EMAIL MODAL ================= --}}
<div class="modal fade" id="sendEmailModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <form method="POST" action="{{ route('admin.newsletters.send') }}">
                @csrf

                <div class="modal-header">
                    <h5 class="modal-title">📧 Send Email to Selected Subscribers</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="emails" id="selectedEmails">

                    <div class="mb-3">
                        <label class="form-label">Email Subject</label>
                        <input type="text" name="subject"
                               class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea name="message"
                                  rows="6"
                                  class="form-control"
                                  required></textarea>
                    </div>

                    <div class="alert alert-info small">
                        Emails will be sent only to selected active subscribers.
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit"
                            class="btn btn-success">
                        📤 Send Emails
                    </button>
                </div>

            </form>

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

@endsection

{{-- ================= SCRIPTS ================= --}}
@push('scripts')
<script>
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.subscriber-checkbox');
const sendBtn = document.getElementById('sendSelectedBtn');
const selectedEmailsInput = document.getElementById('selectedEmails');

function updateSelection() {
    const selected = [...checkboxes]
        .filter(cb => cb.checked)
        .map(cb => cb.value);

    sendBtn.disabled = selected.length === 0;
    selectedEmailsInput.value = selected.join(',');
}

if (selectAll) {
    selectAll.addEventListener('change', function () {
        checkboxes.forEach(cb => cb.checked = this.checked);
        updateSelection();
    });
}

checkboxes.forEach(cb => {
    cb.addEventListener('change', updateSelection);
});
</script>
@endpush