@extends('layouts.app')

@section('title', 'Newsletter Subscriptions')

@section('content')

{{-- ── Page Header ── --}}
<div class="page-header-bar">
    <div class="header-title-row">
        <div class="page-title-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        </div>
        <div>
            <h1 class="page-title">Newsletter Subscriptions</h1>
            <p class="page-subtitle">Email sign-ups from the website footer "Stay Updated" form.</p>
        </div>
    </div>
    <div class="header-actions">
        <span class="total-chip">{{ $subscriptions->total() }} total</span>
    </div>
</div>

{{-- ── Search ── --}}
<form action="{{ route('admin.newsletter-subscriptions.index') }}" method="GET" class="products-search-form">
    <div class="products-search-inner">
        <label for="newsletter-search-input" class="visually-hidden">Search newsletter subscriptions</label>
        <div class="search-input-wrap">
            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="search" name="search" id="newsletter-search-input" class="products-search-input" placeholder="Search by email…" value="{{ request('search', $search ?? '') }}" autocomplete="off">
        </div>
        <button type="submit" class="btn-search btn-sm">Search</button>
        @if(request()->filled('search'))
            <a href="{{ route('admin.newsletter-subscriptions.index') }}" class="btn-clear btn-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                Clear
            </a>
        @endif
    </div>
</form>

{{-- ── Table Card ── --}}
<div class="card product-table-card">
    <div class="table-responsive">
        <table class="product-list-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Email</th>
                    <th>Subscribed</th>
                    <th class="th-actions"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($subscriptions as $i => $sub)
                <tr class="product-row" style="--row-index: {{ $i }};">
                    <td><span class="product-id">#{{ $sub->id }}</span></td>
                    <td>
                        <div class="contact-name-cell">
                            <div class="contact-avatar">{{ strtoupper(substr($sub->email, 0, 1)) }}</div>
                            <div>
                                <a href="mailto:{{ $sub->email }}" class="customer-name" style="text-decoration:none;">{{ $sub->email }}</a>
                            </div>
                        </div>
                    </td>
                    <td><span class="date-value">{{ $sub->created_at->format('d/m/Y') }}</span></td>
                    <td class="td-actions">
                        <form action="{{ route('admin.newsletter-subscriptions.destroy', $sub) }}" method="post" class="inline-form" onsubmit="return confirm('Remove this newsletter subscription?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="action-icon action-delete" title="Delete" aria-label="Delete subscription">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                                <span class="action-tooltip">Delete</span>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4">
                        <div class="empty-state">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                            <p>No newsletter subscriptions yet.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ── Pagination ── --}}
@if($subscriptions->hasPages() || $subscriptions->total() > 0)
<div class="pagination-wrap">
    <div class="pagination-inner">
        @if($subscriptions->hasPages())
            {{ $subscriptions->links('vendor.pagination.default') }}
        @endif
        <p class="pagination-info">
            Showing {{ $subscriptions->firstItem() ?? 0 }}–{{ $subscriptions->lastItem() ?? 0 }} of {{ $subscriptions->total() }} results
        </p>
    </div>
</div>
@endif

@endsection

@push('styles')
<style>

