@extends('layouts.app')

@section('content')

{{-- Inline styles to guarantee the page looks correct even if external CSS fails/loads late --}}
<style>
    /* ── Fix 1: page header — row layout, title block + actions aligned,
       wraps gracefully on small screens ── */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }
    .page-header-left {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .page-header-left .page-title {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 700;
        color: var(--maroon-900, #4a0f18);
    }
    .page-header-left .page-subtitle {
        margin: 0;
        font-size: 0.875rem;
        color: var(--ink-600, #6b5a4f);
    }
    .page-header-actions {
        display: flex;
        align-items: center;
    }
    .page-header-actions form {
        margin: 0;
    }

    /* Fallback button styling in case admin.css's .btn-primary doesn't load */
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 18px;
        font-size: 0.85rem;
        font-weight: 600;
        font-family: 'Inter', system-ui, sans-serif;
        border: none;
        border-radius: 999px;
        background-color: var(--maroon-700, #6e1a26);
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s ease;
    }
    .btn-primary:hover {
        background-color: var(--maroon-900, #4a0f18);
    }

    /* ── Fix 2: card-header h2 inherits Cormorant Garamond + large size
       from the global `h1,h2,h3` rule in admin.css ── */
    .card {
        border: 1px solid var(--line, #efe3c8);
        border-radius: 10px;
        overflow: hidden;
    }
    .card-header {
        padding: 14px 20px;
        border-bottom: 1px solid var(--line, #efe3c8);
        background: var(--cream-50, #fffaf0);
    }
    .card-header h2 {
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--maroon-900, #4a0f18) !important;
        margin: 0 !important;
        line-height: 1.4;
    }
    .card-body {
        padding: 0;
    }

    /* ── Fix 3: alerts — fallback styling so success/error messages are
       clearly readable even without admin.css ── */
    .alert {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        margin: 0 0 16px;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        border: 1px solid transparent;
    }
    .alert-success {
        background-color: var(--green-100, #e3f7ea);
        color: var(--green-600, #1f9d55);
        border-color: rgba(31, 157, 85, 0.25);
    }
    .alert-danger {
        background-color: #fef2f2;
        color: #b91c1c;
        border-color: rgba(185, 28, 28, 0.25);
    }

    /* ── Fix 4: table ── */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table {
        width: 100%;
        margin-bottom: 0;
        color: var(--ink-900, #2c1810);
        border-collapse: collapse;
    }
    .table th {
        padding: 12px 16px;
        vertical-align: middle;
        border-bottom: 2px solid var(--line, #efe3c8);
        background: var(--cream-50, #fffaf0);
        color: var(--maroon-900, #4a0f18);
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        white-space: nowrap;
    }
    .table td {
        padding: 14px 16px;
        vertical-align: middle;
        border-top: 1px solid var(--line, #efe3c8);
        font-size: 0.875rem;
        text-align: left;
    }
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.015);
    }
    .table-hover tbody tr:hover {
        background-color: rgba(110, 26, 38, 0.03);
    }

    /* ── Fix 5: action column — center the send button & sent badge,
       fixed width so it doesn't get squeezed ── */
    .table td:last-child,
    .table th:last-child {
        text-align: center;
        width: 1%;
        white-space: nowrap;
    }
    .action-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    /* ── Fix 6: badges & sent state ── */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        border-radius: 999px;
        font-family: 'Inter', system-ui, sans-serif;
    }
    .bg-success {
        background-color: var(--green-100, #e3f7ea) !important;
        color: var(--green-600, #1f9d55) !important;
    }
    .bg-warning {
        background-color: #fef9c3 !important;
        color: #854d0e !important;
    }
    .text-muted {
        font-size: 0.75rem;
        color: var(--ink-400, #a3907f);
    }

    /* ── Fix 7: send button ── */
    .btn-sm-send {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        font-family: 'Inter', system-ui, sans-serif;
        border: none;
        border-radius: 999px;
        background-color: var(--maroon-700, #6e1a26);
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s ease;
    }
    .btn-sm-send:hover {
        background-color: var(--maroon-900, #4a0f18);
    }

    /* ── Fix 8: empty state — h3 also inherits serif, fix font ── */
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
    }
    .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .empty-state h3 {
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--maroon-900, #4a0f18) !important;
        margin: 0 0 8px !important;
    }
    .empty-state p {
        font-size: 0.9rem;
        color: var(--ink-600, #6b5a4f);
        margin-bottom: 8px;
    }
    .empty-state small {
        font-size: 0.775rem;
        color: var(--ink-400, #a3907f);
    }
</style>

<div class="page-header">
    <div class="page-header-left">
        <div>
            <h1 class="page-title">Subscription Notifications</h1>
            <p class="page-subtitle">
                Temples that have completed their one-month free subscription
            </p>
        </div>
    </div>

    <div class="page-header-actions">
        <form method="POST" action="{{ route('admin.notifications.check') }}">
            @csrf
            <button type="submit" class="btn btn-primary">
                Check &amp; Send Notifications
            </button>
        </form>
    </div>
</div>


{{-- Success Message --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
    </div>
@endif


{{-- Error Message --}}
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
    </div>
@endif


<div class="card">
    <div class="card-header">
        <h2>One-Month Subscription Notifications</h2>
    </div>

    <div class="card-body">
        @if($notifications->count() > 0)
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Temple Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Subscription Start Date</th>
                            <th scope="col">Free Month Completed</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($notifications as $notification)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <strong>{{ $notification->temple_name }}</strong>
                                </td>
                                <td>{{ $notification->email ?? 'No email' }}</td>
                                <td>
                                    {{ $notification->created_at
                                        ? $notification->created_at->format('d M Y h:i A')
                                        : '-' }}
                                </td>
                                <td>
                                    @if($notification->created_at)
                                        {{ $notification->created_at->copy()->addMonth()->format('d M Y h:i A') }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    <div class="action-cell">
                                        @if(is_null($notification->one_month_notification_sent_at))
                                            <form method="POST" action="{{ route('admin.notifications.send', $notification->id) }}">
                                                @csrf
                                                <button type="submit" class="btn-sm-send">
                                                    Send Notification
                                                </button>
                                            </form>
                                        @else
                                            <span class="badge bg-success">
                                                Mail Already Sent
                                            </span>
                                            <small class="text-muted">
                                                {{ $notification->one_month_notification_sent_at->format('d M Y h:i A') }}
                                            </small>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="empty-state">
                <div class="empty-icon">🔔</div>
                <h3>No Pending Subscription Notifications</h3>
                <p>
                    There are currently no temples that have completed
                    their one-month free subscription.
                </p>
                <small>
                    System check date: {{ now()->format('d M Y h:i A') }}
                </small>
            </div>
        @endif
    </div>
</div>

@endsection