hrynco-notification-service/HrynCo.NotificationService.Web/Views/AdminChannels/Edit.cshtml

@using HrynCo.NotificationService.DAL.Abstract.Providers
@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
@model EmailChannelEditViewModel
@{
    Layout = "~/Views/Shared/_EditorLayout.cshtml";
    ViewData["Title"] = Model.PageTitle;
    ViewData["EditorTitle"] = Model.PageTitle;
}

<form id="channelForm" asp-action="Save" asp-controller="AdminChannels" method="post">
    @Html.AntiForgeryToken()
    <input asp-for="Id" type="hidden" />

    @if (!ViewData.ModelState.IsValid)
    {
        <div class="alert alert-danger mb-3">
            @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
            {
                <div>@error.ErrorMessage</div>
            }
        </div>
    }

    @* Channel Settings section *@
    <div class="form-section-title"><i class="bi bi-sliders me-1"></i> Channel Settings</div>

    <div class="mb-4">
        <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
        <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
        <span asp-validation-for="ServiceName" class="text-danger small"></span>
    </div>

    <div class="row mb-4">
        <div class="col-md-4">
            <label asp-for="Priority" class="form-label fw-semibold">Priority</label>
            <input asp-for="Priority" class="form-control" type="number" min="1" />
            <span asp-validation-for="Priority" class="text-danger small"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="EmailChannelType" class="form-label fw-semibold">Channel Type</label>
            <select asp-for="EmailChannelType" class="form-select"
                    asp-items="Html.GetEnumSelectList<EmailChannelType>()">
            </select>
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <div class="form-check mb-2">
                <input asp-for="IsActive" class="form-check-input" type="checkbox" />
                <label asp-for="IsActive" class="form-check-label fw-semibold">Active</label>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-4">
            <label asp-for="DailyLimit" class="form-label fw-semibold">Daily Limit</label>
            <input asp-for="DailyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
            <span asp-validation-for="DailyLimit" class="text-danger small"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="MonthlyLimit" class="form-label fw-semibold">Monthly Limit</label>
            <input asp-for="MonthlyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
            <span asp-validation-for="MonthlyLimit" class="text-danger small"></span>
        </div>
        <div class="col-md-4">
            <label asp-for="WarnThresholdPercent" class="form-label fw-semibold">Warn Threshold (%)</label>
            <input asp-for="WarnThresholdPercent" class="form-control" type="number" min="1" max="100" />
            <span asp-validation-for="WarnThresholdPercent" class="text-danger small"></span>
        </div>
    </div>

    @* SMTP Settings section *@
    <div class="form-section-title mt-4"><i class="bi bi-envelope-at me-1"></i> SMTP Settings</div>

    <div class="row mb-4">
        <div class="col-md-9">
            <label asp-for="Host" class="form-label fw-semibold">Host</label>
            <input asp-for="Host" class="form-control" placeholder="smtp.example.com" />
            <span asp-validation-for="Host" class="text-danger small"></span>
        </div>
        <div class="col-md-3">
            <label asp-for="Port" class="form-label fw-semibold">Port</label>
            <input asp-for="Port" class="form-control" type="number" min="1" max="65535" />
            <span asp-validation-for="Port" class="text-danger small"></span>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <label asp-for="Username" class="form-label fw-semibold">Username</label>
            <input asp-for="Username" class="form-control" autocomplete="new-password" />
            <span asp-validation-for="Username" class="text-danger small"></span>
        </div>
        <div class="col-md-6">
            <label asp-for="Password" class="form-label fw-semibold">Password</label>
            <input asp-for="Password" class="form-control" type="password" autocomplete="new-password" />
            <span asp-validation-for="Password" class="text-danger small"></span>
        </div>
    </div>

    <div class="mb-4">
        <div class="form-check">
            <input asp-for="UseSsl" class="form-check-input" type="checkbox" />
            <label asp-for="UseSsl" class="form-check-label fw-semibold">Use SSL/TLS</label>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <label asp-for="FromEmail" class="form-label fw-semibold">From Email</label>
            <input asp-for="FromEmail" class="form-control" type="email" placeholder="noreply@example.com" />
            <span asp-validation-for="FromEmail" class="text-danger small"></span>
        </div>
        <div class="col-md-6">
            <label asp-for="FromName" class="form-label fw-semibold">From Name</label>
            <input asp-for="FromName" class="form-control" placeholder="My Service" />
            <span asp-validation-for="FromName" class="text-danger small"></span>
        </div>
    </div>

    @section FormActions {
        <button type="submit" form="channelForm" class="btn btn-primary">
            <i class="bi bi-floppy me-1"></i> Save
        </button>
        <button type="button" class="btn btn-success" id="testModalBtn">
            <i class="bi bi-send me-1"></i> Test
        </button>
        <a href="/admin/channels" class="btn btn-secondary">
            <i class="bi bi-x-lg me-1"></i> Cancel
        </a>
    }
</form>

<div class="modal fade" id="testModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-send me-2"></i>Send Test Email</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">Tests the current form settings — no need to save first.</p>
                <label for="testToEmail" class="form-label fw-semibold">Recipient Email</label>
                <input type="email" id="testToEmail" class="form-control" placeholder="you@example.com" />
                <div id="testResult" class="mt-3" style="display:none"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="testSendBtn" onclick="sendTestEmail()">
                    <i class="bi bi-send me-1"></i> Send
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('click', function (e) {
        if (e.target.closest('#testModalBtn')) {
            document.getElementById('testResult').style.display = 'none';
            bootstrap.Modal.getOrCreateInstance(document.getElementById('testModal')).show();
        }
    });

    async function sendTestEmail() {
        const toEmail = document.getElementById('testToEmail').value.trim();
        const resultDiv = document.getElementById('testResult');
        const sendBtn = document.getElementById('testSendBtn');

        if (!toEmail) {
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="alert alert-warning mb-0">Please enter a recipient email.</div>';
            return;
        }

        const form = document.getElementById('channelForm');
        const payload = {
            host: form.querySelector('[name="Host"]').value,
            port: parseInt(form.querySelector('[name="Port"]').value, 10),
            username: form.querySelector('[name="Username"]').value,
            password: form.querySelector('[name="Password"]').value,
            useSsl: form.querySelector('[name="UseSsl"]').checked,
            fromEmail: form.querySelector('[name="FromEmail"]').value,
            fromName: form.querySelector('[name="FromName"]').value,
            toEmail
        };

        sendBtn.disabled = true;
        sendBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending…';
        resultDiv.style.display = 'none';

        try {
            const resp = await fetch('/admin/channels/test-smtp', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await resp.json();
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = data.success
                ? `<div class="alert alert-success mb-0"><i class="bi bi-check-circle me-1"></i>${data.message}</div>`
                : `<div class="alert alert-danger mb-0"><i class="bi bi-x-circle me-1"></i>${data.message}</div>`;
        } catch (e) {
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `<div class="alert alert-danger mb-0">Request failed: ${e.message}</div>`;
        } finally {
            sendBtn.disabled = false;
            sendBtn.innerHTML = '<i class="bi bi-send me-1"></i> Send';
        }
    }
</script>