/* ─── VISUALLY HIDDEN ─────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.inline-form { display: inline; margin: 0; }

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
    animation: fadeSlideDown 0.4s ease both;
}
.header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.page-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }
.header-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }

.total-chip {
    display: inline-flex; align-items: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: .8125rem; font-weight: 600;
    padding: .35rem .9rem; border-radius: 999px;
}

/* ─── SEARCH ───────────────────────────────────────────── */
.products-search-form { margin-bottom: 1rem; animation: fadeSlideDown 0.4s ease 0.05s both; }
.products-search-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.search-input-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 0.7rem; color: var(--text-muted,#aaa); pointer-events: none; }
.products-search-input { padding: 0.45rem 0.85rem 0.45rem 2.2rem; border: 1.5px solid var(--border,#e0e0e0); border-radius: 8px; font-size: 0.875rem; background: var(--card-bg,#fff); color: var(--text,#111); width: 300px; min-width: 160px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.products-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.btn-sm { padding: 0.42rem 0.9rem; font-size: 0.875rem; border-radius: 8px; cursor: pointer; transition: all 0.18s; }
.btn-search { background: var(--accent); color: #fff; border: none; font-weight: 600; }
.btn-search:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-clear { display: inline-flex; align-items: center; gap: 0.3rem; border: 1.5px solid var(--border,#e0e0e0); background: transparent; color: var(--text-muted,#888); text-decoration: none; font-weight: 500; }
.btn-clear:hover { border-color: #dc3545; color: #dc3545; background: rgba(220,53,69,0.05); }

/* ─── TABLE CARD ──────────────────────────────────────── */
.product-table-card {
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    animation: fadeSlideUp 0.45s ease 0.1s both;
}
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.product-list-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.product-list-table thead tr {
    background: color-mix(in srgb, var(--accent) 5%, #fff);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.product-list-table th {
    padding: .85rem 1rem; text-align: left;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted,#999); white-space: nowrap;
}
.product-list-table .th-actions { text-align: right; }

.product-row {
    border-bottom: 1px solid var(--border,#f0f0f0);
    animation: rowFadeIn 0.38s ease calc(0.15s + var(--row-index) * 0.04s) both;
    transition: background 0.15s;
}
.product-row:last-child { border-bottom: none; }
.product-row:hover { background: color-mix(in srgb, var(--accent) 4%, #fff); }
.product-list-table td { padding: .85rem 1rem; vertical-align: middle; }

/* ─── CELL STYLES ─────────────────────────────────────── */
.product-id { font-family: monospace; font-weight: 700; font-size: .82rem; color: var(--accent); }

.contact-name-cell { display: flex; align-items: center; gap: 0.65rem; }
.contact-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent); font-size: 0.78rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 1.5px solid color-mix(in srgb, var(--accent) 20%, transparent);
    transition: transform 0.2s;
}
.product-row:hover .contact-avatar { transform: scale(1.1); }

.customer-name { display: block; font-weight: 600; font-size: .875rem; color: var(--text,#111); }
.customer-name:hover { color: var(--accent); }

.date-value { font-size: .8125rem; color: var(--text-muted,#888); white-space: nowrap; }

/* ─── ACTION ICONS ────────────────────────────────────── */
.td-actions { text-align: right; }
.action-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1.5px solid transparent; background: transparent;
    color: var(--text-muted,#aaa); transition: all 0.18s;
    text-decoration: none; cursor: pointer; flex-shrink: 0;
}
.action-icon:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.action-delete:hover { color: var(--red,#dc3545); background: color-mix(in srgb, var(--red,#dc3545) 10%, transparent); border-color: color-mix(in srgb, var(--red,#dc3545) 30%, transparent); }

.action-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(30,30,30,0.9); color: #fff;
    font-size: .68rem; font-weight: 700; padding: .18rem .45rem;
    border-radius: 5px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.15s, transform 0.15s;
    letter-spacing: .03em;
}
.action-icon:hover .action-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 2.5rem 1rem; color: var(--text-muted,#bbb); text-align: center; }
.empty-state svg { opacity: .35; }
.empty-state p { margin: 0; font-size: .9rem; }

/* ─── PAGINATION ──────────────────────────────────────── */
.pagination-wrap { margin-top: 1.25rem; animation: fadeSlideUp 0.4s ease 0.18s both; }
.pagination-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem; padding: 0 .25rem;
}
.pagination-info { font-size: .8125rem; color: var(--text-muted,#888); margin: 0; }

.pagination-wrap nav ul.pagination { display: flex !important; flex-wrap: wrap; gap: .35rem; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pagination-wrap nav ul.pagination li { display: inline-flex !important; }
.pagination-wrap nav ul.pagination li a,
.pagination-wrap nav ul.pagination li span {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem;
    border: 1.5px solid var(--border,#e0e0e0); border-radius: 8px;
    color: var(--text,#111); text-decoration: none;
    font-size: .875rem; font-weight: 500;
    transition: background .13s, border-color .13s, color .13s;
}
.pagination-wrap nav ul.pagination li a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pagination-wrap nav ul.pagination li.active span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pagination-wrap nav ul.pagination li.disabled span { opacity: .4; cursor: not-allowed; background: #fafbfc; }

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp   { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes rowFadeIn     { from { opacity: 0; transform: translateX(-8px);  } to { opacity: 1; transform: translateX(0); } }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
    .page-header-bar { flex-direction: column; align-items: stretch; }
    .header-actions { justify-content: flex-start; }
    .product-list-table th, .product-list-table td { padding: .75rem .7rem; }
    .pagination-inner { flex-direction: column-reverse; align-items: flex-start; }
}
@media (max-width: 500px) {
    .page-title { font-size: 1.25rem; }
}
</style>
@endpush