@extends('layouts.admin')

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

@section('content')
<div class="container-fluid p-0">

	<div class="d-flex justify-content-between align-items-center mb-3">
		<div>
			<h1 class="h3 mb-1">Email (SMTP) Configuration</h1>
			<p class="text-muted mb-0">
				Configure the outgoing mail server used by JOTI Journal for password resets,
				notifications and other system emails.
			</p>
		</div>
	</div>

	@if ($errors->any())
		<div class="alert alert-danger alert-dismissible" role="alert">
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			<div class="alert-message">
				<ul class="mb-0 ps-3">
					@foreach ($errors->all() as $err)
						<li>{{ $err }}</li>
					@endforeach
				</ul>
			</div>
		</div>
	@endif

	<div class="row">

		{{-- ─────────────────  Settings form (left, wider)  ───────────────── --}}
		<div class="col-12 col-lg-8">
			<div class="card">
				<div class="card-header">
					<h5 class="card-title mb-0">SMTP Server Details</h5>
				</div>
				<div class="card-body">

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

						<div class="row g-3">
							<div class="col-md-4">
								<label for="mailer" class="form-label">Mailer</label>
								<select class="form-select" name="mailer" id="mailer">
									<option value="smtp" @selected(old('mailer', $setting->mailer) === 'smtp')>SMTP</option>
									<option value="log"  @selected(old('mailer', $setting->mailer) === 'log')>Log (no real sending)</option>
								</select>
								<small class="text-muted">Use <code>log</code> for development — emails are written to <code>storage/logs/laravel.log</code>.</small>
							</div>

							<div class="col-md-5">
								<label for="host" class="form-label">SMTP Host</label>
								<input type="text" class="form-control" id="host" name="host"
									value="{{ old('host', $setting->host) }}"
									placeholder="smtp.gmail.com">
							</div>

							<div class="col-md-3">
								<label for="port" class="form-label">Port</label>
								<input type="number" class="form-control" id="port" name="port"
									value="{{ old('port', $setting->port) }}"
									placeholder="587" min="1" max="65535">
							</div>

							<div class="col-md-4">
								<label for="encryption" class="form-label">Encryption</label>
								<select class="form-select" name="encryption" id="encryption">
									@php $enc = old('encryption', $setting->encryption); @endphp
									<option value=""    @selected($enc === null || $enc === '')>None</option>
									<option value="tls" @selected($enc === 'tls')>TLS</option>
									<option value="ssl" @selected($enc === 'ssl')>SSL</option>
								</select>
							</div>

							<div class="col-md-8">
								<label for="username" class="form-label">Username</label>
								<input type="text" class="form-control" id="username" name="username"
									value="{{ old('username', $setting->username) }}"
									placeholder="you@gmail.com" autocomplete="off">
							</div>

							<div class="col-md-12">
								<label for="password" class="form-label">Password</label>
								<input type="password" class="form-control" id="password" name="password"
									value="" placeholder="Leave blank to keep current password"
									autocomplete="new-password">
								<small class="text-muted">
									For Gmail, use a 16-character
									<a href="https://myaccount.google.com/apppasswords" target="_blank" rel="noopener">App Password</a>,
									not the account password.
									{{ $setting->password ? 'A password is currently saved.' : 'No password saved yet.' }}
								</small>
							</div>

							<div class="col-md-6">
								<label for="from_address" class="form-label">From Address</label>
								<input type="email" class="form-control" id="from_address" name="from_address"
									value="{{ old('from_address', $setting->from_address) }}"
									placeholder="noreply@jotijournal.com">
							</div>

							<div class="col-md-6">
								<label for="from_name" class="form-label">From Name</label>
								<input type="text" class="form-control" id="from_name" name="from_name"
									value="{{ old('from_name', $setting->from_name) }}"
									placeholder="JOTI Journal">
							</div>
						</div>

						<hr class="my-4">

						<div class="d-flex gap-2">
							<button type="submit" class="btn btn-primary">
								<i class="align-middle" data-feather="save"></i>
								Save Settings
							</button>
							<button type="button" class="btn btn-outline-secondary" id="reset-form-btn">
								Reset Form
							</button>
						</div>
					</form>

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

		{{-- ─────────────────  Side panel: test + status  ───────────────── --}}
		<div class="col-12 col-lg-4">

			<div class="card">
				<div class="card-header">
					<h5 class="card-title mb-0">Send Test Email</h5>
				</div>
				<div class="card-body">
					<p class="text-muted small mb-3">
						Sends a test message using the values currently in the form
						(no save required). Useful for verifying credentials before committing.
					</p>

					<div class="mb-3">
						<label for="test_to_email" class="form-label">Recipient</label>
						<input type="email" class="form-control" id="test_to_email"
							placeholder="your-inbox@example.com">
					</div>

					<button type="button" class="btn btn-success w-100" id="send-test-btn">
						<i class="align-middle" data-feather="send"></i>
						<span id="send-test-label">Send Test Email</span>
					</button>
				</div>
			</div>

			<div class="card mt-3">
				<div class="card-header">
					<h5 class="card-title mb-0">Last Test</h5>
				</div>
				<div class="card-body">
					@if ($setting->last_tested_at)
						<dl class="row mb-0 small">
							<dt class="col-5">When</dt>
							<dd class="col-7">{{ $setting->last_tested_at->format('d M Y, H:i') }}</dd>

							<dt class="col-5">Status</dt>
							<dd class="col-7">
								@if ($setting->last_test_status === 'success')
									<span class="badge bg-success">Success</span>
								@else
									<span class="badge bg-danger">Failed</span>
								@endif
							</dd>

							@if ($setting->last_test_error)
								<dt class="col-12 mt-2">Error</dt>
								<dd class="col-12">
									<pre class="bg-light p-2 rounded small mb-0" style="white-space: pre-wrap; word-break: break-word;">{{ $setting->last_test_error }}</pre>
								</dd>
							@endif
						</dl>
					@else
						<p class="text-muted small mb-0">No test has been run yet.</p>
					@endif
				</div>
			</div>

		</div>

	</div>
