@extends('layouts.admin')

@section('title', 'Settings')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-900 mb-2">Settings</h1>
    <p class="text-slate-600">Configure your application settings and integrations</p>
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
    <!-- Email Configuration -->
    <div class="bg-white rounded-2xl shadow-soft border border-slate-200 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i data-feather="mail" class="w-5 h-5 text-white"></i>
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-white">Email Configuration</h2>
                    <p class="text-blue-100 text-sm">Configure SMTP settings for email notifications</p>
                </div>
            </div>
        </div>
        
        <form method="POST" action="{{ route('admin.settings.mail') }}" class="p-6 space-y-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="mail_host" class="block text-sm font-medium text-slate-700 mb-2">
                        <i data-feather="server" class="w-4 h-4 inline mr-1"></i>
                        SMTP Host
                    </label>
                    <input type="text" id="mail_host" name="mail_host" 
                           value="{{ $mailSettings['mail_host'] }}" 
                           placeholder="mail.example.com" required
                           class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                </div>
                
                <div>
                    <label for="mail_port" class="block text-sm font-medium text-slate-700 mb-2">
                        <i data-feather="hash" class="w-4 h-4 inline mr-1"></i>
                        Port
                    </label>
                    <select id="mail_port" name="mail_port" required
                            class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                        <option value="465" {{ $mailSettings['mail_port'] == '465' ? 'selected' : '' }}>465 (SSL)</option>
                        <option value="587" {{ $mailSettings['mail_port'] == '587' ? 'selected' : '' }}>587 (TLS)</option>
                        <option value="25" {{ $mailSettings['mail_port'] == '25' ? 'selected' : '' }}>25 (Standard)</option>
                    </select>
                </div>
            </div>
            
            <div>
                <label for="mail_username" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="user" class="w-4 h-4 inline mr-1"></i>
                    Email Address / Username
                </label>
                <input type="email" id="mail_username" name="mail_username" 
                       value="{{ $mailSettings['mail_username'] }}" 
                       placeholder="your-email@domain.com" required
                       class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
            </div>
            
            <div class="relative">
                <label for="mail_password" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="lock" class="w-4 h-4 inline mr-1"></i>
                    Password
                </label>
                <input type="password" id="mail_password" name="mail_password" 
                       value="{{ $mailSettings['mail_password'] }}" 
                       placeholder="••••••••••••" required
                       class="w-full px-4 py-3 pr-12 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                <button type="button" onclick="togglePassword('mail_password')" 
                        class="absolute right-3 top-10 text-slate-400 hover:text-slate-600">
                    <i data-feather="eye" class="w-4 h-4"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="mail_encryption" class="block text-sm font-medium text-slate-700 mb-2">
                        <i data-feather="shield" class="w-4 h-4 inline mr-1"></i>
                        Encryption
                    </label>
                    <select id="mail_encryption" name="mail_encryption" required
                            class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                        <option value="ssl" {{ $mailSettings['mail_encryption'] == 'ssl' ? 'selected' : '' }}>SSL</option>
                        <option value="tls" {{ $mailSettings['mail_encryption'] == 'tls' ? 'selected' : '' }}>TLS</option>
                    </select>
                </div>
                
                <div>
                    <label for="mail_from_name" class="block text-sm font-medium text-slate-700 mb-2">
                        <i data-feather="tag" class="w-4 h-4 inline mr-1"></i>
                        From Name
                    </label>
                    <input type="text" id="mail_from_name" name="mail_from_name" 
                           value="{{ $mailSettings['mail_from_name'] }}" 
                           placeholder="DonateApp" required
                           class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
                </div>
            </div>
            
            <div class="flex items-center justify-between pt-4 border-t border-slate-200">
                <button type="button" onclick="testMailConnection()" 
                        class="flex items-center space-x-2 px-4 py-2 text-blue-600 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors">
                    <i data-feather="send" class="w-4 h-4"></i>
                    <span>Test Connection</span>
                </button>
                
                <button type="submit" 
                        class="flex items-center space-x-2 px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors shadow-lg hover:shadow-xl">
                    <i data-feather="save" class="w-4 h-4"></i>
                    <span>Save Email Settings</span>
                </button>
            </div>
        </form>
    </div>
    
    <!-- Square Payment Configuration -->
    <div class="bg-white rounded-2xl shadow-soft border border-slate-200 overflow-hidden">
        <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 px-6 py-4">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i data-feather="credit-card" class="w-5 h-5 text-white"></i>
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-white">Square Payment</h2>
                    <p class="text-emerald-100 text-sm">Configure Square payment processing</p>
                </div>
            </div>
        </div>
        
        <form method="POST" action="{{ route('admin.settings.square') }}" class="p-6 space-y-6">
            @csrf
            
            <div>
                <label for="square_environment" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="globe" class="w-4 h-4 inline mr-1"></i>
                    Environment
                </label>
                <select id="square_environment" name="square_environment" required
                        class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all">
                    <option value="sandbox" {{ $squareSettings['square_environment'] == 'sandbox' ? 'selected' : '' }}>
                        🧪 Sandbox (Testing)
                    </option>
                    <option value="production" {{ $squareSettings['square_environment'] == 'production' ? 'selected' : '' }}>
                        🚀 Production (Live)
                    </option>
                </select>
                <p class="text-xs text-slate-500 mt-1">Use sandbox for testing, production for live payments</p>
            </div>
            
            <div>
                <label for="square_application_id" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="key" class="w-4 h-4 inline mr-1"></i>
                    Application ID
                </label>
                <div class="relative">
                    <input type="text" id="square_application_id" name="square_application_id" 
                           value="{{ $squareSettings['square_application_id'] }}" 
                           placeholder="sandbox-sq0idb-..." required
                           class="w-full px-4 py-3 pr-12 border border-slate-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all font-mono text-sm">
                    <button type="button" onclick="togglePassword('square_application_id')" 
                            class="absolute right-3 top-3 text-slate-400 hover:text-slate-600">
                        <i data-feather="eye" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
            
            <div>
                <label for="square_access_token" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="shield" class="w-4 h-4 inline mr-1"></i>
                    Access Token
                </label>
                <div class="relative">
                    <input type="password" id="square_access_token" name="square_access_token" 
                           value="{{ $squareSettings['square_access_token'] }}" 
                           placeholder="EAAAE..." required
                           class="w-full px-4 py-3 pr-12 border border-slate-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all font-mono text-sm">
                    <button type="button" onclick="togglePassword('square_access_token')" 
                            class="absolute right-3 top-3 text-slate-400 hover:text-slate-600">
                        <i data-feather="eye" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
            
            <div>
                <label for="square_location_id" class="block text-sm font-medium text-slate-700 mb-2">
                    <i data-feather="map-pin" class="w-4 h-4 inline mr-1"></i>
                    Location ID
                </label>
                <input type="text" id="square_location_id" name="square_location_id" 
                       value="{{ $squareSettings['square_location_id'] }}" 
                       placeholder="LK0F..." required
                       class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-all font-mono text-sm">
            </div>
            
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                <div class="flex items-start space-x-3">
                    <i data-feather="info" class="w-5 h-5 text-amber-600 mt-0.5"></i>
                    <div>
                        <h4 class="text-sm font-medium text-amber-800">Square Credentials</h4>
                        <p class="text-sm text-amber-700 mt-1">
                            Get your Square credentials from the 
                            <a href="https://developer.squareup.com/apps" target="_blank" class="underline hover:no-underline">
                                Square Developer Dashboard
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-end pt-4 border-t border-slate-200">
                <button type="submit" 
                        class="flex items-center space-x-2 px-6 py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition-colors shadow-lg hover:shadow-xl">
                    <i data-feather="save" class="w-4 h-4"></i>
                    <span>Save Square Settings</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Test Email Modal -->
