@extends('layouts.app')

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

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}" />
    <style>
        .settings-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
        }

        .settings-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 600;
            margin-bottom: 6px;
        }

        .form-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .help {
            color: #6b7280;
            font-size: .9rem;
        }

        @media (max-width: 900px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="dashboard-content">

                <div class="stats-grid" style="margin-bottom:18px;">
                    <div class="stat-card revenue-card">
                        <div class="stat-icon"><i class="fas fa-envelope"></i></div>
                        <div class="stat-info">
                            <h3>{{ $setting->from_address ?: 'Not set' }}</h3>
                            <p>From Address</p>
                            <span class="stat-change">
                                <i class="fas fa-clock"></i>
                                {{ $setting->last_tested_at ? $setting->last_tested_at->diffForHumans() : 'Never tested' }}
                            </span>
                        </div>
                    </div>
                    <div class="stat-card customers-card">
                        <div class="stat-icon"><i class="fas fa-server"></i></div>
                        <div class="stat-info">
                            <h3>{{ strtoupper($setting->transport ?? 'smtp') }}</h3>
                            <p>Transport</p>
                            <span class="stat-change">
                                <i class="fas fa-power-off"></i> {{ $setting->active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <div class="dashboard-card settings-card">
                        <div class="card-header">
                            <h3>Email Configuration</h3>
                            <div class="card-actions">
                                <a href="{{ route('email-settings.edit') }}" class="view-all">Refresh</a>
                            </div>
                        </div>

                        @if (session('status'))
                            <div class="alert alert-success" style="margin-bottom:16px;">{{ session('status') }}</div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger" style="margin-bottom:16px;">
                                <ul style="margin:0;padding-left:18px;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('email-settings.update') }}">
                            @csrf
                            @method('PUT')

                            <div class="settings-grid">

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="transport">Transport</label>
                                        <select id="transport" name="transport" class="form-control">
                                            <option value="smtp"
                                                {{ old('transport', $setting->transport) === 'smtp' ? 'selected' : '' }}>
                                                SMTP</option>
                                        </select>
                                        <span class="help">This setup supports SMTP.</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="active">Active</label>
                                        <select id="active" name="active" class="form-control">
                                            <option value="1"
                                                {{ old('active', (int) $setting->active) ? 'selected' : '' }}>Active
                                            </option>
                                            <option value="0"
                                                {{ !old('active', (int) $setting->active) ? 'selected' : '' }}>Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="host">SMTP Host</label>
                                        <input id="host" name="host" class="form-control" type="text"
                                            value="{{ old('host', $setting->host) }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="port">SMTP Port</label>
                                        <input id="port" name="port" class="form-control" type="number"
                                            value="{{ old('port', $setting->port) }}" required>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="encryption">Encryption</label>
                                        <select id="encryption" name="encryption" class="form-control">
                                            <option value="">None</option>
                                            <option value="tls"
                                                {{ old('encryption', $setting->encryption) === 'tls' ? 'selected' : '' }}>
                                                TLS</option>
                                            <option value="ssl"
                                                {{ old('encryption', $setting->encryption) === 'ssl' ? 'selected' : '' }}>
                                                SSL</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="timeout">Timeout (seconds)</label>
                                        <input id="timeout" name="timeout" class="form-control" type="number"
                                            value="{{ old('timeout', $setting->timeout) }}">
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="username">Username</label>
                                        <input id="username" name="username" class="form-control" type="text"
                                            value="{{ old('username', $setting->username) }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="password">Password</label>
                                        <input id="password" name="password" class="form-control" type="password"
                                            placeholder="••••••••">
                                        <span class="help">Leave blank to keep current password.</span>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="from_address">From Address</label>
                                        <input id="from_address" name="from_address" class="form-control" type="email"
                                            value="{{ old('from_address', $setting->from_address) }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="from_name">From Name</label>
                                        <input id="from_name" name="from_name" class="form-control" type="text"
                                            value="{{ old('from_name', $setting->from_name) }}" required>
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Save Settings
                                    </button>

                                    <div style="display:flex; gap:8px; align-items:center;">
                                        <input type="email" name="test_to" class="form-control"
                                            placeholder="test@domain.com" value="{{ old('test_to') }}"
                                            style="max-width:260px;">
                                        <button type="submit" class="btn btn-secondary">
                                            <i class="fas fa-paper-plane" style="width:100%; !impoprtant;"></i> Save & Queue Test
                                        </button>
                                    </div>
                                </div>

                                <div class="help">
                                    Tip: You can also send a standalone test below without saving again.
                                </div>
                            </div>
                        </form>

                        <hr style="margin:20px 0;">

                        <form method="POST" action="{{ route('email-settings.test') }}" class="form-inline">
                            @csrf
                            <div class="form-actions">
                                <input type="email" name="test_to" class="form-control" placeholder="test@domain.com"
                                    required style="max-width:260px;">
                                <button type="submit" class="btn btn-outline-primary">
                                    <i class="fas fa-flask"></i> Queue Test Email
                                </button>
                                <span class="help">A queued job will send a simple test email using the current active
                                    settings.</span>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        /* If you want to add any client-side helpers later */
    </script>
@endpush