@extends('admin.layouts.app')

@section('title', 'Notification Settings')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-white">Notification Settings</h1>
    </div>

    @if(session('success'))
        <div class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-xl mb-6">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.settings.notification.update') }}" method="POST"
        x-data="{ mail_mailer: '{{ old('mail_mailer', $settings->mail_mailer ?? 'smtp') }}' }">
        @csrf

        <div class="space-y-8">
            <!-- FCM Configuration -->
            <div class="glass-card rounded-2xl p-8">
                <div class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
                    <h3 class="text-lg font-bold text-white">FCM Configuration (Firebase)</h3>
                    <div class="flex items-center gap-3">
                        <span class="text-sm text-slate-400">Enable Push Notifications</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="fcm_enabled" value="1" {{ $settings->fcm_enabled ? 'checked' : '' }} class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-slate-700 peer-focus:outline-none 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 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                            </div>
                        </label>
                    </div>
                </div>

                <div class="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-8 flex items-start gap-3">
                    <i data-lucide="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>
                    <p class="text-sm text-blue-200">
                        To use the modern <strong>Firebase HTTP v1 API</strong> (Recommended), provide the <strong>Project
                            ID</strong> and the <strong>Service Account JSON</strong>. Legacy Server Key is also supported
                        for older versions.
                    </p>
                </div>

                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Firebase Project ID</label>
                        <input type="text" name="fcm_project_id"
                            value="{{ old('fcm_project_id', $settings->fcm_project_id) }}" placeholder="your-project-id"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Service Account JSON Content</label>
                        <textarea name="fcm_service_account_json" rows="8" placeholder='{ "type": "service_account", ... }'
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all font-mono text-xs">{{ old('fcm_service_account_json', $settings->fcm_service_account_json) }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">FCM Server Key (Legacy)</label>
                        <input type="text" name="fcm_server_key"
                            value="{{ old('fcm_server_key', $settings->fcm_server_key) }}" placeholder="AAAA..."
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                </div>
            </div>

            <!-- Email Configuration -->
            <div class="glass-card rounded-2xl p-8">
                <h3 class="text-lg font-bold text-white mb-8 border-b border-slate-800 pb-4">Email Configuration</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Mail Driver</label>
                        <select name="mail_mailer" x-model="mail_mailer"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                            <option value="smtp">SMTP</option>
                            <option value="mailgun">Mailgun</option>
                            <option value="ses">Amazon SES</option>
                            <option value="log">Log (Local Dev)</option>
                        </select>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">From Address</label>
                            <input type="email" name="mail_from_address"
                                value="{{ old('mail_from_address', $settings->mail_from_address) }}"
                                placeholder="hello@astrotalk.com"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">From Name</label>
                            <input type="text" name="mail_from_name"
                                value="{{ old('mail_from_name', $settings->mail_from_name) }}"
                                placeholder="Astrotalk Support"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>
                    </div>
                </div>

                <!-- SMTP Fields -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6" x-show="mail_mailer === 'smtp'" x-cloak>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-slate-300 mb-2">SMTP Host</label>
                        <input type="text" name="mail_host" value="{{ old('mail_host', $settings->mail_host) }}"
                            placeholder="smtp.mailtrap.io"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">SMTP Port</label>
                        <input type="text" name="mail_port" value="{{ old('mail_port', $settings->mail_port) }}"
                            placeholder="587"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Encryption</label>
                        <select name="mail_encryption"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                            <option value="tls" {{ $settings->mail_encryption == 'tls' ? 'selected' : '' }}>TLS</option>
                            <option value="ssl" {{ $settings->mail_encryption == 'ssl' ? 'selected' : '' }}>SSL</option>
                            <option value="null" {{ $settings->mail_encryption == 'null' ? 'selected' : '' }}>None</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Username</label>
                        <input type="text" name="mail_username" value="{{ old('mail_username', $settings->mail_username) }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
                        <input type="password" name="mail_password"
                            value="{{ old('mail_password', $settings->mail_password) }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                </div>

                <!-- Mailgun Fields -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6" x-show="mail_mailer === 'mailgun'" x-cloak>
                    <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-slate-300 mb-2">Mailgun Domain</label>
                        <input type="text" name="mailgun_domain"
                            value="{{ old('mailgun_domain', $settings->mailgun_domain) }}" placeholder="mg.yourdomain.com"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div class="md:col-span-1">
                        <label class="block text-sm font-medium text-slate-300 mb-2">Mailgun Secret</label>
                        <input type="password" name="mailgun_secret"
                            value="{{ old('mailgun_secret', $settings->mailgun_secret) }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">Endpoint</label>
                        <select name="mailgun_endpoint"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                            <option value="api.mailgun.net" {{ $settings->mailgun_endpoint == 'api.mailgun.net' ? 'selected' : '' }}>US (Default)</option>
                            <option value="api.eu.mailgun.net" {{ $settings->mailgun_endpoint == 'api.eu.mailgun.net' ? 'selected' : '' }}>EU (Europe)</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4">
                <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-12 py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all flex items-center gap-2">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    Save Notification Settings
                </button>
            </div>
        </div>
    </form>
@endsection