@extends('layouts.admin')
@section('title', 'Edit Notification Preferences - ' . $member->full_name)
@section('page-title', 'Edit Notification Preferences')
@section('page-subtitle', $member->full_name)

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <div class="card-royal p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Member Information</h3>
                <p class="text-sm text-[var(--text-secondary)] mt-1">{{ $member->member_id }} | {{ $member->phone ?? 'No phone' }} | {{ $member->email ?? 'No email' }}</p>
            </div>
            <a href="{{ route('admin.notifications.member-preferences') }}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
        </div>

        <form action="{{ route('admin.notifications.member-preferences.update', $member) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <p class="text-sm text-blue-800">
                        <i class="fas fa-info-circle mr-2"></i>
                        Configure which notification channels this member will receive for each type of notification. 
                        Leave all unchecked to use system defaults.
                    </p>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-[var(--border-color)]">
                                <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-primary)]">Notification Type</th>
                                <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-primary)] w-24">SMS</th>
                                <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-primary)] w-24">WhatsApp</th>
                                <th class="text-center py-3 px-4 text-sm font-medium text-[var(--text-primary)] w-24">Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($types as $type)
                            @php
                                $pref = $preferences[$type] ?? null;
                            @endphp
                            <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]/30">
                                <td class="py-3 px-4">
                                    <div class="font-medium text-[var(--text-primary)]">{{ $labels[$type] ?? $type }}</div>
                                    <div class="text-xs text-[var(--text-secondary)] font-mono">{{ $type }}</div>
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <input type="checkbox" 
                                           name="preferences[{{ $type }}][sms]" 
                                           value="1"
                                           {{ ($pref->sms_enabled ?? false) ? 'checked' : '' }}
                                           class="w-5 h-5 rounded border-[var(--border-color)] text-gold-500 focus:ring-gold-500">
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <input type="checkbox" 
                                           name="preferences[{{ $type }}][whatsapp]" 
                                           value="1"
                                           {{ ($pref->whatsapp_enabled ?? false) ? 'checked' : '' }}
                                           class="w-5 h-5 rounded border-[var(--border-color)] text-green-500 focus:ring-green-500">
                                </td>
                                <td class="py-3 px-4 text-center">
                                    <input type="checkbox" 
                                           name="preferences[{{ $type }}][email]" 
                                           value="1"
                                           {{ ($pref->email_enabled ?? false) ? 'checked' : '' }}
                                           class="w-5 h-5 rounded border-[var(--border-color)] text-blue-500 focus:ring-blue-500">
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-4">
                <a href="{{ route('admin.notifications.member-preferences') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </a>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-save mr-2"></i> Save Preferences
                </button>
            </div>
        </form>
    </div>
</div>
@endsection