PowderCoatingLogix/src/PowderCoating.Web/Views/Announcements/_AnnouncementForm.cshtml

@using PowderCoating.Core.Entities
@model Announcement
@{
    var planConfigs = (dynamic)ViewBag.PlanConfigs;
    var companies   = (dynamic)ViewBag.Companies;
}

<div class="row g-3">
    <div class="col-12">
        <label class="form-label fw-medium">Title <span class="text-danger">*</span></label>
        <input asp-for="Title" class="form-control" placeholder="e.g. Scheduled maintenance tonight" required />
        <span asp-validation-for="Title" class="text-danger small"></span>
    </div>

    <div class="col-12">
        <label class="form-label fw-medium">Message <span class="text-danger">*</span></label>
        <textarea asp-for="Message" class="form-control" rows="3"
                  placeholder="The platform will be offline for maintenance on Saturday from 2&ndash;4 AM ET." required></textarea>
        <span asp-validation-for="Message" class="text-danger small"></span>
    </div>

    <div class="col-md-4">
        <label class="form-label fw-medium">Type</label>
        <select asp-for="Type" class="form-select">
            <option value="info">Info (blue)</option>
            <option value="success">Success (green)</option>
            <option value="warning">Warning (yellow)</option>
            <option value="danger">Danger (red)</option>
        </select>
    </div>

    <div class="col-md-4">
        <label class="form-label fw-medium">Target Audience</label>
        <select asp-for="Target" class="form-select" id="targetSelect" onchange="toggleTarget()">
            <option value="All">All companies</option>
            <option value="Plan">Specific plan</option>
            <option value="Company">Specific company</option>
        </select>
    </div>

    <div class="col-md-4">
        <div id="planTargetGroup" style="display:none">
            <label class="form-label fw-medium">Plan</label>
            <select asp-for="TargetPlan" class="form-select">
                <option value="">&mdash; select &mdash;</option>
                @foreach (var p in planConfigs)
                {
                    <option value="@p.Plan">@p.DisplayName</option>
                }
            </select>
        </div>
        <div id="companyTargetGroup" style="display:none">
            <label class="form-label fw-medium">Company</label>
            <select asp-for="TargetCompanyId" class="form-select">
                <option value="">&mdash; select &mdash;</option>
                @foreach (var c in companies)
                {
                    <option value="@c.Id">@c.CompanyName</option>
                }
            </select>
        </div>
    </div>

    <div class="col-md-6">
        <label class="form-label fw-medium">Starts At</label>
        <input asp-for="StartsAt" type="datetime-local" class="form-control"
               value="@Model.StartsAt.Tz(ViewBag.CompanyTimeZone as string).ToString("yyyy-MM-ddTHH:mm")" />
    </div>

    <div class="col-md-6">
        <label class="form-label fw-medium">Expires At <span class="text-muted fw-normal">(optional)</span></label>
        <input asp-for="ExpiresAt" type="datetime-local" class="form-control"
               value="@(Model.ExpiresAt.HasValue ? Model.ExpiresAt.Value.Tz(ViewBag.CompanyTimeZone as string).ToString("yyyy-MM-ddTHH:mm") : "")" />
        <div class="form-text">Leave blank to never expire.</div>
    </div>

    <div class="col-md-6">
        <div class="form-check form-switch mt-2">
            <input asp-for="IsActive" class="form-check-input" type="checkbox" />
            <label asp-for="IsActive" class="form-check-label">Active (visible to users)</label>
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-check form-switch mt-2">
            <input asp-for="IsDismissible" class="form-check-input" type="checkbox" />
            <label asp-for="IsDismissible" class="form-check-label">Dismissible by users</label>
        </div>
    </div>

    @* Live preview *@
    <div class="col-12">
        <label class="form-label fw-medium text-muted">Preview</label>
        <div id="announcementPreview" class="alert mb-0" role="alert">
            <strong id="previewTitle">@Model.Title</strong>
            <span id="previewMessage"> &mdash; @Model.Message</span>
        </div>
    </div>
</div>

<script>
    function toggleTarget() {
        const v = document.getElementById('targetSelect').value;
        document.getElementById('planTargetGroup').style.display = v === 'Plan' ? '' : 'none';
        document.getElementById('companyTargetGroup').style.display = v === 'Company' ? '' : 'none';
    }
    toggleTarget();

    // Live preview
    const typeMap = { info: 'alert-info', success: 'alert-success', warning: 'alert-warning', danger: 'alert-danger' };
    function updatePreview() {
        const type = document.getElementById('Type').value;
        const preview = document.getElementById('announcementPreview');
        preview.className = 'alert mb-0 ' + (typeMap[type] || 'alert-info');
        document.getElementById('previewTitle').textContent = document.getElementById('Title').value || 'Title';
        document.getElementById('previewMessage').textContent = ' &mdash; ' + (document.getElementById('Message').value || 'Message');
    }
    document.getElementById('Type')?.addEventListener('change', updatePreview);
    document.getElementById('Title')?.addEventListener('input', updatePreview);
    document.getElementById('Message')?.addEventListener('input', updatePreview);
    updatePreview();
</script>