@extends('layouts.installer')

@section('title', 'Mail Configuration')
@section('subtitle', 'Configure SMTP settings to send emails from your application.')

@section('content')
<form action="{{ route('install.mail.post') }}" method="POST" class="space-y-6">
    @csrf
    
    <div>
        <label class="block text-sm font-medium text-text-dim mb-2">Mail Driver</label>
        <select name="mail_mailer" class="form-input">
            <option value="smtp" {{ old('mail_mailer', $data['mail_mailer']) == 'smtp' ? 'selected' : '' }}>SMTP (Recommended)</option>
            <option value="log" {{ old('mail_mailer', $data['mail_mailer']) == 'log' ? 'selected' : '' }}>Log (For Local Development)</option>
            <option value="sendmail" {{ old('mail_mailer', $data['mail_mailer']) == 'sendmail' ? 'selected' : '' }}>Sendmail</option>
        </select>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Mail Host</label>
            <input type="text" name="mail_host" class="form-input" placeholder="smtp.mailgun.org" value="{{ old('mail_host', $data['mail_host']) }}">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Mail Port</label>
            <input type="number" name="mail_port" class="form-input" placeholder="587" value="{{ old('mail_port', $data['mail_port']) }}">
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Mail Username</label>
            <input type="text" name="mail_username" class="form-input" autocomplete="off" value="{{ old('mail_username', $data['mail_username']) }}">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Mail Password</label>
            <input type="password" name="mail_password" class="form-input" autocomplete="new-password" value="{{ old('mail_password', $data['mail_password']) }}">
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Encryption</label>
            <select name="mail_encryption" class="form-input">
                <option value="tls" {{ old('mail_encryption', $data['mail_encryption']) == 'tls' ? 'selected' : '' }}>TLS</option>
                <option value="ssl" {{ old('mail_encryption', $data['mail_encryption']) == 'ssl' ? 'selected' : '' }}>SSL</option>
                <option value="" {{ old('mail_encryption', $data['mail_encryption']) == '' ? 'selected' : '' }}>None</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">From Address</label>
            <input type="email" name="mail_from_address" required placeholder="noreply@example.com" class="form-input" value="{{ old('mail_from_address', $data['mail_from_address']) }}">
        </div>
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">From Name</label>
            <input type="text" name="mail_from_name" required placeholder="My Application" class="form-input" value="{{ old('mail_from_name', $data['mail_from_name']) }}">
        </div>
    </div>

    <div class="pt-6 border-t border-white/5 flex justify-between items-center">
        <a href="{{ route('install.website') }}" class="text-sm text-text-dim hover:text-white transition-colors">
            &larr; Back
        </a>
        <button type="submit" class="btn-primary">
            Save & Continue
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
    </div>
</form>
@endsection