@extends('layouts.app')

@section('content')
<div class="mb-8">
    <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight uppercase">System Settings</h2>
    <p class="text-gray-500 mt-1 uppercase text-[10px] font-bold tracking-widest">Configure platform branding and integrations.</p>
</div>

@if(session('success'))
    <div class="bg-green-50 text-green-700 p-4 rounded-xl border border-green-200 mb-6 font-bold shadow-sm">✅ {{ session('success') }}</div>
@endif

@if(session('error'))
    <div class="bg-red-50 text-red-700 p-4 rounded-xl border border-red-200 mb-6 font-bold shadow-sm">❌ {{ session('error') }}</div>
@endif

<div class="grid grid-cols-1 xl:grid-cols-2 gap-8 pb-20">
    
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden self-start">
        <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest flex items-center">
                <i class="fas fa-image mr-2 text-brand-500"></i> Platform Branding
            </h3>
        </div>
        <form action="{{ route('settings.logo') }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf
            <div class="mb-6 flex items-center space-x-6">
                <div class="w-24 h-24 bg-gray-50 border-2 border-dashed border-gray-200 rounded-xl flex items-center justify-center overflow-hidden p-2">
                    @if(!empty($settings['company_logo']))
                        <img src="{{ asset($settings['company_logo']) }}" class="max-w-full max-h-full object-contain">
                    @else
                        <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">No Logo</span>
                    @endif
                </div>
                <div class="flex-1">
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2">Company Logo</label>
                    <input type="file" name="company_logo" class="block w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100 cursor-pointer">
                </div>
            </div>
            <button type="submit" class="w-full bg-gray-900 text-white font-bold py-3 rounded-lg shadow-md hover:bg-black transition uppercase text-xs tracking-widest">Update Logo</button>
        </form>
    </div>

    <div class="space-y-8 self-start">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest flex items-center">
                    <i class="fas fa-envelope mr-2 text-brand-500"></i> SMTP Email Server
                </h3>
            </div>
            <form action="{{ route('settings.smtp') }}" method="POST" class="p-6 space-y-6">
                @csrf
                <div class="grid grid-cols-2 gap-6">
                    <div class="form-group">
                        <label class="form-label text-[10px] font-bold text-gray-400 uppercase tracking-widest">SMTP Host</label>
                        <input type="text" name="smtp_host" value="{{ $settings['smtp_host'] }}" class="w-full border-b border-gray-300 py-2 outline-none focus:border-brand-500 font-sans">
                    </div>
                    <div class="form-group">
                        <label class="form-label text-[10px] font-bold text-gray-400 uppercase tracking-widest">Port</label>
                        <input type="number" name="smtp_port" value="{{ $settings['smtp_port'] }}" class="w-full border-b border-gray-300 py-2 outline-none focus:border-brand-500 font-sans">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-6">
                    <div class="form-group">
                        <label class="form-label text-[10px] font-bold text-gray-400 uppercase tracking-widest">Username</label>
                        <input type="text" name="smtp_user" value="{{ $settings['smtp_user'] }}" class="w-full border-b border-gray-300 py-2 outline-none focus:border-brand-500 font-sans">
                    </div>
                    <div class="form-group">
                        <label class="form-label text-[10px] font-bold text-gray-400 uppercase tracking-widest">Password</label>
                        <input type="password" name="smtp_pass" value="{{ $settings['smtp_pass'] }}" class="w-full border-b border-gray-300 py-2 outline-none focus:border-brand-500 font-sans">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label text-[10px] font-bold text-gray-400 uppercase tracking-widest">Encryption</label>
                    <select name="smtp_encryption" class="w-full border-b border-gray-300 py-2 outline-none focus:border-brand-500 bg-white">
                        <option value="tls" {{ $settings['smtp_encryption'] == 'tls' ? 'selected' : '' }}>TLS (Recommended)</option>
                        <option value="ssl" {{ $settings['smtp_encryption'] == 'ssl' ? 'selected' : '' }}>SSL</option>
                    </select>
                </div>
                <button type="submit" class="w-full bg-brand-600 text-white font-bold py-3 rounded-lg shadow-md hover:bg-brand-700 transition uppercase text-xs tracking-widest">Save SMTP Settings</button>
            </form>
        </div>

 <div class="bg-sky-50 rounded-2xl border border-sky-100 p-6">
    <h4 class="text-xs font-black text-sky-900 uppercase tracking-widest flex items-center mb-2">
        <i class="fas fa-plug mr-2"></i> Test Connection
    </h4>
    <p class="text-[11px] text-sky-700 mb-4 font-medium">Save settings first, then enter an email to test.</p>
    
    <form action="{{ route('settings.test') }}" method="POST" class="flex gap-3">
        @csrf
        <input type="email" name="test_email" required placeholder="your.email@mohm.com" class="flex-1 bg-white border border-sky-200 rounded-lg px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-sky-500">
        
        <button type="submit" class="bg-sky-600 text-white px-6 py-2 rounded-lg font-bold uppercase text-[10px] tracking-widest hover:bg-sky-700 transition shadow-sm">
            Send Ping
        </button>
    </form>
</div>
    </div>
</div>
@endsection