@extends('layouts.app')
@section('title', mws_workspace_nav_label())

@push('stylesheets')
@if (is_mec_role())
<style>
    @include('partials.mec-plan-report-type-badge-styles')
</style>
@endif
<style>
    /* Summary row: fixed height (~two list items); overflow scrolls inside card body */
    .mws-planner-cards-row > [class*="col-"] {
        display: flex;
    }
    .mws-planner-card {
        --mws-planner-card-h: 16.5rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: var(--mws-planner-card-h);
        max-height: var(--mws-planner-card-h);
        min-height: var(--mws-planner-card-h);
    }
    .mws-planner-card > .card-header {
        flex-shrink: 0;
    }
    .mws-planner-card > .card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mws-planner-slot { border-left: 3px solid var(--app-primary, #17a2b8); padding-left: .65rem; margin-bottom: .6rem; }
    .mws-planner-slot .mws-ref { font-size: .78rem; letter-spacing: .02em; }
    .mws-summary .small-box { border-radius: 12px; }
    .mws-cal-head { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
    .mws-badge-soft { font-weight: 600; font-size: .72rem !important; padding: .2rem .45rem; border-radius: 999px; }

    #mwsPlannerMonthBody.mws-planner-month-body--loading {
        opacity: 0.55;
        pointer-events: none;
    }
    /* Month planner grid — layout matches minimalist 7-column calendar; colors follow app light/dark theme */
    .mws-planner-cal {
        --mws-cal-sunday-num: #c0392b;
        --mws-cal-cell-border: rgba(0, 0, 0, 0.12);
        --mws-cal-today-ring: var(--app-primary, #17a2b8);
    }
    body.dark-mode .mws-planner-cal {
        --mws-cal-sunday-num: #ef9a9a;
        --mws-cal-cell-border: rgba(255, 255, 255, 0.14);
        --mws-cal-today-ring: #4cc3d4;
    }
    .mws-planner-card-toolbar {
        position: relative;
    }
    .mws-planner-header-actions {
        gap: 0.5rem;
    }
    .mws-planner-card-toolbar__label {
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.03em;
        line-height: 1.2;
        color: inherit;
        flex: 0 1 auto;
        max-width: min(100%, 22rem);
    }
    .js-mws-planner-jump-trigger {
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        line-height: inherit;
        cursor: pointer;
        color: inherit;
    }
    .js-mws-planner-jump-trigger:hover .mws-planner-card-toolbar__label,
    .js-mws-planner-jump-trigger:focus .mws-planner-card-toolbar__label {
        color: var(--app-primary, #17a2b8);
        text-decoration: underline;
        outline: none;
    }
    .js-mws-planner-jump-trigger .mws-planner-card-toolbar__label::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.35rem;
        vertical-align: middle;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.55;
    }
    .mws-planner-jump-input {
        position: absolute;
        left: 50%;
        top: calc(100% + 2px);
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
    }
    .mws-planner-cal__weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        column-gap: 0.35rem;
        margin-bottom: 0.65rem;
    }
    .mws-planner-cal__weekday {
        text-align: center;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6c757d;
    }
    body.dark-mode .mws-planner-cal__weekday { color: rgba(255, 255, 255, 0.45); }
    .mws-planner-cal__grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        column-gap: 0.45rem;
        row-gap: 0.85rem;
    }
    .mws-planner-cal__cell {
        min-width: 0;
        border: none;
        background: transparent;
        box-shadow: none;
    }
    .mws-planner-cal__cell a {
        pointer-events: none;
        cursor: default;
        color: inherit; /* optional: keeps normal text color */
        text-decoration: none; /* optional */
    }
    .mws-planner-cal__cell-inner {
        border: 1px solid var(--mws-cal-cell-border);
        border-radius: 8px;
        padding: 0.5rem 0.3rem 0.65rem;
        min-height: 6.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }
    .mws-planner-cal__cell--outside .mws-planner-cal__cell-inner {
        border-color: rgba(0, 0, 0, 0.06);
    }
    body.dark-mode .mws-planner-cal__cell--outside .mws-planner-cal__cell-inner {
        border-color: rgba(255, 255, 255, 0.08);
    }
    .mws-planner-cal__cell--today .mws-planner-cal__cell-inner {
        border-color: var(--mws-cal-today-ring);
        border-width: 2px;
    }
    .mws-planner-cal__daynum {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        width: 100%;
        color: #212529;
    }
    body.dark-mode .mws-planner-cal__daynum { color: rgba(255, 255, 255, 0.94); }
    .mws-planner-cal__cell--sunday .mws-planner-cal__daynum { color: var(--mws-cal-sunday-num); }
    .mws-planner-cal__cell--outside .mws-planner-cal__daynum { opacity: 0.4; }
    .mws-planner-cal__events {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-top: 0.45rem;
        flex: 1 1 auto;
    }
    .mws-planner-cal__event-wrap {
        display: block;
        width: 100%;
        max-width: 88%;
        padding: 2px 0;
        line-height: 0;
        text-decoration: none !important;
    }
    .mws-planner-cal__event-wrap:focus-visible {
        outline: 2px solid var(--app-primary, #17a2b8);
        outline-offset: 2px;
        border-radius: 999px;
    }
    .mws-planner-cal__event {
        display: block;
        height: 7px;
        border-radius: 999px;
        width: 100%;
    }

    /* Non-MEC month only: type-name pills + hover. MEC month rules above stay as-is. */
    .mws-planner-cal--forum .mws-planner-cal__cell,
    .mws-planner-cal--forum .mws-planner-cal__cell-inner {
        overflow: visible;
        position: relative;
    }
    .mws-planner-cal--forum .mws-planner-cal__cell:hover,
    .mws-planner-cal--forum .mws-planner-cal__cell:focus-within {
        z-index: 4;
    }
    .mws-planner-cal--forum .mws-planner-cal__cell-inner {
        min-height: 7.25rem;
    }
    .mws-planner-cal--forum .mws-planner-cal__cell a.mws-planner-cal__event-wrap,
    .mws-planner-cal--forum .mws-planner-cal__cell a.mws-planner-cal__more {
        pointer-events: auto;
        cursor: pointer;
    }
    .mws-planner-cal--forum .mws-planner-cal__event-wrap {
        position: relative;
        line-height: 1.2;
        max-width: 94%;
        padding: 1px 0;
        z-index: 1;
    }
    .mws-planner-cal--forum .mws-planner-cal__event-wrap:hover,
    .mws-planner-cal--forum .mws-planner-cal__event-wrap:focus-within {
        z-index: 5;
    }
    .mws-planner-cal--forum .mws-planner-cal__event--pill {
        height: auto;
        min-height: 1.25rem;
        padding: 0.16rem 0.4rem;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mws-planner-cal--forum .mws-cal-event--ongoing.mws-planner-cal__event--pill {
        color: #212529;
    }
    .mws-planner-cal--forum .mws-planner-cal__tip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: 16.5rem;
        max-width: min(16.5rem, 72vw);
        padding: 0.7rem 0.8rem 0.65rem;
        border-radius: 10px;
        border-left: 3px solid #22c55e;
        background: #1f2937;
        color: #fff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 30;
        text-align: left;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.35;
        white-space: normal;
    }
    .mws-planner-cal--forum .mws-planner-cal__event-wrap:hover .mws-planner-cal__tip,
    .mws-planner-cal--forum .mws-planner-cal__event-wrap:focus-visible .mws-planner-cal__tip {
        opacity: 1;
        visibility: visible;
    }
    .mws-planner-cal--forum .mws-planner-cal__tip-title {
        display: block;
        margin-bottom: 0.55rem;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.4;
        color: #fff;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .mws-planner-cal--forum .mws-planner-cal__tip-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.28rem;
        font-size: 0.68rem;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.92);
    }
    .mws-planner-cal--forum .mws-planner-cal__tip-row > i {
        width: 0.85rem;
        flex-shrink: 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.7rem;
    }
    .mws-planner-cal--forum .mws-planner-cal__tip-label {
        flex: 0 0 auto;
        color: rgba(255, 255, 255, 0.55);
        font-weight: 600;
    }
    .mws-planner-cal--forum .mws-planner-cal__tip-value {
        margin-left: auto;
        text-align: right;
        font-weight: 600;
        color: #fff;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .mws-planner-cal--forum .mws-planner-cal__legend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.85rem 1.25rem;
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 0.78rem;
        color: #6c757d;
    }
    body.dark-mode .mws-planner-cal--forum .mws-planner-cal__legend {
        border-top-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.55);
    }
    .mws-planner-cal--forum .mws-planner-cal__legend-item {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 600;
    }
    .mws-planner-cal--forum .mws-planner-cal__legend-swatch {
        display: inline-block;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 999px;
        flex-shrink: 0;
    }
    @media (max-width: 767.98px) {
        .mws-planner-cal--forum .mws-planner-cal__event--pill {
            height: auto;
            font-size: 0.58rem;
            padding: 0.12rem 0.28rem;
        }
    }
    .mws-planner-cal__more {
        font-size: 0.68rem;
        font-weight: 600;
        margin-top: 2px;
        color: #6c757d;
        text-decoration: none;
    }
    .mws-planner-cal__more:hover { text-decoration: underline; color: var(--app-primary, #17a2b8); }
    body.dark-mode .mws-planner-cal__more { color: rgba(255, 255, 255, 0.5); }

    /* MEC Activity Calendar: per-day visit type + meeting counts (month grid) */
    .mws-planner-cal__events--mec-summary {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        align-items: stretch;
        gap: 3px;
        margin-top: 0.35rem;
        padding: 0;
    }
    .mws-planner-cal__day-summary-line {
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1.25;
        color: #212529;
        text-align: center;
        padding: 0.22rem 0.2rem;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.05);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.dark-mode .mws-planner-cal__day-summary-line {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.08);
    }
    .mws-planner-cal__day-summary-line--rvp { color: #0056b3; background: rgba(0, 123, 255, 0.14); }
    .mws-planner-cal__day-summary-line--cvp { color: #c45d00; background: rgba(252, 134, 38, 0.18); }
    .mws-planner-cal__day-summary-line--svp { color: #c2185b; background: rgba(229, 67, 107, 0.14); }
    .mws-planner-cal__day-summary-line--drp { color: #7b2cbf; background: rgba(184, 64, 197, 0.14); }
    .mws-planner-cal__day-summary-line--erp { color: #9a7b00; background: rgba(255, 215, 0, 0.22); }
    .mws-planner-cal__day-summary-line--pmp { color: #2e6da4; background: rgba(132, 175, 233, 0.22); }
    .mws-planner-cal__day-summary-line--meeting { color: #117a8b; background: rgba(23, 162, 184, 0.16); }
    body.dark-mode .mws-planner-cal__day-summary-line--rvp { color: #6eb3ff; background: rgba(0, 123, 255, 0.22); }
    body.dark-mode .mws-planner-cal__day-summary-line--cvp { color: #ffb366; background: rgba(252, 134, 38, 0.22); }
    body.dark-mode .mws-planner-cal__day-summary-line--svp { color: #ff8fab; background: rgba(229, 67, 107, 0.22); }
    body.dark-mode .mws-planner-cal__day-summary-line--drp { color: #d9a3ff; background: rgba(184, 64, 197, 0.22); }
    body.dark-mode .mws-planner-cal__day-summary-line--erp { color: #ffe566; background: rgba(255, 215, 0, 0.18); }
    body.dark-mode .mws-planner-cal__day-summary-line--pmp { color: #a8c9f5; background: rgba(132, 175, 233, 0.22); }
    body.dark-mode .mws-planner-cal__day-summary-line--meeting { color: #5bc0de; background: rgba(23, 162, 184, 0.22); }
    .mws-planner-cal__cell-inner--mec {
        min-height: 7.5rem;
        align-items: stretch;
        width: 100%;
    }
    .mws-planner-cal__cell-inner--mec .mws-planner-cal__daynum {
        text-align: center;
        width: 100%;
    }

    /* Status-colored event bars (aligned with lifecycle badge semantics) */
    .mws-cal-event--draft { background: #6c757d; }
    .mws-cal-event--scheduled { background: #17a2b8; }
    .mws-cal-event--confirmed { background: #007bff; }
    .mws-cal-event--ongoing { background: #e0a800; }
    .mws-cal-event--completed { background: #28a745; }
    .mws-cal-event--rescheduled { background: #343a40; }
    .mws-cal-event--missed { background: #dc3545; }
    .mws-cal-event--cancelled { background: #6c757d; }
    body.dark-mode .mws-cal-event--ongoing { background: #ffc107; }
    body.dark-mode .mws-cal-event--rescheduled { background: #adb5bd; }

    /* MEC visit-plan activities (plan type colors; meetings unchanged) */
    .mws-cal-event--visit-rvp { background: #007bff; }
    .mws-cal-event--visit-cvp { background: #fc8626; }
    .mws-cal-event--visit-svp { background: #e5436b; }
    .mws-cal-event--visit-drp { background: #b840c5; }
    .mws-cal-event--visit-erp { background: #ffd700; }
    .mws-cal-event--visit-pmp { background: #84afe9; }
    .mws-cal-event--visit-plan { background: #6c757d; }
    .mws-planner-slot--visit { border-left-color: #28a745; }
    .mws-planner-day-modal__item--visit { cursor: pointer; }
    .mws-planner-day-modal__item--visit .mws-planner-day-modal__time { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #28a745; }
    .mws-planner-day-modal__scheme-lines {
        margin: 0.35rem 0 0;
        padding: 0;
        list-style: none;
        font-size: 0.78rem;
        line-height: 1.45;
        color: #6c757d;
    }
    .mws-planner-day-modal__scheme-lines li + li { margin-top: 0.25rem; }
    body.dark-mode .mws-planner-day-modal__scheme-lines { color: rgba(255, 255, 255, 0.55); }
    #mecPlannerPlanDetailsModal { z-index: 1065; }
    #mecPlannerPlanDetailsModal + .modal-backdrop { z-index: 1060; }
    .mws-planner-day-modal { z-index: 1055; }

    @media (max-width: 767.98px) {
        .mws-planner-cal__grid { column-gap: 0.25rem; row-gap: 0.55rem; }
        .mws-planner-cal__cell-inner { min-height: 5rem; padding: 0.4rem 0.15rem 0.5rem; }
        .mws-planner-cal__daynum { font-size: 0.82rem; }
        .mws-planner-cal__weekday { font-size: 0.62rem; letter-spacing: 0.05em; }
        .mws-planner-cal__event { height: 6px; }
        .mws-planner-cal--forum .mws-planner-cal__cell-inner {
            min-height: 7.25rem;
        }
        .mws-planner-cal--forum .mws-planner-cal__event--pill {
            height: auto;
        }
    }
    @media (max-width: 400px) {
        .mws-planner-cal__weekdays { column-gap: 0.15rem; }
        .mws-planner-cal__grid { column-gap: 0.15rem; }
    }

    .mws-planner-cal__cell-inner--interactive { cursor: pointer; }
    .mws-planner-cal__cell-inner--interactive:hover { background: rgba(0, 0, 0, 0.04); }
    body.dark-mode .mws-planner-cal__cell-inner--interactive:hover { background: rgba(255, 255, 255, 0.06); }

    /* Day agenda modal (reference layout; colors follow app theme) */
    .mws-planner-day-modal .modal-dialog { max-width: 420px; }
    .mws-planner-day-modal__content {
        border: none;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    }
    body.dark-mode .mws-planner-day-modal__content {
        background: #1f2933;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }
    .mws-planner-day-modal__body { padding: 0; }
    .mws-planner-day-modal__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 1.35rem 1.25rem 1rem;
        gap: 1rem;
    }
    .mws-planner-day-modal__head-left {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
        min-width: 0;
    }
    .mws-planner-day-modal__daynum {
        font-size: 2.35rem;
        font-weight: 700;
        line-height: 1;
        color: #212529;
    }
    body.dark-mode .mws-planner-day-modal__daynum { color: rgba(255, 255, 255, 0.96); }
    .mws-planner-day-modal__head-meta {
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35rem;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        color: #212529;
    }
    body.dark-mode .mws-planner-day-modal__head-meta { color: rgba(255, 255, 255, 0.94); }
    .mws-planner-day-modal__dow {
        text-transform: uppercase;
        font-weight: 700;
    }
    .mws-planner-day-modal__dm {
        font-weight: 500;
        font-size: 0.82rem;
        letter-spacing: 0.02em;
        color: #888;
    }
    body.dark-mode .mws-planner-day-modal__dm { color: rgba(255, 255, 255, 0.45); }
    .mws-planner-day-modal__icon-btn {
        border: none;
        padding: 0;
        background: transparent;
        flex-shrink: 0;
        line-height: 1;
        opacity: 0.9;
    }
    .mws-planner-day-modal__icon-btn:hover { opacity: 1; }
    .mws-planner-day-modal__icon-btn:focus { outline: none; }
    .mws-planner-day-modal__icon-btn:focus-visible {
        box-shadow: 0 0 0 2px var(--app-primary, #17a2b8);
        border-radius: 50%;
    }
    .mws-planner-day-modal__icon-circle {
        width: 2.5rem;
        height: 2.5rem;
        /* border-radius: 50%; */
        display: flex;
        align-items: center;
        justify-content: center;
        /* border: 1px solid rgba(0, 0, 0, 0.12); */
        /* background: rgba(0, 0, 0, 0.04); */
        font-size: 1.15rem;
        color: #495057;
    }
    body.dark-mode .mws-planner-day-modal__icon-circle {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.75);
    }
    .mws-planner-day-modal__list { padding: 0 0 0.5rem; }
    .mws-planner-day-modal__item {
        display: flex;
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.95rem 1.25rem;
        text-decoration: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        transition: background 0.12s ease;
    }
    body.dark-mode .mws-planner-day-modal__item { border-top-color: rgba(255, 255, 255, 0.08); }
    .mws-planner-day-modal__item:last-child { border-bottom: none; }
    .mws-planner-day-modal__item:hover {
        background: rgba(0, 0, 0, 0.03);
    }
    body.dark-mode .mws-planner-day-modal__item:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    .mws-planner-day-modal__time {
        flex: 0 0 3.1rem;
        font-weight: 700;
        font-size: 0.95rem;
        color: #212529;
        padding-top: 0.1rem;
    }
    body.dark-mode .mws-planner-day-modal__time { color: rgba(255, 255, 255, 0.95); }
    .mws-planner-day-modal__bar {
        flex: 0 0 3px;
        width: 3px;
        border-radius: 999px;
        align-self: stretch;
        min-height: 2.75rem;
    }
    .mws-planner-day-modal__detail {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding-top: 0.05rem;
    }
    .mws-planner-day-modal__title {
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.35;
        color: #212529;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.dark-mode .mws-planner-day-modal__title { color: rgba(255, 255, 255, 0.96); }
    .mws-planner-day-modal__range {
        font-size: 0.78rem;
        color: #888;
    }
    body.dark-mode .mws-planner-day-modal__range { color: rgba(255, 255, 255, 0.45); }
    .mws-planner-day-modal__badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.35rem;
    }
    .mws-planner-day-modal__empty {
        padding: 1.25rem 1.25rem 1.75rem;
        color: #6c757d;
        font-size: 0.88rem;
        text-align: center;
    }
    body.dark-mode .mws-planner-day-modal__empty { color: rgba(255, 255, 255, 0.45); }

    /* MEC Add Activity modal (planner only) */
    .mws-add-activity-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .mws-add-activity-option {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .mws-add-activity-option:hover,
    .mws-add-activity-option:focus {
        border-color: var(--app-primary, #17a2b8);
        background: rgba(23, 162, 184, 0.06);
        outline: none;
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.12);
    }
    body.dark-mode .mws-add-activity-option {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.92);
    }
    body.dark-mode .mws-add-activity-option:hover,
    body.dark-mode .mws-add-activity-option:focus {
        background: rgba(76, 195, 212, 0.12);
        border-color: #4cc3d4;
    }
    .mws-add-activity-option__icon {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(23, 162, 184, 0.12);
        color: var(--app-primary, #17a2b8);
        font-size: 1rem;
        margin-right: 0.85rem;
    }
    .mws-add-activity-option__text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .mws-add-activity-option__title {
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.3;
    }
    .mws-add-activity-option__chevron {
        flex-shrink: 0;
        margin-left: 0.5rem;
        color: #adb5bd;
        font-size: 0.75rem;
    }
</style>
@endpush

@section('contents')
@php
    $mecPlannerEnabled = is_mec_role();
    $mecVisitActivities = $mecPlannerEnabled ? ($mecVisitActivities ?? collect()) : collect();
    $todayVisitActivities = $mecPlannerEnabled ? ($todayVisitActivities ?? collect()) : collect();
    $upcomingVisitActivities = $mecPlannerEnabled ? ($upcomingVisitActivities ?? collect()) : collect();
    $attentionVisitActivities = $mecPlannerEnabled ? ($attentionVisitActivities ?? collect()) : collect();
@endphp
<section class="content">
    <div class="container-fluid">
        @php
            $mwsDashboardQueryKeys = ['planner', 'date', 'q', 'status', 'type', 'host', 'participant', 'priority', 'from', 'to'];
            $mwsDashboardQueryForLinks = [];
            foreach ($mwsDashboardQueryKeys as $_mwsQkey) {
                if (! request()->has($_mwsQkey)) {
                    continue;
                }
                $_mwsQval = request()->query($_mwsQkey);
                if ($_mwsQval === null || $_mwsQval === '') {
                    continue;
                }
                if (is_array($_mwsQval)) {
                    $_mwsQfiltered = array_values(array_filter($_mwsQval, static fn ($x) => $x !== null && $x !== ''));
                    if ($_mwsQfiltered === []) {
                        continue;
                    }
                    $mwsDashboardQueryForLinks[$_mwsQkey] = $_mwsQfiltered;
                } else {
                    $mwsDashboardQueryForLinks[$_mwsQkey] = $_mwsQval;
                }
            }
            $mwsLifecycleBadgeClasses = [
                'draft' => 'badge-secondary',
                'scheduled' => 'badge-info',
                'confirmed' => 'badge-primary',
                'ongoing' => 'badge-warning',
                'completed' => 'badge-success',
                'rescheduled' => 'badge-dark',
                'missed' => 'badge-danger',
                'cancelled' => 'badge-secondary',
            ];
            $mwsPriorityBadgeClasses = [
                'low' => 'badge-secondary',
                'normal' => 'badge-info',
                'high' => 'badge-warning',
                'critical' => 'badge-danger',
            ];
            $mwsFilterInputKeys = ['q', 'status', 'type', 'host', 'participant', 'priority', 'from', 'to'];
            $mwsAnyFilterInputPresent = false;
            foreach ($mwsFilterInputKeys as $_mwsFk) {
                if (! request()->has($_mwsFk)) {
                    continue;
                }
                $_mwsFv = request()->query($_mwsFk);
                if ($_mwsFv === null || $_mwsFv === '') {
                    continue;
                }
                if (is_array($_mwsFv)) {
                    $_mwsFfiltered = array_values(array_filter($_mwsFv, static fn ($x) => $x !== null && $x !== ''));
                    if ($_mwsFfiltered !== []) {
                        $mwsAnyFilterInputPresent = true;
                        break;
                    }
                } else {
                    if (in_array($_mwsFk, ['q', 'status', 'type', 'priority', 'from', 'to'], true) && trim((string) $_mwsFv) === '') {
                        continue;
                    }
                    if (in_array($_mwsFk, ['host', 'participant'], true) && (int) $_mwsFv === 0) {
                        continue;
                    }
                    $mwsAnyFilterInputPresent = true;
                    break;
                }
            }
            $mwsStatusFilterTokens = array_values(array_filter(array_map('trim', explode(',', (string) request('status', '')))));
            $mwsStatusFilterSingleValue = count($mwsStatusFilterTokens) === 1 ? $mwsStatusFilterTokens[0] : null;
        @endphp
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
            <div>
                <h2 class="h4 mb-1">{{ mws_workspace_nav_label() }}</h2>
                <p class="text-muted mb-0">Planner, lifecycle, participants, minutes, and reminders in one place.</p>
            </div>
            <div class="d-flex flex-wrap align-items-center mws-planner-header-actions">
                @if (can('meeting_workspace', 'add'))
                    @if ($mecPlannerEnabled)
                        <button
                            type="button"
                            class="btn btn-primary"
                            data-toggle="modal"
                            data-target="#mwsMecAddActivityModal"
                        >
                            <i class="fas fa-plus mr-1"></i> {{ mws_workspace_add_action_label() }}
                        </button>
                    @else
                        <a href="{{ route('meeting-workspace.meetings.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus mr-1"></i> {{ mws_workspace_add_action_label() }}
                        </a>
                    @endif
                @endif
            </div>
        </div>

        <div class="card card-outline card-success mb-3">
            <div class="card-header">
                <h3 class="card-title font-weight-bold mb-0">Search (Confirm) — by Scheme</h3>
            </div>
            <div class="card-body">
                <form method="get" action="{{ route('meeting-workspace.scheme-search') }}" class="row align-items-end">
                    <div class="col-md-3 mb-2">
                        <label class="small text-muted font-weight-bold">ADP</label>
                        <input type="text" name="adp" value="{{ request('adp') }}" class="form-control" placeholder="ADP number">
                    </div>
                    <div class="col-md-3 mb-2">
                        <label class="small text-muted font-weight-bold">UID</label>
                        <input type="text" name="uid" value="{{ request('uid') }}" class="form-control" placeholder="PC / PCN UID">
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="small text-muted font-weight-bold">Scheme Name</label>
                        <input type="text" name="scheme_name" value="{{ request('scheme_name') }}" class="form-control" placeholder="Scheme name">
                    </div>
                    <div class="col-md-2 mb-2">
                        <button type="submit" class="btn btn-success btn-block font-weight-bold">Confirm</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card card-outline card-primary {{ $mwsAnyFilterInputPresent ? '' : 'collapsed-card' }} mb-3">
            <div class="card-header">
                <h3 class="card-title">Search &amp; filters</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas {{ $mwsAnyFilterInputPresent ? 'fa-minus' : 'fa-plus' }}"></i></button>
                </div>
            </div>
            <div class="card-body">
                <form method="get" action="{{ route('meeting-workspace.dashboard') }}" class="row">
                    <input type="hidden" name="planner" value="{{ $plannerView ?? 'month' }}">
                    <input type="hidden" name="date" value="{{ $anchor->toDateString() }}">
                    <div class="col-md-4 mb-2">
                        <label class="small text-muted">Search</label>
                        <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Subject, reference, agenda">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">Status</label>
                        <select name="status" class="form-control">
                            <option value="">Any</option>
                            @foreach ($meetingStatusesForFilter as $s)
                                <option value="{{ $s->value }}" @selected($mwsStatusFilterSingleValue === $s->value)>{{ $s->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">Type</label>
                        <select name="type" class="form-control">
                            <option value="">Any</option>
                            @foreach ($meetingTypes as $t)
                                <option value="{{ $t }}" @selected(request('type') === $t)>{{ $t }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">Host</label>
                        <select name="host" class="form-control">
                            <option value="">Any</option>
                            @foreach ($usersForFilters as $u)
                                <option value="{{ $u->id }}" @selected((string) request('host') === (string) $u->id)>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">Participant</label>
                        <select name="participant" class="form-control">
                            <option value="">Any</option>
                            @foreach ($usersForFilters as $u)
                                <option value="{{ $u->id }}" @selected((string) request('participant') === (string) $u->id)>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">Priority</label>
                        <select name="priority" class="form-control">
                            <option value="">Any</option>
                            @foreach ($priorities as $p)
                                <option value="{{ $p->value }}" @selected(request('priority') === $p->value)>{{ $p->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">From</label>
                        <input type="date" name="from" value="{{ request('from') }}" class="form-control">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="small text-muted">To</label>
                        <input type="date" name="to" value="{{ request('to') }}" class="form-control">
                    </div>
                    <div class="col-12 mt-2">
                        <button type="submit" class="btn btn-primary">Apply</button>
                        <a href="{{ route('meeting-workspace.dashboard') }}" class="btn btn-default">Reset</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mws-summary mb-3">
            <div class="col-sm-6 col-lg-3 mb-2">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $summary['today_count'] }}</h3>
                        <p>Today</p>
                    </div>
                    <div class="icon"><i class="far fa-clock"></i></div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-2">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3>{{ $summary['week_count'] }}</h3>
                        <p>This week</p>
                    </div>
                    <div class="icon"><i class="far fa-calendar-alt"></i></div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-2">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $summary['missed_count'] }}</h3>
                        <p>{{ $mecPlannerEnabled ? __('Over Due') : 'Missed / overdue' }}</p>
                    </div>
                    <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3 mb-2">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3>{{ $summary['month_count'] }}</h3>
                        <p>This month</p>
                    </div>
                    <div class="icon"><i class="fas fa-calendar-day"></i></div>
                </div>
            </div>
        </div>

        <div class="row mws-planner-cards-row">
            <div class="col-lg-3 mb-3">
                <div class="card mws-planner-card">
                    <div class="card-header border-0"><h3 class="card-title">{{ $mecPlannerEnabled ? __('Today') : 'Today' }}</h3></div>
                    <div class="card-body pt-0">
                        @if ($mecPlannerEnabled)
                            @foreach ($todayVisitActivities as $visit)
                                <div class="mws-planner-slot mws-planner-slot--visit">
                                    <div class="mws-ref text-muted">{{ __('Visit') }} · {{ $visit['plan_type'] }}</div>
                                    <button type="button" class="btn btn-link p-0 text-left text-dark font-weight-bold js-mec-visit-plan-trigger" data-plan-id="{{ $visit['plan_id'] }}" data-plan-scheme-id="{{ $visit['plan_scheme_id'] }}">{{ $visit['title'] }}</button>
                                    <div class="small text-muted">{{ $visit['scheme_line'] }}</div>
                                </div>
                            @endforeach
                        @endif
                        @forelse ($todayMeetings as $m)
                            <div class="mws-planner-slot">
                                <div class="mws-ref text-muted">{{ $m->reference_id }}</div>
                                <a href="{{ route('meeting-workspace.meetings.show', $m) }}" class="d-block text-dark font-weight-bold">{{ $m->title }}</a>
                                <div class="small text-muted">{{ \Illuminate\Support\Str::substr((string) $m->start_time, 0, 5) }} – {{ \Illuminate\Support\Str::substr((string) $m->end_time, 0, 5) }} · <span class="badge {{ $mwsPriorityBadgeClasses[$m->priority->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->priority->label() }}</span> · <span class="badge {{ $mwsLifecycleBadgeClasses[$m->status->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->status->label() }}</span></div>
                            </div>
                        @empty
                            @if (! $mecPlannerEnabled || $todayVisitActivities->isEmpty())
                                <p class="text-muted small mb-0">{{ $mecPlannerEnabled ? __('No visits or meetings for today.') : 'No meetings scheduled for today.' }}</p>
                            @endif
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="card mws-planner-card">
                    <div class="card-header border-0"><h3 class="card-title">Upcoming</h3></div>
                    <div class="card-body pt-0">
                        @if ($mecPlannerEnabled)
                            @foreach ($upcomingVisitActivities as $visit)
                                @php $visitDay = \Carbon\Carbon::parse($visit['event_date']); @endphp
                                <div class="mws-planner-slot mws-planner-slot--visit">
                                    <div class="mws-ref text-muted">{{ $visitDay->format('M j') }} · {{ __('Visit') }}</div>
                                    <button type="button" class="btn btn-link p-0 text-left text-dark font-weight-bold js-mec-visit-plan-trigger" data-plan-id="{{ $visit['plan_id'] }}" data-plan-scheme-id="{{ $visit['plan_scheme_id'] }}">{{ $visit['title'] }}</button>
                                    <div class="small text-muted">{{ $visit['scheme_line'] }}</div>
                                </div>
                            @endforeach
                        @endif
                        @forelse ($upcomingMeetings as $m)
                            <div class="mws-planner-slot">
                                <div class="mws-ref text-muted">{{ $m->meeting_date->format('M j') }}</div>
                                <a href="{{ route('meeting-workspace.meetings.show', $m) }}" class="d-block text-dark font-weight-bold">{{ $m->title }}</a>
                                <div class="small text-muted"><span class="badge {{ $mwsPriorityBadgeClasses[$m->priority->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->priority->label() }}</span> · <span class="badge {{ $mwsLifecycleBadgeClasses[$m->status->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->status->label() }}</span></div>
                            </div>
                        @empty
                            @if (! $mecPlannerEnabled || $upcomingVisitActivities->isEmpty())
                                <p class="text-muted small mb-0">{{ $mecPlannerEnabled ? __('No upcoming visits or meetings.') : 'No upcoming meetings.' }}</p>
                            @endif
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="card mws-planner-card">
                    <div class="card-header border-0"><h3 class="card-title">{{ $mecPlannerEnabled ? __('Over Due') : 'Attention' }}</h3></div>
                    <div class="card-body pt-0">
                        @if ($mecPlannerEnabled)
                            @foreach ($attentionVisitActivities ?? collect() as $visit)
                                @php $attentionVisitDay = \Carbon\Carbon::parse($visit['event_date']); @endphp
                                <div class="mws-planner-slot mws-planner-slot--visit" style="border-left-color:#ffc107;">
                                    <div class="mws-ref text-muted">{{ $attentionVisitDay->format('M j') }} · {{ __('Visit') }} · {{ __('Overdue') }}</div>
                                    <button type="button" class="btn btn-link p-0 text-left text-dark font-weight-bold js-mec-visit-plan-trigger" data-plan-id="{{ $visit['plan_id'] }}" data-plan-scheme-id="{{ $visit['plan_scheme_id'] }}">{{ $visit['title'] }}</button>
                                    <div class="small text-muted">{{ $visit['scheme_line'] }}</div>
                                </div>
                            @endforeach
                        @endif
                        @forelse ($missedMeetings as $m)
                            <div class="mws-planner-slot" style="border-left-color:#ffc107;">
                                <div class="mws-ref text-muted">{{ $m->reference_id }}</div>
                                <a href="{{ route('meeting-workspace.meetings.show', $m) }}" class="d-block text-dark font-weight-bold">{{ $m->title }}</a>
                                <div class="small text-muted">{{ $m->meeting_date->format('M j') }} · <span class="badge {{ $mwsPriorityBadgeClasses[$m->priority->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->priority->label() }}</span> · <span class="badge {{ $mwsLifecycleBadgeClasses[$m->status->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->status->label() }}</span></div>
                            </div>
                        @empty
                            @if (! $mecPlannerEnabled || ($attentionVisitActivities ?? collect())->isEmpty())
                                <p class="text-muted small mb-0">{{ $mecPlannerEnabled ? __('No overdue visits without an initiated monitoring report.') : 'Nothing flagged here.' }}</p>
                            @endif
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="col-lg-3 mb-3">
                <div class="card mws-planner-card">
                    <div class="card-header border-0"><h3 class="card-title">Recently updated</h3></div>
                    <div class="card-body pt-0">
                        @forelse ($recentMeetings as $m)
                            <div class="mws-planner-slot">
                                <div class="mws-ref text-muted">{{ $m->reference_id }}</div>
                                <a href="{{ route('meeting-workspace.meetings.show', $m) }}" class="d-block text-dark font-weight-bold">{{ $m->title }}</a>
                                <div class="small text-muted">{{ $m->meeting_date->format('M j') }} · {{ $m->updated_at->diffForHumans() }}</div>
                            </div>
                        @empty
                            <p class="text-muted small mb-0">No meetings match the current filters.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            @php
                if ($plannerView === 'month') {
                    $mwsPlannerCalHeaderLabel = $anchor->format('F Y');
                } elseif ($plannerView === 'week') {
                    $mwsPlannerCalHeaderLabel = $rangeStart->format('M j').' – '.$rangeEnd->format('M j, Y');
                } else {
                    $mwsPlannerCalHeaderLabel = $anchor->format('l, F j, Y');
                }
                $mwsPlannerCalPrev = $plannerView === 'month' ? $anchor->copy()->subMonth() : ($plannerView === 'day' ? $anchor->copy()->subDay() : $anchor->copy()->subWeek());
                $mwsPlannerCalNext = $plannerView === 'month' ? $anchor->copy()->addMonth() : ($plannerView === 'day' ? $anchor->copy()->addDay() : $anchor->copy()->addWeek());
            @endphp
            <div class="card-header d-flex flex-wrap align-items-center py-3">
                <h3 class="card-title mb-0">Planner</h3>
                <div class="d-flex flex-wrap align-items-center justify-content-center mws-planner-card-toolbar ml-auto mt-2 mt-sm-0">
                    @if ($plannerView === 'month')
                        <button
                            type="button"
                            class="btn btn-default btn-sm mr-2 js-mws-planner-month-nav js-mws-planner-month-nav--prev"
                            data-nav-date="{{ $mwsPlannerCalPrev->toDateString() }}"
                            aria-label="Previous month"
                        >&lsaquo;</button>
                    @else
                        <a
                            class="btn btn-default btn-sm mr-2"
                            href="{{ route('meeting-workspace.dashboard', array_merge($mwsDashboardQueryForLinks, ['date' => $mwsPlannerCalPrev->toDateString(), 'planner' => $plannerView])) }}"
                            aria-label="Previous @if($plannerView === 'week') week @else day @endif"
                        >&lsaquo;</a>
                    @endif
                    <button
                        type="button"
                        class="js-mws-planner-jump-trigger text-center px-2 mx-1 mx-sm-2"
                        title="{{ __('Go to date') }}"
                        aria-label="{{ __('Go to date') }}"
                    >
                        <span id="mwsPlannerMonthLabel" class="mws-planner-card-toolbar__label d-inline-block">{{ $mwsPlannerCalHeaderLabel }}</span>
                    </button>
                    <input
                        type="date"
                        id="mwsPlannerJumpInput"
                        class="mws-planner-jump-input"
                        value="{{ $anchor->toDateString() }}"
                        tabindex="-1"
                        aria-hidden="true"
                    >
                    @if ($plannerView === 'month')
                        <button
                            type="button"
                            class="btn btn-default btn-sm mr-2 js-mws-planner-month-nav js-mws-planner-month-nav--next"
                            data-nav-date="{{ $mwsPlannerCalNext->toDateString() }}"
                            aria-label="Next month"
                        >&rsaquo;</button>
                    @else
                        <a
                            class="btn btn-default btn-sm mr-2"
                            href="{{ route('meeting-workspace.dashboard', array_merge($mwsDashboardQueryForLinks, ['date' => $mwsPlannerCalNext->toDateString(), 'planner' => $plannerView])) }}"
                            aria-label="Next @if($plannerView === 'week') week @else day @endif"
                        >&rsaquo;</a>
                    @endif
                    <a class="btn btn-default btn-sm ml-sm-1" href="{{ route('meeting-workspace.dashboard') }}">Clear Filters</a>
                </div>
            </div>
            <div class="card-body">
                @php
                    $grouped = $plannerMeetingsGrouped ?? $plannerMeetings->groupBy(fn ($m) => $m->meeting_date->format('Y-m-d'));
                    $mecVisitsGrouped = $mecPlannerEnabled
                        ? $mecVisitActivities->groupBy(fn (array $row) => (string) ($row['event_date'] ?? ''))
                        : collect();
                @endphp

                @if ($plannerView === 'month')
                    <div id="mwsPlannerMonthBody">
                        @include('meeting-workspace.partials.planner-month-calendar', [
                            'anchor' => $anchor,
                            'grouped' => $grouped,
                            'mecVisitsGrouped' => $mecVisitsGrouped,
                            'mecPlannerEnabled' => $mecPlannerEnabled,
                            'mwsDashboardQueryForLinks' => $mwsDashboardQueryForLinks,
                        ])
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm mb-0">
                            <thead>
                                <tr>
                                    @php $h = $rangeStart->copy(); @endphp
                                    @while($h->lte($rangeEnd))
                                        <th class="text-center {{ $h->isToday() ? 'bg-light' : '' }}">
                                            <div class="mws-cal-head">{{ $h->format('D') }}</div>
                                            <div class="font-weight-bold">{{ $h->format('M j') }}</div>
                                        </th>
                                        @php $h->addDay(); @endphp
                                    @endwhile
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="vertical-align: top;">
                                    @php $c = $rangeStart->copy(); @endphp
                                    @while($c->lte($rangeEnd))
                                        @php $k = $c->format('Y-m-d'); @endphp
                                        <td class="{{ $c->isToday() ? 'bg-light' : '' }}" style="min-width: 140px;">
                                            @if ($mecPlannerEnabled)
                                                @foreach ($mecVisitsGrouped[$k] ?? [] as $visit)
                                                    <div class="border rounded p-2 mb-2 bg-white" style="border-left: 3px solid #28a745 !important;">
                                                        <div class="text-muted" style="font-size:.72rem;">{{ __('Visit') }} · {{ $visit['plan_type'] }}</div>
                                                        <button type="button" class="btn btn-link p-0 d-block font-weight-bold small text-left js-mec-visit-plan-trigger" data-plan-id="{{ $visit['plan_id'] }}" data-plan-scheme-id="{{ $visit['plan_scheme_id'] }}">{{ $visit['title'] }}</button>
                                                        <div class="text-muted small">{{ $visit['scheme_line'] }}</div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            @foreach ($grouped[$k] ?? [] as $m)
                                                <div class="border rounded p-2 mb-2 bg-white">
                                                    <div class="text-muted" style="font-size:.72rem;">{{ $m->reference_id }}</div>
                                                    <a href="{{ route('meeting-workspace.meetings.show', $m) }}" class="d-block font-weight-bold small">{{ $m->title }}</a>
                                                    <div class="text-muted small">{{ \Illuminate\Support\Str::substr((string) $m->start_time, 0, 5) }} – {{ \Illuminate\Support\Str::substr((string) $m->end_time, 0, 5) }}</div>
                                                    <span class="badge {{ $mwsPriorityBadgeClasses[$m->priority->value] ?? 'badge-secondary' }} mws-badge-soft mr-1">{{ $m->priority->label() }}</span><span class="badge {{ $mwsLifecycleBadgeClasses[$m->status->value] ?? 'badge-secondary' }} mws-badge-soft">{{ $m->status->label() }}</span>
                                                </div>
                                            @endforeach
                                        </td>
                                        @php $c->addDay(); @endphp
                                    @endwhile
                                </tr>
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        @if ($mecPlannerEnabled)
            <div class="modal fade" id="mecPlannerPlanDetailsModal" tabindex="-1" role="dialog" aria-labelledby="mecPlannerPlanDetailsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="mecPlannerPlanDetailsModalLabel">{{ __('Visit plan details') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="mecPlannerPlanDetailsModalBody" style="min-height: 200px;">
                            <div class="text-center py-5 text-muted">
                                <div class="spinner-border" role="status"><span class="sr-only">{{ __('Loading') }}…</span></div>
                                <p class="mt-2 mb-0">{{ __('Loading') }}…</p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Close') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            @include('meeting-workspace.partials.mec-add-activity-modal')
        @endif

        @if ($plannerView === 'month')
            <div class="modal fade mws-planner-day-modal" id="mwsPlannerDayModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content mws-planner-day-modal__content">
                        <div class="modal-body mws-planner-day-modal__body p-0">
                            <div class="mws-planner-day-modal__header">
                                <div class="mws-planner-day-modal__head-left">
                                    <span class="mws-planner-day-modal__daynum" id="mwsPlannerDayModalDaynum"></span>
                                    <span class="mws-planner-day-modal__head-meta">
                                        <span class="mws-planner-day-modal__dow" id="mwsPlannerDayModalDow"></span>
                                        <span class="mws-planner-day-modal__dm" id="mwsPlannerDayModalDm"></span>
                                    </span>
                                </div>
                                <button type="button" class="mws-planner-day-modal__icon-btn" data-dismiss="modal" aria-label="Close">
                                    <span class="mws-planner-day-modal__icon-circle">
                                        <i class="fa fa-times-circle" aria-hidden="true"></i>
                                    </span>
                                </button>
                            </div>
                            <div class="mws-planner-day-modal__list" id="mwsPlannerDayModalList"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection

@if ($mecPlannerEnabled && can('meeting_workspace', 'add'))
@push('scripts')
<script>
(function ($) {
    'use strict';
    /** Per-type URLs; set when navigation targets are defined. */
    window.__MWS_MEC_ADD_ACTIVITY_ROUTES__ = window.__MWS_MEC_ADD_ACTIVITY_ROUTES__ || {
        monitoring_visits: @json(can_any_visit_plan('add') ? route('plan.visit.period') : null),
        er_submission: null,
        meeting: @json(can('meeting_workspace', 'add') ? mws_mec_activity_create_url('meeting') : null),
        training: @json(can('meeting_workspace', 'add') ? mws_mec_activity_create_url('training') : null),
        procurement: @json(can('meeting_workspace', 'add') ? mws_mec_activity_create_url('procurement') : null)
    };

    $(document).on('click', '.js-mws-add-activity-option', function () {
        var $btn = $(this);
        var type = $btn.data('activity-type');
        var url = $btn.attr('data-activity-url')
            || (window.__MWS_MEC_ADD_ACTIVITY_ROUTES__ && window.__MWS_MEC_ADD_ACTIVITY_ROUTES__[type]);
        if (url) {
            window.location.assign(url);
            return;
        }
        $('#mwsMecAddActivityModal').modal('hide');
    });
})(jQuery);
</script>
@endpush
@endif

@push('scripts')
<script>
(function ($) {
    'use strict';
    var plannerView = @json($plannerView);
    var $plannerJumpInput = $('#mwsPlannerJumpInput');

    function openPlannerJumpPicker() {
        if (!$plannerJumpInput.length) {
            return;
        }
        var el = $plannerJumpInput[0];
        if (typeof el.showPicker === 'function') {
            try {
                el.showPicker();
                return;
            } catch (e) { /* fall through */ }
        }
        $plannerJumpInput.trigger('click');
    }

    function navigatePlannerToDate(dateStr) {
        if (!dateStr) {
            return;
        }
        if (plannerView === 'month' && typeof window.fetchPlannerMonthPane === 'function') {
            window.fetchPlannerMonthPane(dateStr, true);
            return;
        }
        var url = new URL(window.location.href);
        url.searchParams.set('date', dateStr);
        url.searchParams.set('planner', plannerView);
        window.location.assign(url.toString());
    }

    $(document).on('click', '.js-mws-planner-jump-trigger', function (e) {
        e.preventDefault();
        openPlannerJumpPicker();
    });

    $(document).on('keydown', '.js-mws-planner-jump-trigger', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            openPlannerJumpPicker();
        }
    });

    $plannerJumpInput.on('change', function () {
        navigatePlannerToDate($(this).val());
    });
})(jQuery);
</script>
@endpush

@if ($plannerView === 'month' || $mecPlannerEnabled)
@push('scripts')
<script>
(function ($) {
    'use strict';
    @if ($mecPlannerEnabled)
    var mecPlanDetailsModalUrl = @json(url('plan'));
    function showMecVisitPlanDetailsModal(planId, planSchemeId) {
        planId = parseInt(planId, 10);
        planSchemeId = parseInt(planSchemeId, 10);
        if (!planId || !planSchemeId) return;
        var $modal = $('#mecPlannerPlanDetailsModal');
        var $body = $('#mecPlannerPlanDetailsModalBody');
        $body.html('<div class="text-center py-5 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __('Loading') }}…</p></div>');
        $modal.modal({ backdrop: 'static', keyboard: true });
        $modal.modal('show');
        $.get(mecPlanDetailsModalUrl + '/' + planId + '/details-modal', { plan_scheme_id: planSchemeId })
            .done(function (html) { $body.html(html); })
            .fail(function () {
                $body.html('<p class="text-muted text-center py-4">{{ __('Failed to load plan details.') }}</p>');
            });
    }
    function openMecVisitPlanDetailsModal(planId, planSchemeId) {
        var $dayModal = $('#mwsPlannerDayModal');
        if ($dayModal.length && ($dayModal.hasClass('show') || $dayModal.is(':visible'))) {
            $dayModal.one('hidden.bs.modal', function () {
                showMecVisitPlanDetailsModal(planId, planSchemeId);
            });
            $dayModal.modal('hide');
            return;
        }
        showMecVisitPlanDetailsModal(planId, planSchemeId);
    }
    $(document).on('click', '.js-mec-visit-plan-trigger', function (e) {
        e.preventDefault();
        e.stopPropagation();
        openMecVisitPlanDetailsModal($(this).data('plan-id'), $(this).data('plan-scheme-id'));
    });
    $(document).on('keydown', '.js-mec-visit-plan-trigger', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            e.stopPropagation();
            openMecVisitPlanDetailsModal($(this).data('plan-id'), $(this).data('plan-scheme-id'));
        }
    });
    @endif
    @if ($plannerView === 'month')
    window.__MWS_PLANNER_MONTH_PANE_URL__ = @json(route('meeting-workspace.planner-month-pane'));
    window.__MWS_PLANNER_DAY_MEETINGS__ = @json($mwsPlannerDayModalData ?? []);
    var data = window.__MWS_PLANNER_DAY_MEETINGS__ || {};
    var plannerMonthNavLoading = false;

    function setPlannerDayMeetings(payload) {
        window.__MWS_PLANNER_DAY_MEETINGS__ = payload || {};
        data = window.__MWS_PLANNER_DAY_MEETINGS__;
    }

    function applyPlannerMonthPaneResponse(res) {
        $('#mwsPlannerMonthBody').html(res.html);
        $('#mwsPlannerMonthLabel').text(res.label);
        $('.js-mws-planner-month-nav--prev').attr('data-nav-date', res.prevDate);
        $('.js-mws-planner-month-nav--next').attr('data-nav-date', res.nextDate);
        setPlannerDayMeetings(res.dayMeetings);
        $('form input[name="date"]').val(res.anchorDate);
        $('#mwsPlannerJumpInput').val(res.anchorDate);
    }

    function fetchPlannerMonthPane(dateStr, pushHistory) {
        if (plannerMonthNavLoading || !dateStr) {
            return;
        }
        plannerMonthNavLoading = true;
        var params = new URLSearchParams(window.location.search);
        params.set('date', dateStr);
        params.set('planner', 'month');
        var fetchUrl = window.__MWS_PLANNER_MONTH_PANE_URL__ + '?' + params.toString();
        var $body = $('#mwsPlannerMonthBody');
        $body.addClass('mws-planner-month-body--loading');
        fetch(fetchUrl, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                Accept: 'application/json'
            },
            credentials: 'same-origin'
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Month pane request failed');
                }
                return response.json();
            })
            .then(function (res) {
                applyPlannerMonthPaneResponse(res);
                if (pushHistory !== false) {
                    var url = new URL(window.location.href);
                    url.searchParams.set('date', res.anchorDate);
                    url.searchParams.set('planner', 'month');
                    history.pushState({ mwsPlannerMonth: true }, '', url.toString());
                }
            })
            .catch(function () {
                var fallback = new URL(window.location.href);
                fallback.searchParams.set('date', dateStr);
                fallback.searchParams.set('planner', 'month');
                window.location.assign(fallback.toString());
            })
            .finally(function () {
                plannerMonthNavLoading = false;
                $body.removeClass('mws-planner-month-body--loading');
            });
    }
    window.fetchPlannerMonthPane = fetchPlannerMonthPane;

    $(document).on('click', '.js-mws-planner-month-nav', function (e) {
        e.preventDefault();
        var navDate = $(this).attr('data-nav-date');
        if (navDate) {
            fetchPlannerMonthPane(navDate, true);
        }
    });

    window.addEventListener('popstate', function () {
        if (!$('#mwsPlannerMonthBody').length) {
            return;
        }
        var params = new URLSearchParams(window.location.search);
        var dateFromUrl = params.get('date');
        if (dateFromUrl) {
            fetchPlannerMonthPane(dateFromUrl, false);
        }
    });
    var statusClass = {
        draft: 'mws-cal-event--draft',
        scheduled: 'mws-cal-event--scheduled',
        confirmed: 'mws-cal-event--confirmed',
        ongoing: 'mws-cal-event--ongoing',
        completed: 'mws-cal-event--completed',
        rescheduled: 'mws-cal-event--rescheduled',
        missed: 'mws-cal-event--missed',
        cancelled: 'mws-cal-event--cancelled'
    };

    function openDayModal(trigger) {
        var $t = $(trigger);
        var dateKey = $t.attr('data-date');
        var items = (data[dateKey] || []).slice();
        $('#mwsPlannerDayModalDaynum').text($t.attr('data-day-num') || '');
        $('#mwsPlannerDayModalDow').text($t.attr('data-dow') || '');
        $('#mwsPlannerDayModalDm').text($t.attr('data-dm') || '');
        var $list = $('#mwsPlannerDayModalList');
        $list.empty();
        if (!items.length) {
            $list.append($('<div class="mws-planner-day-modal__empty"></div>').text({!! json_encode($mecPlannerEnabled ? __('No visits or meetings for this day.') : 'No meetings scheduled for this day.') !!}));
        } else {
            items.forEach(function (row) {
                if (row.kind === 'visit_activity') {
                    var visitBar = row.calEventClass || 'mws-cal-event--visit-plan';
                    var $visit = $('<div class="mws-planner-day-modal__item mws-planner-day-modal__item--visit js-mec-visit-plan-trigger"></div>')
                        .attr('data-plan-id', row.planId || 0)
                        .attr('data-plan-scheme-id', row.planSchemeId || 0)
                        .attr('role', 'button')
                        .attr('tabindex', '0');
                    $visit.append($('<span class="mws-planner-day-modal__time"></span>').text(row.startShort || ''));
                    $visit.append($('<span class="mws-planner-day-modal__bar"></span>').addClass(visitBar));
                    var $vDet = $('<div class="mws-planner-day-modal__detail"></div>');
                    $vDet.append($('<span class="mws-planner-day-modal__title"></span>').text(row.title || ''));
                    if (row.schemeLine) {
                        $vDet.append($('<span class="mws-planner-day-modal__range"></span>').text(row.schemeLine));
                    }
                    if (row.visitDateLabel) {
                        $vDet.append($('<span class="mws-planner-day-modal__range d-block"></span>').text(row.visitDateLabel));
                    }
                    var $vBadges = $('<div class="mws-planner-day-modal__badges"></div>');
                    $vBadges.append(
                        $('<span></span>')
                            .attr('class', 'badge ' + (row.planTypeBadgeClass || 'badge-secondary') + ' plan-type-badge-static')
                            .text(row.planType || '')
                    );
                    $vDet.append($vBadges);
                    $visit.append($vDet);
                    $list.append($visit);
                    return;
                }
                var barClass = statusClass[row.status] || 'mws-cal-event--draft';
                var $a = $('<a class="mws-planner-day-modal__item"></a>').attr('href', row.url);
                $a.append($('<span class="mws-planner-day-modal__time"></span>').text(row.startShort));
                $a.append($('<span class="mws-planner-day-modal__bar"></span>').addClass(barClass));
                var $det = $('<div class="mws-planner-day-modal__detail"></div>');
                $det.append($('<span class="mws-planner-day-modal__title"></span>').text(row.title));
                $det.append($('<span class="mws-planner-day-modal__range"></span>').text(row.rangeLabel));
                var $badges = $('<div class="mws-planner-day-modal__badges"></div>');
                var priCls = row.priorityBadgeClass || 'badge-secondary';
                var stCls = row.statusBadgeClass || 'badge-secondary';
                $badges.append(
                    $('<span></span>')
                        .attr('class', 'badge ' + priCls + ' mws-badge-soft')
                        .text(row.priorityLabel || '')
                );
                $badges.append(
                    $('<span></span>')
                        .attr('class', 'badge ' + stCls + ' mws-badge-soft')
                        .text(row.statusLabel || '')
                );
                $det.append($badges);
                $a.append($det);
                $list.append($a);
            });
        }
        $('#mwsPlannerDayModal').modal('show');
    }

    $(document).on('click', '.js-mws-planner-day-trigger', function (e) {
        if ($(e.target).closest('a, .js-mec-visit-plan-trigger').length) {
            return;
        }
        openDayModal(this);
    });

    $(document).on('keydown', '.js-mws-planner-day-trigger', function (e) {
        if ($(e.target).closest('a, .js-mec-visit-plan-trigger').length) {
            return;
        }
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            openDayModal(this);
        }
    });
    @endif
})(jQuery);
</script>
@endpush
@endif