@extends('layouts.app')

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

@section('content')
    <div class="mb-6 flex flex-wrap gap-4 border-b border-slate-200 pb-4">
        <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Platform</a>
        <a href="{{ route('superadmin.settings.email') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-primary text-white">Email Settings</a>
        <a href="{{ route('superadmin.settings.sms') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">SMS Settings</a>
        <a href="{{ route('superadmin.settings.whatsapp') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">WhatsApp Settings</a>
        <a href="{{ route('superadmin.settings.profile') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Profile</a>
    </div>

    <x-card>
        <h3 class="mb-4 text-sm font-semibold text-slate-700">SMTP / Mail configuration</h3>
        <p class="mb-4 text-sm text-slate-500">Configure outgoing email. Stored in Super Admin settings; overrides .env when set.</p>
        <form action="{{ route('superadmin.settings.email.store') }}" method="post" class="max-w-xl space-y-4">
            @csrf
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="mail_mailer" class="block text-sm font-medium text-slate-700">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>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="mail_from_name" class="block text-sm font-medium text-slate-700">Mail 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-sm font-medium text-slate-700">Mail 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>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="mail_host" class="block text-sm font-medium text-slate-700">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-sm font-medium text-slate-700">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-sm font-medium text-slate-700">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>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="mail_username" class="block text-sm font-medium text-slate-700">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-sm font-medium text-slate-700">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>
            <div>
                <label for="mail_queue" class="block text-sm font-medium text-slate-700">Enable mail queue</label>
                <select name="mail_queue" id="mail_queue" class="mt-1 w-full max-w-xs 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 class="flex flex-wrap gap-3">
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Update</button>
                <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
            </div>
        </form>

        <hr class="my-6 border-slate-200">
        <h4 class="mb-2 text-sm font-semibold text-slate-700">Send test mail</h4>
        <form action="{{ route('superadmin.settings.email.test') }}" method="post" class="flex flex-wrap items-end gap-3">
            @csrf
            <div>
                <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-64 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>
            <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 mail</button>
        </form>
    </x-card>
@endsection