<div id="test-email-modal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
        <div class="flex items-center space-x-3 mb-4">
            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                <i data-feather="send" class="w-5 h-5 text-blue-600"></i>
            </div>
            <h3 class="text-lg font-semibold text-slate-900">Test Email Connection</h3>
        </div>
        
        <div class="mb-4">
            <label for="test_email" class="block text-sm font-medium text-slate-700 mb-2">Send test email to:</label>
            <input type="email" id="test_email" placeholder="test@example.com" 
                   class="w-full px-4 py-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        
        <div class="flex space-x-3">
            <button onclick="closeTestModal()" 
                    class="flex-1 px-4 py-2 text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200 transition-colors">
                Cancel
            </button>
            <button onclick="sendTestEmail()" 
                    class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
                Send Test
            </button>
        </div>
    </div>
</div>

<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = field.nextElementSibling.querySelector('i');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.setAttribute('data-feather', 'eye-off');
    } else {
        field.type = 'password';
        icon.setAttribute('data-feather', 'eye');
    }
    feather.replace();
}

function testMailConnection() {
    document.getElementById('test-email-modal').classList.remove('hidden');
}

function closeTestModal() {
    document.getElementById('test-email-modal').classList.add('hidden');
}

function sendTestEmail() {
    const email = document.getElementById('test_email').value;
    if (!email) {
        alert('Please enter an email address');
        return;
    }
    
    fetch('{{ route("admin.settings.test-mail") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ test_email: email })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
        } else {
            alert('❌ ' + data.message);
        }
        closeTestModal();
    })
    .catch(error => {
        alert('❌ Error: ' + error.message);
        closeTestModal();
    });
}
</script>
@endsection