</div>
@endsection

@push('scripts')
<script>
(function () {
	const testBtn       = document.getElementById('send-test-btn');
	const testBtnLabel  = document.getElementById('send-test-label');
	const testEmailInpt = document.getElementById('test_to_email');
	const settingsForm  = document.getElementById('email-settings-form');
	const csrfToken     = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
	const testUrl       = @json(route('admin.settings.email.test'));

	document.getElementById('reset-form-btn').addEventListener('click', () => {
		settingsForm.reset();
	});

	testBtn.addEventListener('click', async () => {
		const toEmail = testEmailInpt.value.trim();
		if (!toEmail) {
			Swal.fire({
				icon:  'warning',
				title: 'Recipient required',
				text:  'Please enter an email address to send the test to.',
			});
			testEmailInpt.focus();
			return;
		}

		const payload = new FormData(settingsForm);
		payload.append('to_email', toEmail);

		testBtn.disabled       = true;
		testBtnLabel.textContent = 'Sending…';

		try {
			const res = await fetch(testUrl, {
				method:  'POST',
				headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
				body:    payload,
			});
			const data = await res.json();

			if (res.ok && data.ok) {
				Swal.fire({
					icon:  'success',
					title: 'Test email sent',
					text:  data.message,
					timer: 4500,
				});
				setTimeout(() => window.location.reload(), 1500);
			} else {
				Swal.fire({
					icon:  'error',
					title: 'Test failed',
					text:  data.error || 'Unknown error',
				});
				setTimeout(() => window.location.reload(), 2500);
			}
		} catch (e) {
			Swal.fire({
				icon:  'error',
				title: 'Network error',
				text:  e.message,
			});
		} finally {
			testBtn.disabled         = false;
			testBtnLabel.textContent = 'Send Test Email';
		}
	});
})();
</script>
@endpush