@extends('layouts.app')

@section('title', 'Email Settings')
@section('heading', 'Email Settings')

@section('content')
<div class="mx-auto max-w-5xl space-y-4">
    @if(session('success'))
        <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    @include('settings.partials.nav', ['settingsActive' => 'email'])

    <x-card class="!p-0 overflow-hidden">
        <div class="border-b border-slate-100 bg-slate-50/50 px-5 py-3">
            <h2 class="text-sm font-semibold text-slate-800">SMTP / mail</h2>
            <p class="text-xs text-slate-500">Outgoing email for your company</p>
        </div>
        <div class="space-y-6 p-5">
            <form action="{{ route('settings.email.store') }}" method="post" class="space-y-4">
                @csrf
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label for="mail_mailer" class="block text-xs font-medium text-slate-500">Mail driver</label>
                        <select name="mail_mailer" id="mail_mailer" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500 js-select2">
                            <option value="smtp" {{ ($mail['mail_mailer'] ?? '') === 'smtp' ? 'selected' : '' }}>SMTP</option>
                            <option value="log" {{ ($mail['mail_mailer'] ?? '') === 'log' ? 'selected' : '' }}>Log (no real send)</option>
                        </select>
                    </div>
                    <div>
                        <label for="mail_from_name" class="block text-xs font-medium text-slate-500">From name</label>
                        <input type="text" name="mail_from_name" id="mail_from_name" value="{{ old('mail_from_name', $mail['mail_from_name'] ?? '') }}" required
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                        @error('mail_from_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="mail_from_address" class="block text-xs font-medium text-slate-500">From email</label>
                        <input type="email" name="mail_from_address" id="mail_from_address" value="{{ old('mail_from_address', $mail['mail_from_address'] ?? '') }}" required
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                        @error('mail_from_address') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="mail_host" class="block text-xs font-medium text-slate-500">Host</label>
                        <input type="text" name="mail_host" id="mail_host" value="{{ old('mail_host', $mail['mail_host'] ?? '') }}"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500" placeholder="smtp.example.com">
                    </div>
                    <div>
                        <label for="mail_port" class="block text-xs font-medium text-slate-500">Port</label>
                        <input type="text" name="mail_port" id="mail_port" value="{{ old('mail_port', $mail['mail_port'] ?? '587') }}"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                    </div>
                    <div>
                        <label for="mail_encryption" class="block text-xs font-medium text-slate-500">Encryption</label>
                        <select name="mail_encryption" id="mail_encryption" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500 js-select2">
                            <option value="tls" {{ ($mail['mail_encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                            <option value="ssl" {{ ($mail['mail_encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                            <option value="null" {{ ($mail['mail_encryption'] ?? '') === 'null' ? 'selected' : '' }}>None</option>
                        </select>
                    </div>
                    <div>
                        <label for="mail_username" class="block text-xs font-medium text-slate-500">Username</label>
                        <input type="text" name="mail_username" id="mail_username" value="{{ old('mail_username', $mail['mail_username'] ?? '') }}"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                    </div>
                    <div>
                        <label for="mail_password" class="block text-xs font-medium text-slate-500">Password</label>
                        <input type="password" name="mail_password" id="mail_password" value="" autocomplete="new-password"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
                               placeholder="{{ $hasPassword ? 'Leave blank to keep current' : 'Enter password' }}">
                    </div>
                    <div>
                        <label for="mail_queue" class="block text-xs font-medium text-slate-500">Mail queue</label>
                        <select name="mail_queue" id="mail_queue" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500 js-select2">
                            <option value="no" {{ ($mail['mail_queue'] ?? 'no') === 'no' ? 'selected' : '' }}>No</option>
                            <option value="yes" {{ ($mail['mail_queue'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end border-t border-slate-100 pt-4">
                    <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Save email settings</button>
                </div>
            </form>

            <div class="rounded-lg border border-slate-200 bg-slate-50/50 p-4">
                <h4 class="text-sm font-semibold text-slate-800">Send test mail</h4>
                <form action="{{ route('settings.email.test') }}" method="post" class="mt-3 flex flex-wrap items-end gap-3">
                    @csrf
                    <div class="min-w-[200px] flex-1">
                        <label for="test_to" class="block text-xs font-medium text-slate-500">To email</label>
                        <input type="email" name="to" id="test_to" value="{{ old('to', $mail['mail_from_address'] ?? '') }}" required
                               class="mt-1 w-full max-w-sm rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                    </div>
                    <button type="submit" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Send test</button>
                </form>
            </div>
        </div>
    </x-card>
</div>
@endsection