@extends('layouts.admin')
@section('title', 'Notification Settings — JAM Admin')
@section('page-title', 'Notification Settings')

@section('content')

@if (session('success'))
    <div class="bg-green-900/30 border border-green-700/50 rounded-lg p-4 mb-6">
        <p class="text-green-400 text-sm">{{ session('success') }}</p>
    </div>
@endif

<form method="POST" action="{{ route('admin.settings.notifications.update') }}">
    @csrf
    @method('PUT')

    {{-- Email Toggles --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-1 font-medium">Email Notifications</h3>
        <p class="text-white/30 text-xs mb-6">Enable or disable specific email notifications sent to members.</p>

        <div class="space-y-5">
            @foreach ($toggles as $toggle)
                <div class="flex items-center justify-between py-3 border-b border-[#1e1e1e] last:border-b-0">
                    <div>
                        <p class="text-white text-sm font-medium">{{ $toggle['label'] }}</p>
                        <p class="text-white/30 text-xs mt-0.5">{{ $toggle['description'] }}</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="hidden" name="{{ $toggle['key'] }}" value="0">
                        <input type="checkbox" name="{{ $toggle['key'] }}" value="1"
                               {{ $toggle['enabled'] ? 'checked' : '' }}
                               class="sr-only peer">
                        <div class="w-11 h-6 bg-[#2a2a2a] peer-focus:ring-2 peer-focus:ring-[#D4B84A]/30 rounded-full peer
                                    peer-checked:after:translate-x-full peer-checked:after:border-white
                                    after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                                    after:bg-white/50 after:rounded-full after:h-5 after:w-5 after:transition-all
                                    peer-checked:bg-[#D4B84A] peer-checked:after:bg-black"></div>
                    </label>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Expiry Reminder Config --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8 mb-6">
        <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-1 font-medium">Expiry Reminder Timing</h3>
        <p class="text-white/30 text-xs mb-6">How many days before a member's points anniversary should we send a reminder?</p>

        <div class="max-w-xs">
            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Days Before Expiry</label>
            <input type="number" name="points_expiry_reminder_days" value="{{ $reminderDays }}"
                   min="1" max="90"
                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white py-3 text-sm transition-colors duration-200">
        </div>
    </div>

    {{-- Submit --}}
    <div class="flex justify-end mb-10">
        <button type="submit"
                class="px-8 py-3 bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-xs tracking-widest uppercase rounded-full transition-colors duration-200">
            Save Settings
        </button>
    </div>
</form>

{{-- Recent Notification Log --}}
<div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8">
    <h3 class="text-xs tracking-widest uppercase text-[#D4B84A] mb-1 font-medium">Recent Notification Log</h3>
    <p class="text-white/30 text-xs mb-6">Last 25 emails sent by the system.</p>

    @if ($recentLogs->isEmpty())
        <p class="text-white/20 text-sm text-center py-8">No notifications sent yet.</p>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-[#1e1e1e]">
                        <th class="text-left text-xs tracking-widest uppercase text-white/30 pb-3 font-medium">Member</th>
                        <th class="text-left text-xs tracking-widest uppercase text-white/30 pb-3 font-medium">Type</th>
                        <th class="text-left text-xs tracking-widest uppercase text-white/30 pb-3 font-medium">Subject</th>
                        <th class="text-left text-xs tracking-widest uppercase text-white/30 pb-3 font-medium">Status</th>
                        <th class="text-left text-xs tracking-widest uppercase text-white/30 pb-3 font-medium">Sent</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($recentLogs as $log)
                        <tr class="border-b border-[#1e1e1e]/50 hover:bg-white/[0.02]">
                            <td class="py-3 text-white/70">
                                @if ($log->user)
                                    <a href="{{ route('admin.members.show', $log->user) }}" class="text-[#D4B84A] hover:underline">
                                        {{ $log->user->first_name }}
                                    </a>
                                @else
                                    <span class="text-white/20">—</span>
                                @endif
                            </td>
                            <td class="py-3">
                                <span class="inline-block px-2 py-0.5 rounded text-[10px] uppercase tracking-wider font-medium
                                    {{ match($log->type) {
                                        'welcome' => 'bg-emerald-500/15 text-emerald-400',
                                        'points_credited' => 'bg-blue-500/15 text-blue-400',
                                        'points_debited' => 'bg-orange-500/15 text-orange-400',
                                        'tier_upgraded' => 'bg-purple-500/15 text-purple-400',
                                        'tier_downgraded' => 'bg-red-500/15 text-red-400',
                                        'expiry_reminder' => 'bg-yellow-500/15 text-yellow-400',
                                        'points_expired' => 'bg-red-500/15 text-red-400',
                                        default => 'bg-white/10 text-white/40',
                                    } }}">
                                    {{ str_replace('_', ' ', $log->type) }}
                                </span>
                            </td>
                            <td class="py-3 text-white/50 max-w-xs truncate">{{ $log->subject }}</td>
                            <td class="py-3">
                                <span class="text-{{ $log->status === 'sent' ? 'green' : 'red' }}-400 text-xs">
                                    {{ ucfirst($log->status) }}
                                </span>
                            </td>
                            <td class="py-3 text-white/30 text-xs">{{ $log->sent_at?->diffForHumans() }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endsection