@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            {{-- ── Page Title ── --}}
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row align-items-center">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-envelope-open-text mr-2" style="color:#c9a96e"></i>
                                SMTP Configuration
                            </h3>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li>
                                    <a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="bc-sep">›</li>
                                <li><a href="/mail-configuration" class="bc-link">Settings</a></li>
                                <li class="bc-sep">›</li>
                                <li  class="bc-active">SMTP</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-8">

                        {{-- ── Alerts ── --}}
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-4" role="alert">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ session('success') }}</span>
                                <button type="button" class="close ms-auto" data-dismiss="alert" aria-label="Close" style="margin-left:auto;">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2 mb-4" role="alert">
                                <i class="fas fa-exclamation-circle"></i>
                                <span>{{ session('error') }}</span>
                                <button type="button" class="close ms-auto" data-dismiss="alert" aria-label="Close" style="margin-left:auto;">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif
                        @if(session('test_result'))
                            @php $tr = session('test_result'); @endphp
                            <div class="alert alert-{{ $tr['success'] ? 'success' : 'danger' }} alert-dismissible fade show d-flex align-items-center gap-2 mb-4">
                                <i class="fas fa-{{ $tr['success'] ? 'check-circle' : 'times-circle' }}"></i>
                                <span>{{ $tr['message'] }}</span>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="margin-left:auto;">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        {{-- ── Status Card ── --}}
                        <div class="card shadow-sm mb-4"
                             style="border-top: 3px solid {{ $smtpSetting ? '#28a745' : '#dc3545' }};">
                            <div class="card-body d-flex align-items-center justify-content-between gap-3 py-3">
                                <div style="width:44px;height:44px;border-radius:50%;
                                            background:{{ $smtpSetting ? 'rgba(40,167,69,0.12)' : 'rgba(220,53,69,0.12)' }};
                                            display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <i class="fas fa-{{ $smtpSetting ? 'check' : 'times' }}"
                                       style="color:{{ $smtpSetting ? '#28a745' : '#dc3545' }};font-size:18px;"></i>
                                </div>
                                <div>
                                    <div class="fw-bold" style="font-size:14px;">
                                        SMTP is {{ $smtpSetting ? 'configured' : 'not configured' }}
                                    </div>
                                    <div class="text-muted" style="font-size:12px;">
                                        @if($smtpSetting)
                                            Sending via <strong>{{ $smtpSetting->username }}</strong>
                                            through <strong>{{ $smtpSetting->host }}:{{ $smtpSetting->port }}</strong>
                                        @else
                                            Fill in the form below to enable email sending
                                        @endif
                                    </div>
                                </div>
                                @if($smtpSetting)
                                <div class="ms-auto">
                                    <span class="badge bg-success px-3 py-2">● Active</span>
                                </div>
                                @endif
                            </div>
                        </div>

                        {{-- ── Main Form Card ── --}}
                        <div class="card shadow-sm" style="border-top: 3px solid #c9a96e;">
                            <div class="card-header"
                                 style="background: linear-gradient(135deg, #1a1a2e, #16213e);">
                                <h6 class="mb-0 text-white">
                                    <i class="fas fa-cog mr-2" style="color:#c9a96e;"></i>
                                    SMTP Server Settings
                                </h6>
                            </div>

                            <div class="card-body p-4">
                                <form action="{{ route('save-mail-config') }}" method="POST" id="smtp-form">
                                    @csrf

                                    {{-- ── Row 1: Host + Port ── --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-8">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-server me-1" style="color:#c9a96e;"></i>
                                                SMTP Host
                                            </label>
                                            <input type="text" name="host" class="form-control @error('host') is-invalid @enderror"
                                                   placeholder="e.g. smtp.gmail.com"
                                                   value="{{ old('host', $smtpSetting->host ?? '') }}" required>
                                            @error('host')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-plug me-1" style="color:#c9a96e;"></i>
                                                Port
                                            </label>
                                            <input type="number" name="port" class="form-control @error('port') is-invalid @enderror"
                                                   placeholder="587"
                                                   value="{{ old('port', $smtpSetting->port ?? '') }}" required>
                                            @error('port')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">TLS→587, SSL→465</div>
                                        </div>
                                    </div>

                                    {{-- ── Row 2: Username + Encryption ── --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-8">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-user me-1" style="color:#c9a96e;"></i>
                                                SMTP Username
                                            </label>
                                            <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                                                   placeholder="your@email.com"
                                                   value="{{ old('username', $smtpSetting->username ?? '') }}" required>
                                            @error('username')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-semibold">
                                                <i class="fas fa-lock me-1" style="color:#c9a96e;"></i>
                                                Encryption
                                            </label>
                                            <select name="encryption" class="form-control @error('encryption') is-invalid @enderror">
                                                <option value="tls" {{ old('encryption', $smtpSetting->encryption ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                                                <option value="ssl" {{ old('encryption', $smtpSetting->encryption ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                            </select>
                                            @error('encryption')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- ── Password ── --}}
                                    <div class="mb-3">
                                        <label class="form-label fw-semibold">
                                            <i class="fas fa-key me-1" style="color:#c9a96e;"></i>
                                            SMTP Password
                                        </label>
                                        <div class="input-group">
                                            <input type="password" name="password" id="smtp-password"
                                                   class="form-control @error('password') is-invalid @enderror"
                                                   placeholder="{{ $smtpSetting ? '••••••••••••' : 'Enter password' }}"
                                                   value="{{ old('password', $smtpSetting->password ?? '') }}" required>
                                            <button type="button" class="btn btn-outline-secondary"
                                                    onclick="togglePassword()">
                                                <i id="pw-eye" class="fas fa-eye"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                            <div class="text-danger small mt-1">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">For Gmail, use an App Password, not your account password.</div>
                                    </div>

                                    {{-- ── Divider ── --}}
                                    <hr class="my-4">
                                    <p class="fw-semibold mb-3" style="color:#c9a96e;">
                                        <i class="fas fa-paper-plane me-1"></i> Sender Identity
                                    </p>

                                    {{-- ── Row 3: From Address + From Name ── --}}
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">From Address</label>
                                            <input type="email" name="from_address"
                                                   class="form-control @error('from_address') is-invalid @enderror"
                                                   placeholder="no-reply@yourdomain.com"
                                                   value="{{ old('from_address', $smtpSetting->from_address ?? '') }}" required>
                                            @error('from_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-semibold">From Name</label>
                                            <input type="text" name="from_name"
                                                   class="form-control @error('from_name') is-invalid @enderror"
                                                   placeholder="Your Company Name"
                                                   value="{{ old('from_name', $smtpSetting->from_name ?? '') }}" required>
                                            @error('from_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    {{-- ── Actions ── --}}
                                    <div class="d-flex gap-2 flex-wrap">
                                        <button type="submit" class="btn btn-primary px-4 mr-2">
                                            <i class="fas fa-save me-1"></i> Save Configuration
                                        </button>
                                        @if($smtpSetting)
                                        <button type="button" class="btn btn-outline-success px-4"
                                                data-bs-toggle="modal" data-bs-target="#testEmailModal">
                                            <i class="fas fa-paper-plane me-1"></i> Send Test Email
                                        </button>
                                        @endif
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- ── Quick Reference Card ── --}}
                        <div class="card shadow-sm mt-4" style="border-top: 3px solid #17a2b8;">
                            <div class="card-header" style="background: linear-gradient(135deg,#1a1a2e,#16213e);">
                                <h6 class="mb-0 text-white">
                                    <i class="fas fa-info-circle me-1" style="color:#17a2b8;"></i>
                                    Common SMTP Settings
                                </h6>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered mb-0" style="font-size:13px;">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Provider</th>
                                                <th>Host</th>
                                                <th>Port</th>
                                                <th>Encryption</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><i class="fab fa-google me-1 text-danger"></i> Gmail</td>
                                                <td><code>smtp.gmail.com</code></td>
                                                <td>587</td>
                                                <td>TLS</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fas fa-envelope me-1 text-primary"></i> Outlook</td>
                                                <td><code>smtp.office365.com</code></td>
                                                <td>587</td>
                                                <td>TLS</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fab fa-yahoo me-1 text-purple"></i> Yahoo</td>
                                                <td><code>smtp.mail.yahoo.com</code></td>
                                                <td>465</td>
                                                <td>SSL</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fas fa-mail-bulk me-1 text-warning"></i> Mailgun</td>
                                                <td><code>smtp.mailgun.org</code></td>
                                                <td>587</td>
                                                <td>TLS</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ── Test Email Modal ── --}}
@if($smtpSetting)
<div class="modal fade" id="testEmailModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#1a1a2e,#16213e);">
                <h6 class="modal-title text-white" id="testEmailModalLabel">
                    <i class="fas fa-paper-plane me-2" style="color:#c9a96e;"></i>
                    Send Test Email
                </h6>
                <button type="button" class="close js-close-test-modal" aria-label="Close"
                        style="opacity:1;font-size:24px;line-height:1;background:none;border:none;color:white;cursor:pointer;padding:0 4px;margin: 0;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('mail-config.test') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <p class="text-muted small mb-3">
                        Sends a test email using your current SMTP settings to verify the configuration works.
                    </p>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Send test to</label>
                        <input type="email" name="test_email" class="form-control"
                               placeholder="your@email.com" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary js-close-test-modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-paper-plane me-1"></i> Send Test
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@include('Partials.footer')

<script>
function togglePassword() {
    const input = document.getElementById('smtp-password');
    const icon  = document.getElementById('pw-eye');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

// Auto-fill port when encryption changes
document.querySelector('select[name="encryption"]').addEventListener('change', function () {
    const portInput = document.querySelector('input[name="port"]');
    if (!portInput.value || portInput.value === '587' || portInput.value === '465') {
        portInput.value = this.value === 'ssl' ? '465' : '587';
    }
});

// Wait for footer to finish loading jQuery + Bootstrap 4
window.addEventListener('load', function () {
    // Open modal
    var openBtn = document.querySelector('[data-bs-target="#testEmailModal"]');
    if (openBtn) {
        openBtn.addEventListener('click', function () {
            $('#testEmailModal').modal('show');
        });
    }

    // Close modal — × button and Cancel button
    document.querySelectorAll('.js-close-test-modal').forEach(function (el) {
        el.addEventListener('click', function () {
            $('#testEmailModal').modal('hide');
        });
    });
});
</script>